feat: 리뷰 요청 글 작성 aria-label 추가

woowacourse-teams · Aug 3, 2023 · f97cdd3 · f97cdd3
1 parent dcfe5a5
commit f97cdd3
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 14 deletions.
diff --git a/frontend/src/components/SelectSupportModal.tsx b/frontend/src/components/SelectSupportModal.tsx
@@ -23,11 +23,11 @@ const SelectSupportModal = ({ closeModal, handleSelectButton }: Props) => {
           <S.Title>서포터를 선택해 주세요 ✅</S.Title>
           <S.TitleDescription>선택한 서포터가 확인 후 리뷰를 진행합니다.</S.TitleDescription>
         </S.TitleContainer>
-        <S.FilterContainer>
-          <S.FilterTitle onClick={clickedFilter} selected={selectedTechField === '프론트엔드'}>
+        <S.FilterContainer tabIndex={0} aria-label="개발 분야 필터 리스트">
+          <S.FilterTitle tabIndex={0} onClick={clickedFilter} selected={selectedTechField === '프론트엔드'}>
             프론트엔드
           </S.FilterTitle>
-          <S.FilterTitle onClick={clickedFilter} selected={selectedTechField === '백엔드'}>
+          <S.FilterTitle tabIndex={0} onClick={clickedFilter} selected={selectedTechField === '백엔드'}>
             백엔드
           </S.FilterTitle>
         </S.FilterContainer>

diff --git a/frontend/src/components/SupporterSelect/SupporterSelectItem/SupporterSelectItem.tsx b/frontend/src/components/SupporterSelect/SupporterSelectItem/SupporterSelectItem.tsx
@@ -37,25 +37,25 @@ const SupporterSelectItem = ({
   };
 
   return (
-    <S.SupporterSelectItemContainer>
+    <S.SupporterSelectItemContainer tabIndex={0} aria-label="서포터 정보">
       <S.LeftSideContainer>
         <Avatar width="60px" height="60px" imageUrl={'https://via.placeholder.com/150'} />
         <S.DescriptionContainer>
-          <S.Name>{name}</S.Name>
-          <S.Company>{company}</S.Company>
+          <S.Name tabIndex={0}>{name}</S.Name>
+          <S.Company tabIndex={0}>{company}</S.Company>
           <S.TechStackContainer>
-            {technicalTags.map((tag) => (
-              <TechLabel key={supporterId} tag={tag} />
+            {technicalTags.map((tag, index) => (
+              <TechLabel key={index} tag={tag} />
             ))}
           </S.TechStackContainer>
           <S.CompletedReviewContainer>
-            <S.CompletedReview>완료한 리뷰</S.CompletedReview>
-            <S.CompletedReviewCount>{reviewCount}</S.CompletedReviewCount>
+            <S.CompletedReview tabIndex={0}>완료한 리뷰</S.CompletedReview>
+            <S.CompletedReviewCount tabIndex={0}>{reviewCount}</S.CompletedReviewCount>
           </S.CompletedReviewContainer>
         </S.DescriptionContainer>
       </S.LeftSideContainer>
       <S.ButtonContainer>
-        <S.GithubButton href={githubUrl} target="_blank">
+        <S.GithubButton href={githubUrl} target="_blank" aria-label={`${name} github 바로가기`}>
           <S.GithubIcon src={githubIcon} />
           <S.GithubButtonText>github</S.GithubButtonText>
         </S.GithubButton>
@@ -66,6 +66,7 @@ const SupporterSelectItem = ({
           fontSize="12px"
           fontWeight={700}
           onClick={handleSelectedSupporter}
+          ariaLabel={`${name} 선택하기`}
         >
           선택하기
         </Button>

diff --git a/frontend/src/components/common/Button.tsx b/frontend/src/components/common/Button.tsx
@@ -7,9 +7,10 @@ interface Props extends React.HTMLProps<HTMLButtonElement> {
   fontSize?: string | number;
   fontWeight?: number;
   type?: 'button' | 'submit' | 'reset';
+  ariaLabel?: string;
 }
 
-const Button = ({ colorTheme, children, width, height, type, fontSize, fontWeight, onClick }: Props) => {
+const Button = ({ colorTheme, children, width, height, type, fontSize, fontWeight, onClick, ariaLabel }: Props) => {
   return (
     <S.ButtonWrapper>
       <S.Button
@@ -20,6 +21,7 @@ const Button = ({ colorTheme, children, width, height, type, fontSize, fontWeigh
         $fontSize={fontSize}
         $fontWeight={fontWeight}
         onClick={onClick}
+        aria-label={ariaLabel}
       >
         {children}
       </S.Button>

diff --git a/frontend/src/components/common/Modal.tsx b/frontend/src/components/common/Modal.tsx
@@ -9,7 +9,7 @@ interface Props extends React.HTMLProps<HTMLDivElement> {
 
 const Modal = ({ children, closeModal, width, height }: Props) => {
   return createPortal(
-    <S.ModalContainer>
+    <S.ModalContainer aria-label="서포터 선택 모달창" aria-modal="true" role="서포터 선택 모달창">
       <S.BackDrop onClick={closeModal} />
       <S.ModalViewContainer $width={width} $height={height}>
         {children}

diff --git a/frontend/src/pages/MainPage.tsx b/frontend/src/pages/MainPage.tsx
@@ -27,7 +27,7 @@ const MainPage = () => {
           </S.TagContainer> */}
         </S.LeftSideContainer>
 
-        <Button onClick={goToRunnerPostCreatePage} colorTheme="WHITE" fontSize="18px">
+        <Button onClick={goToRunnerPostCreatePage} colorTheme="WHITE" fontSize="18px" ariaLabel="리뷰 요청 글 작성하기">
           리뷰 요청 글 작성하기
         </Button>
       </S.ControlPanelContainer>