대시보드 컴포넌트, 통계 컴포넌트, UpButton 웹접근성 높이기 (#460)

* refactor: (#408) 투표 통계 관련 컴포넌트 웹접근성 개선 * refactor: (#408) 대시보드 프로필 웹접근성 개선 * refactor: (#408) UpButton 웹접근성 개선 * refactor: (#408) Toast 웹접근성 개선 * chore: (#408) 불필요한 코드 삭제 * refactor: (#408) 선택지 통계가 닫혀있는 경우 스크린리더가 읽어주도록 메시지 추가 * refactor: (#408) 스크린리더가 첫번째 span에서 연령대와 인원을 모두 읽도록 수정 * refactor: (#408) TwoLineGraph에서 스크린리더가 첫번째 span에서 연령대와 인원을 모두 읽도록 수정 * refactor: (#408) aria-hidden 태그로 스크린리더가 span 태그가 읽지 않도록 수정
woowacourse-teams · Sep 4, 2023 · 176a412 · 176a412
1 parent 46b6985
commit 176a412
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 16 deletions.
diff --git a/frontend/src/components/VoteStatistics/OneLineGraph/index.tsx b/frontend/src/components/VoteStatistics/OneLineGraph/index.tsx
@@ -14,9 +14,11 @@ export default function OneLineGraph({ ageGroup, size }: GraphProps) {
 
         return (
           <S.OptionContainer key={ageResult.name} $size={size}>
-            <span aria-label="투표한 인원">{ageResult.total}</span>
+            <span aria-label={`${ageResult.name}에서 ${ageResult.total}명이 투표`}>
+              {ageResult.total}
+            </span>
             <S.OptionLength $amount={amount} />
-            <span aria-label="투표한 나이대">{ageResult.name}</span>
+            <span aria-hidden="true">{ageResult.name}</span>
           </S.OptionContainer>
         );
       })}

diff --git a/frontend/src/components/VoteStatistics/TwoLineGraph/index.tsx b/frontend/src/components/VoteStatistics/TwoLineGraph/index.tsx
@@ -16,18 +16,22 @@ export default function TwoLineGraph({ ageGroup, size }: GraphProps) {
           <S.OptionContainer key={ageResult.name} $size={size}>
             <S.DataWrapper>
               <S.OptionLengthWrapper $gender="FEMALE">
-                <span aria-label="투표한 여자수">{ageResult.female}</span>
+                <span aria-label={`${ageResult.name}에서 ${ageResult.female}명의 여성이 투표`}>
+                  {ageResult.female}
+                </span>
                 <S.OptionLength
                   $amount={(ageResult.female / maxVoteAmount) * 100}
                   $gender="FEMALE"
                 />
               </S.OptionLengthWrapper>
               <S.OptionLengthWrapper $gender="MALE">
-                <span aria-label="투표한 남자수">{ageResult.male}</span>
+                <span aria-label={`${ageResult.name}에서 ${ageResult.male}명의 남성이 투표`}>
+                  {ageResult.male}
+                </span>
                 <S.OptionLength $amount={(ageResult.male / maxVoteAmount) * 100} $gender="MALE" />
               </S.OptionLengthWrapper>
             </S.DataWrapper>
-            <span aria-label="투표한 나이대">{ageResult.name}</span>
+            <span aria-hidden="true">{ageResult.name}</span>
           </S.OptionContainer>
         );
       })}

diff --git a/frontend/src/components/VoteStatistics/index.tsx b/frontend/src/components/VoteStatistics/index.tsx
@@ -58,14 +58,14 @@ export default function VoteStatistics({ voteResultResponse, size }: VoteStatist
           );
         })}
       </S.CategoryWrapper>
-      <S.GenderExplain>
+      <S.GenderExplain aria-label="성별 조건">
         {currentRadioMode === 'gender' && (
           <>
             <label>
-              <S.ColorIcon $gender="FEMALE" /> 여자
+              <S.ColorIcon aria-label="성별 조건" $gender="FEMALE" /> 여자
             </label>
             <label>
-              <S.ColorIcon $gender="MALE" /> 남자
+              <S.ColorIcon aria-label="성별 조건" $gender="MALE" /> 남자
             </label>
           </>
         )}

