refactor: pinDetail 및 상세보기 버튼 접근성 로직 추가

woowacourse-teams · Nov 29, 2023 · feffb7c · feffb7c
1 parent 7f725a8
commit feffb7c
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 7 deletions.
diff --git a/frontend/src/pages/PinDetail.tsx b/frontend/src/pages/PinDetail.tsx
@@ -16,6 +16,7 @@ import Text from '../components/common/Text';
 import Modal from '../components/Modal';
 import AddToMyTopicList from '../components/ModalMyTopicList/addToMyTopicList';
 import PinImageContainer from '../components/PinImageContainer';
+import { ARIA_FOCUS } from '../constants';
 import { ModalContext } from '../context/ModalContext';
 import useCompressImage from '../hooks/useCompressImage';
 import useFormValues from '../hooks/useFormValues';
@@ -183,13 +184,26 @@ function PinDetail({
   return (
     <Wrapper $layoutWidth={width} $selectedPinId={pinId} data-cy="pin-detail">
       <Flex $justifyContent="space-between" $alignItems="baseline" width="100%">
-        <Text as="h2" color="black" $fontSize="extraLarge" $fontWeight="bold">
+        <Text
+          as="h2"
+          color="black"
+          $fontSize="extraLarge"
+          $fontWeight="bold"
+          tabIndex={ARIA_FOCUS}
+          aria-label={`장소 이름은 ${pin.name} 입니다.`}
+        >
           {pin.name}
         </Text>
       </Flex>
       <Space size={1} />
       <Flex $justifyContent="space-between" $alignItems="flex-end" width="100%">
-        <Text color="black" $fontSize="small" $fontWeight="normal">
+        <Text
+          color="black"
+          $fontSize="small"
+          $fontWeight="normal"
+          tabIndex={ARIA_FOCUS}
+          aria-label={`장소 작성자는 ${pin.creator} 입니다.`}
+        >
           {pin.creator}
         </Text>
         <Flex $flexDirection="column" $alignItems="flex-end">
@@ -200,7 +214,16 @@ function PinDetail({
           ) : (
             <Space size={5} />
           )}
-          <Text color="black" $fontSize="small" $fontWeight="normal">
+          <Text
+            color="black"
+            $fontSize="small"
+            $fontWeight="normal"
+            tabIndex={ARIA_FOCUS}
+            aria-label={`마지막 수정일자는 ${pin.updatedAt
+              .split('T')[0]
+              .split('-')
+              .join('.')} 입니다.`}
+          >
             {pin.updatedAt.split('T')[0].split('-').join('.')}
           </Text>
         </Flex>
@@ -222,7 +245,13 @@ function PinDetail({
           어디에 있나요?
         </Text>
         <Space size={1} />
-        <Text color="black" $fontSize="default" $fontWeight="normal">
+        <Text
+          color="black"
+          $fontSize="default"
+          $fontWeight="normal"
+          tabIndex={ARIA_FOCUS}
+          aria-label={`장소의 위치는 ${pin.address} 입니다.`}
+        >
           {pin.address}
         </Text>
       </Flex>
@@ -232,7 +261,13 @@ function PinDetail({
           어떤 곳인가요?
         </Text>
         <Space size={1} />
-        <Text color="black" $fontSize="default" $fontWeight="normal">
+        <Text
+          color="black"
+          $fontSize="default"
+          $fontWeight="normal"
+          tabIndex={ARIA_FOCUS}
+          aria-label={`장소에 대한 설명은 다음과 같습니다. ${pin.description}`}
+        >
           {pin.description}
         </Text>
       </Flex>
@@ -243,7 +278,11 @@ function PinDetail({
           내 지도에 저장하기
         </SaveToMyMapButton>
         <Space size={3} />
-        <ShareButton variant="secondary" onClick={copyContent}>
+        <ShareButton
+          variant="secondary"
+          onClick={copyContent}
+          aria-label="URL 공유하기 "
+        >
           공유하기
         </ShareButton>
       </ButtonsWrapper>
@@ -265,11 +304,13 @@ function PinDetail({
               onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                 setNewComment(e.target.value)
               }
+              aria-label="댓글을 추가하려면 텍스트를 입력하세요."
               placeholder="댓글 추가"
             />
             <ConfirmCommentButton
               variant="secondary"
               onClick={onClickCommentBtn}
+              aria-label="댓글 등록"
             >
               등록
             </ConfirmCommentButton>

diff --git a/frontend/src/pages/SelectedTopic.tsx b/frontend/src/pages/SelectedTopic.tsx
@@ -27,7 +27,7 @@ function SelectedTopic() {
   const [selectedPinId, setSelectedPinId] = useState<number | null>(null);
   const [isOpen, setIsOpen] = useState(true);
   const [isEditPinDetail, setIsEditPinDetail] = useState<boolean>(false);
-  const { coordinates, setCoordinates } = useContext(CoordinatesContext);
+  const { setCoordinates } = useContext(CoordinatesContext);
   const { width } = useSetLayoutWidth(SIDEBAR);
   const zoomTimerIdRef = useRef<NodeJS.Timeout | null>(null);
   const dragTimerIdRef = useRef<NodeJS.Timeout | null>(null);
@@ -170,6 +170,7 @@ function SelectedTopic() {
             onClick={() => {
               setIsOpen(!isOpen);
             }}
+            aria-label={`장소 상세 설명 버튼 ${isOpen ? '닫기' : '열기'}`}
           >
             ◀
           </ToggleButton>