refactor: (#408) aria-hidden 태그로 스크린리더가 span 태그가 읽지 않도록 수정

woowacourse-teams · Sep 4, 2023 · d99422c · d99422c
1 parent 46fadb0
commit d99422c
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 11 deletions.
diff --git a/frontend/src/components/VoteStatistics/OneLineGraph/index.tsx b/frontend/src/components/VoteStatistics/OneLineGraph/index.tsx
@@ -14,13 +14,11 @@ export default function OneLineGraph({ ageGroup, size }: GraphProps) {
 
         return (
           <S.OptionContainer key={ageResult.name} $size={size}>
-            <span aria-label={`${ageResult.name} 연령대에서 ${ageResult.total}명이 투표`}>
+            <span aria-label={`${ageResult.name}에서 ${ageResult.total}명이 투표`}>
               {ageResult.total}
             </span>
             <S.OptionLength $amount={amount} />
-            <span aria-label="" role="contentinfo">
-              {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,9 +16,7 @@ export default function TwoLineGraph({ ageGroup, size }: GraphProps) {
           <S.OptionContainer key={ageResult.name} $size={size}>
             <S.DataWrapper>
               <S.OptionLengthWrapper $gender="FEMALE">
-                <span
-                  aria-label={`${ageResult.name}연령대에서 ${ageResult.female}명의 여성이 투표`}
-                >
+                <span aria-label={`${ageResult.name}에서 ${ageResult.female}명의 여성이 투표`}>
                   {ageResult.female}
                 </span>
                 <S.OptionLength
@@ -27,15 +25,13 @@ export default function TwoLineGraph({ ageGroup, size }: GraphProps) {
                 />
               </S.OptionLengthWrapper>
               <S.OptionLengthWrapper $gender="MALE">
-                <span aria-label={`${ageResult.name}연령대에서 ${ageResult.male}명의 남성이 투표`}>
+                <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="" role="contentinfo">
-              {ageResult.name}
-            </span>
+            <span aria-hidden="true">{ageResult.name}</span>
           </S.OptionContainer>
         );
       })}