[FE] feature/#325 웹 접근성 적용 (#327)

* feat: 웹 접근성 적용 * refactor: toast 나올 때 리더기가 읽도록 수정 * refactor: 지도 이미지 label 적용
woowacourse-teams · Aug 17, 2023 · bc2b0e7 · bc2b0e7
1 parent 8e084b0
commit bc2b0e7
Show file tree

Hide file tree

Showing 11 changed files with 172 additions and 73 deletions.
diff --git a/frontend/src/components/Layout/Logo.tsx b/frontend/src/components/Layout/Logo.tsx
@@ -1,29 +1,21 @@
 import LogoImage from '../../assets/logo.svg';
 import useNavigator from '../../hooks/useNavigator';
 import Box from '../common/Box';
-import { KeyboardEvent, useRef } from 'react';
+import useKeyDown from '../../hooks/useKeyDown';
 
 const Logo = () => {
   const { routePage } = useNavigator();
-
-  const divRef = useRef<HTMLDivElement | null>(null);
+  const { elementRef, onElementKeyDown } = useKeyDown<HTMLDivElement>();
 
   const goToHome = () => {
     routePage('/');
   };
 
-  const onDivKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
-    if (e.keyCode === 13) {
-      e.preventDefault();
-      divRef.current?.click();
-    }
-  };
-
   return (
     <Box
       cursor="pointer"
-      onKeyDown={onDivKeyDown}
-      ref={divRef}
+      onKeyDown={onElementKeyDown}
+      ref={elementRef}
       onClick={goToHome}
       aria-label="괜찮을지도 로고 및 홈으로 이동 버튼"
       tabIndex={0}

diff --git a/frontend/src/components/Layout/Navbar.tsx b/frontend/src/components/Layout/Navbar.tsx
@@ -20,6 +20,7 @@ import { ModalContext } from '../../context/ModalContext';
 import { NavbarHighlightsContext } from '../../context/NavbarHighlightsContext';
 import { useParams } from 'react-router-dom';
 import SeeTogetherCounter from '../SeeTogetherCounter';
+import useKeyDown from '../../hooks/useKeyDown';
 
 interface NavBarProps {
   $layoutWidth: '100vw' | '372px';
@@ -30,6 +31,16 @@ const Navbar = ({ $layoutWidth }: NavBarProps) => {
   const { topicId } = useParams();
   const { openModal, closeModal } = useContext(ModalContext);
   const { navbarHighlights } = useContext(NavbarHighlightsContext);
+  const { elementRef: firstElement, onElementKeyDown: firstKeyDown } =
+    useKeyDown<HTMLDivElement>();
+  const { elementRef: secondElement, onElementKeyDown: secondKeyDown } =
+    useKeyDown<HTMLDivElement>();
+  const { elementRef: thirdElement, onElementKeyDown: thirdKeyDown } =
+    useKeyDown<HTMLDivElement>();
+  const { elementRef: fourElement, onElementKeyDown: fourKeyDown } =
+    useKeyDown<HTMLDivElement>();
+  const { elementRef: FifthElement, onElementKeyDown: FifthKeyDown } =
+    useKeyDown<HTMLDivElement>();
 
   const goToHome = () => {
     routePage('/');
@@ -63,7 +74,12 @@ const Navbar = ({ $layoutWidth }: NavBarProps) => {
 
   return (
     <Wrapper $layoutWidth={$layoutWidth}>
-      <IconWrapper onClick={goToHome}>
+      <IconWrapper
+        onClick={goToHome}
+        tabIndex={10}
+        ref={firstElement}
+        onKeyDown={firstKeyDown}
+      >
         {navbarHighlights.home ? <FocusHome /> : <Home />}
         <Text
           color={navbarHighlights.home ? 'primary' : 'darkGray'}
@@ -76,7 +92,12 @@ const Navbar = ({ $layoutWidth }: NavBarProps) => {
 
       <IconSpace size={7} $layoutWidth={$layoutWidth} />
 
-      <IconWrapper onClick={goToSeeTogether}>
+      <IconWrapper
+        onClick={goToSeeTogether}
+        tabIndex={10}
+        ref={secondElement}
+        onKeyDown={secondKeyDown}
+      >
         {navbarHighlights.seeTogether ? <FocusSeeTogether /> : <SeeTogether />}
         <Text
           color={navbarHighlights.seeTogether ? 'primary' : 'darkGray'}
@@ -90,7 +111,12 @@ const Navbar = ({ $layoutWidth }: NavBarProps) => {
 
       <IconSpace size={7} $layoutWidth={$layoutWidth} />
 
-      <IconWrapper onClick={onClickAddMapOrPin}>
+      <IconWrapper
+        onClick={onClickAddMapOrPin}
+        tabIndex={10}
+        ref={thirdElement}
+        onKeyDown={thirdKeyDown}
+      >
         {navbarHighlights.addMapOrPin ? <FocusAddMapOrPin /> : <AddMapOrPin />}
         <Text
           color={navbarHighlights.addMapOrPin ? 'primary' : 'darkGray'}
@@ -103,7 +129,12 @@ const Navbar = ({ $layoutWidth }: NavBarProps) => {
 
       <IconSpace size={7} $layoutWidth={$layoutWidth} />
 
-      <IconWrapper onClick={goToFavorite}>
+      <IconWrapper
+        onClick={goToFavorite}
+        tabIndex={11}
+        ref={fourElement}
+        onKeyDown={fourKeyDown}
+      >
         {navbarHighlights.favorite ? <FocusFavorite /> : <Favorite />}
         <Text
           color={navbarHighlights.favorite ? 'primary' : 'darkGray'}
@@ -116,7 +147,12 @@ const Navbar = ({ $layoutWidth }: NavBarProps) => {
 
       <IconSpace size={7} $layoutWidth={$layoutWidth} />
 
-      <IconWrapper onClick={goToProfile}>
+      <IconWrapper
+        onClick={goToProfile}
+        tabIndex={11}
+        ref={FifthElement}
+        onKeyDown={FifthKeyDown}
+      >
         {navbarHighlights.profile ? <FocusProfile /> : <Profile />}
         <Text
           color={navbarHighlights.profile ? 'primary' : 'darkGray'}
@@ -137,11 +173,11 @@ const Navbar = ({ $layoutWidth }: NavBarProps) => {
         left={$layoutWidth === '100vw' ? '' : `${372 / 2}px`}
       >
         <Flex $justifyContent="center" width="100%">
-          <RouteButton variant="primary" onClick={goToNewTopic}>
+          <RouteButton variant="primary" onClick={goToNewTopic} tabIndex={10}>
             지도 추가하기
           </RouteButton>
           <Space size={4} />
-          <RouteButton variant="primary" onClick={goToNewPin}>
+          <RouteButton variant="primary" onClick={goToNewPin} tabIndex={10}>
             핀 추가하기
           </RouteButton>
         </Flex>

diff --git a/frontend/src/components/Map/index.tsx b/frontend/src/components/Map/index.tsx
@@ -22,7 +22,14 @@ const Map = (props: any, ref: any) => {
   useAnimateClickedPin(map, markers);
 
   return (
-    <MapFlex flex="1" id="map" ref={ref} height="100vh" $minWidth={width} />
+    <MapFlex
+      aria-label="괜찮을지도 지도 이미지"
+      flex="1"
+      id="map"
+      ref={ref}
+      height="100vh"
+      $minWidth={width}
+    />
   );
 };
 

diff --git a/frontend/src/components/Modal/index.tsx b/frontend/src/components/Modal/index.tsx
@@ -2,6 +2,7 @@ import { useContext, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import { css, keyframes, styled } from 'styled-components';
 import { ModalContext } from '../../context/ModalContext';
+import Box from '../common/Box';
 type ModalWrapperType = Omit<
   ModalProps,
   'modalKey' | 'children' | '$dimmedColor'
@@ -54,7 +55,7 @@ const Modal = ({
 
   return ReactDOM.createPortal(
     modalOpens[modalKey] && (
-      <>
+      <Box role="dialog">
         <WrapperDimmed
           $dimmedColor={$dimmedColor}
           onClick={onClickDimmedCloseModal}
@@ -69,7 +70,7 @@ const Modal = ({
         >
           {children}
         </Wrapper>
-      </>
+      </Box>
     ),
     root,
   );

diff --git a/frontend/src/components/Toast/index.tsx b/frontend/src/components/Toast/index.tsx
@@ -14,7 +14,7 @@ const Toast = () => {
 
   return ReactDOM.createPortal(
     toast.show && (
-      <Wrapper $justifyContent="center" $alignItems="center" type={toast.type}>
+      <Wrapper $justifyContent="center" $alignItems="center" type={toast.type} role="alert">
         {toast.message}
       </Wrapper>
     ),

diff --git a/frontend/src/components/TopicCard/index.tsx b/frontend/src/components/TopicCard/index.tsx
@@ -16,6 +16,7 @@ import { DEFAULT_TOPIC_IMAGE } from '../../constants';
 import AddSeeTogether from '../AddSeeTogether';
 import AddFavorite from '../AddFavorite';
 import { TopicType } from '../../types/Topic';
+import useKeyDown from '../../hooks/useKeyDown';
 
 interface TopicCardProps extends TopicType {
   setTopicsFromServer: () => void;
@@ -34,14 +35,19 @@ const TopicCard = ({
   setTopicsFromServer,
 }: TopicCardProps) => {
   const { routePage } = useNavigator();
+  const { elementRef, onElementKeyDown } = useKeyDown<HTMLLIElement>();
 
   const goToSelectedTopic = () => {
     routePage(`/topics/${id}`, [id]);
   };
 
   return (
-    <Wrapper onClick={goToSelectedTopic}>
-      <Flex position="relative">
+    <Wrapper
+      onClick={goToSelectedTopic}
+      ref={elementRef}
+      onKeyDown={onElementKeyDown}
+    >
+      <Flex position="relative" tabIndex={0} role="button">
         <TopicImage
           height="138px"
           width="138px"
@@ -55,12 +61,22 @@ const TopicCard = ({
 
         <Box width="192px" padding={1}>
           <Box height="52px">
-            <Text color="black" $fontSize="default" $fontWeight="bold">
+            <Text
+              color="black"
+              $fontSize="default"
+              $fontWeight="bold"
+              aria-label={`토픽 이름 ${name}`}
+            >
               {name}
             </Text>
           </Box>
 
-          <Text color="black" $fontSize="small" $fontWeight="normal">
+          <Text
+            color="black"
+            $fontSize="small"
+            $fontWeight="normal"
+            aria-label={`작성자 ${creator}`}
+          >
             {creator}
           </Text>
 
@@ -76,14 +92,24 @@ const TopicCard = ({
             <Flex $alignItems="center" width="64px">
               <SmallTopicPin />
               <Space size={0} />
-              <Text color="black" $fontSize="extraSmall" $fontWeight="normal">
+              <Text
+                color="black"
+                $fontSize="extraSmall"
+                $fontWeight="normal"
+                aria-label={`핀 갯수 ${pinCount}개`}
+              >
                 {pinCount > 999 ? '+999' : pinCount}개
               </Text>
             </Flex>
             <Flex $alignItems="center" width="64px">
               <SmallTopicStar />
               <Space size={0} />
-              <Text color="black" $fontSize="extraSmall" $fontWeight="normal">
+              <Text
+                color="black"
+                $fontSize="extraSmall"
+                $fontWeight="normal"
+                aria-label={`즐겨찾기 ${bookmarkCount}명`}
+              >
                 {bookmarkCount > 999 ? '+999' : bookmarkCount}명
               </Text>
             </Flex>

diff --git a/frontend/src/components/TopicInfo/index.tsx b/frontend/src/components/TopicInfo/index.tsx
@@ -131,7 +131,11 @@ const TopicInfo = ({
           )}
         </AddSeeTogether>
         <Space size={5} />
-        <AddFavorite id={Number(topicId)}>
+        <AddFavorite
+          isBookmarked={isBookmarked}
+          id={Number(topicId)}
+          setTopicFromServer={setTopicsFromServer}
+        >
           <FavoriteNotFilledSVG />
         </AddFavorite>
         <Space size={5} />

diff --git a/frontend/src/components/TopicListContainer/index.tsx b/frontend/src/components/TopicListContainer/index.tsx
@@ -5,6 +5,7 @@ import Box from '../common/Box';
 import Space from '../common/Space';
 import { lazy, Suspense } from 'react';
 import TopicCardListSeleton from '../TopicCardList/TopicCardListSeleton';
+import useKeyDown from '../../hooks/useKeyDown';
 
 const TopicCardList = lazy(() => import('../TopicCardList'));
 
@@ -18,47 +19,54 @@ const TopicListContainer = ({
   containerTitle,
   containerDescription,
   routeWhenSeeAll,
-}: TopicListContainerProps) => (
-  <section>
-    <Flex $justifyContent="space-between" $alignItems="flex-end">
-      <Box>
-        <Text
-          color="black"
-          $fontSize="extraLarge"
-          $fontWeight="bold"
-          tabIndex={0}
-        >
-          {containerTitle}
-        </Text>
-        <Space size={0} />
-        <Text
-          color="gray"
-          $fontSize="default"
+}: TopicListContainerProps) => {
+  const { elementRef, onElementKeyDown } = useKeyDown<HTMLSpanElement>();
+
+  return (
+    <section>
+      <Flex $justifyContent="space-between" $alignItems="flex-end">
+        <Box>
+          <Text
+            color="black"
+            $fontSize="extraLarge"
+            $fontWeight="bold"
+            tabIndex={0}
+          >
+            {containerTitle}
+          </Text>
+          <Space size={0} />
+          <Text
+            color="gray"
+            $fontSize="default"
+            $fontWeight="normal"
+            tabIndex={0}
+          >
+            {containerDescription}
+          </Text>
+        </Box>
+
+        <PointerText
+          color="primary"
+          $fontSize="small"
           $fontWeight="normal"
-          tabIndex={1}
+          tabIndex={0}
+          onClick={routeWhenSeeAll}
+          aria-label="인기 급상승할 지도 전체보기 버튼"
+          ref={elementRef}
+          onKeyDown={onElementKeyDown}
         >
-          {containerDescription}
-        </Text>
-      </Box>
-
-      <PointerText
-        color="primary"
-        $fontSize="small"
-        $fontWeight="normal"
-        tabIndex={2}
-        onClick={routeWhenSeeAll}
-      >
-        전체 보기
-      </PointerText>
-    </Flex>
+          전체 보기
+        </PointerText>
+      </Flex>
 
-    <Space size={4} />
+      <Space size={4} />
 
-    <Suspense fallback={<TopicCardListSeleton />}>
-      <TopicCardList />
-    </Suspense>
-  </section>
-);
+      <Suspense fallback={<TopicCardListSeleton />}>
+        <TopicCardList />
+      </Suspense>
+    </section>
+  );
+};
 
 const PointerText = styled(Text)`
   cursor: pointer;