diff --git a/frontend/src/components/common/Dashboard/GuestProfile/index.tsx b/frontend/src/components/common/Dashboard/GuestProfile/index.tsx
@@ -9,9 +9,9 @@ import * as S from './style';
 
 export default function GuestProfile() {
   return (
-    <S.Container>
+    <S.Container role="region" aria-label="비회원 프로필">
       <Link to={BASE_PATH.LOGIN}>
-        <S.Image src={kakaoLogin} alt="로그인 페이지로 이동" />
+        <S.Image src={kakaoLogin} alt="카카오 로그인 페이지로 이동" />
       </Link>
       <S.TextCard>로그인 후 이용할 수 있습니다</S.TextCard>
     </S.Container>

diff --git a/frontend/src/components/common/Dashboard/UserProfile/index.tsx b/frontend/src/components/common/Dashboard/UserProfile/index.tsx
@@ -18,11 +18,11 @@ export default function UserProfile({ userInfo }: UserProfileProps) {
   const { pathname } = useLocation();
 
   return (
-    <PS.ProfileContainer>
+    <PS.ProfileContainer role="region" aria-label="회원 프로필">
       {pathname === PATH.USER_INFO ? (
         <S.NickName>{nickname}</S.NickName>
       ) : (
-        <S.TextCardLink to={PATH.USER_INFO}>
+        <S.TextCardLink to={PATH.USER_INFO} aria-label="닉네임을 클릭하면 마이페이지로 이동합니다.">
           <S.NickName>{nickname}</S.NickName>
         </S.TextCardLink>
       )}

diff --git a/frontend/src/components/common/Dashboard/profileStyle.ts b/frontend/src/components/common/Dashboard/profileStyle.ts
@@ -1,6 +1,6 @@
 import { styled } from 'styled-components';
 
-export const ProfileContainer = styled.div`
+export const ProfileContainer = styled.section`
   display: flex;
   flex-direction: column;
   justify-content: space-around;

diff --git a/frontend/src/components/common/UpButton/index.tsx b/frontend/src/components/common/UpButton/index.tsx
@@ -9,7 +9,7 @@ interface UpButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
 export default function UpButton({ ...rest }: UpButtonProps) {
   return (
     <S.Button {...rest}>
-      <img src={chevronUp} alt="" />
+      <img src={chevronUp} alt="페이지 최상단으로 스크롤 올리기" />
     </S.Button>
   );
 }
diff --git a/frontend/src/pages/VoteStatisticsPage/OptionStatistics/index.tsx b/frontend/src/pages/VoteStatisticsPage/OptionStatistics/index.tsx
@@ -46,7 +46,7 @@ export default function OptionStatistics({
   return (
     <S.Container>
       <WrittenVoteOption
-        ariaLabel=""
+        ariaLabel="투표 통계"
         key={voteOption.id}
         {...voteOption}
         isPreview={false}
@@ -55,8 +55,18 @@ export default function OptionStatistics({
         handleVoteClick={toggleOptionStatistics}
       />
       <S.StatisticsContainer>
+        {!isStatisticsOpen && (
+          <S.ScreenReaderDirection>
+            투표 선택지를 클릭하여 투표 통계를 열어 확인할 수 있습니다.
+          </S.ScreenReaderDirection>
+        )}
         {isStatisticsOpen && voteResult && (
-          <VoteStatistics voteResultResponse={voteResult} size={size} />
+          <>
+            <S.ScreenReaderDirection>
+              투표 선택지를 클릭하여 투표 통계를 닫을 수 있습니다.
+            </S.ScreenReaderDirection>
+            <VoteStatistics voteResultResponse={voteResult} size={size} />
+          </>
         )}
         {isStatisticsOpen && isLoading && (
           <S.LoadingWrapper>

diff --git a/frontend/src/pages/VoteStatisticsPage/OptionStatistics/style.ts b/frontend/src/pages/VoteStatisticsPage/OptionStatistics/style.ts
@@ -27,3 +27,8 @@ export const LoadingWrapper = styled.div`
 
   height: 100px;
 `;
+
+export const ScreenReaderDirection = styled.p`
+  position: absolute;
+  left: -9999px;
+`;