From 176a412ffbe2a77053e6669311b21a4ccc00d05b Mon Sep 17 00:00:00 2001
From: jero_kang <81199414+inyeong-kang@users.noreply.github.com>
Date: Mon, 4 Sep 2023 22:09:50 +0900
Subject: [PATCH] =?UTF-8?q?=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8,=20=ED=86=B5=EA=B3=84=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8,=20UpButton=20=EC=9B=B9?=
 =?UTF-8?q?=EC=A0=91=EA=B7=BC=EC=84=B1=20=EB=86=92=EC=9D=B4=EA=B8=B0=20(#4?=
 =?UTF-8?q?60)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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 태그가 읽지 않도록 수정
---
 .../VoteStatistics/OneLineGraph/index.tsx          |  6 ++++--
 .../VoteStatistics/TwoLineGraph/index.tsx          | 10 +++++++---
 frontend/src/components/VoteStatistics/index.tsx   |  6 +++---
 .../common/Dashboard/GuestProfile/index.tsx        |  4 ++--
 .../common/Dashboard/UserProfile/index.tsx         |  4 ++--
 .../components/common/Dashboard/profileStyle.ts    |  2 +-
 frontend/src/components/common/UpButton/index.tsx  |  2 +-
 .../VoteStatisticsPage/OptionStatistics/index.tsx  | 14 ++++++++++++--
 .../VoteStatisticsPage/OptionStatistics/style.ts   |  5 +++++
 9 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/VoteStatistics/OneLineGraph/index.tsx b/frontend/src/components/VoteStatistics/OneLineGraph/index.tsx
index 5ce6552c3..b89aa50f5 100644
--- 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
index c75880da6..54b609b51 100644
--- 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
index 256d185c4..e54db51bb 100644
--- 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
index 8154d6737..9e1e15663 100644
--- 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
index c244808db..3a7e0bfe7 100644
--- 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
index eae55809c..ff27f8293 100644
--- 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
index 9b2f790bf..29d7d6db7 100644
--- 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
index 40c4679b4..109d720eb 100644
--- 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
index 89bb971b9..12dea1286 100644
--- 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;
+`;