From f97cdd363d1f107146bc1ffdeac621c5eef7c76e Mon Sep 17 00:00:00 2001
From: gyeongza <gyeongza@naver.com>
Date: Thu, 3 Aug 2023 16:27:06 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A6=AC=EB=B7=B0=20=EC=9A=94=EC=B2=AD?=
 =?UTF-8?q?=20=EA=B8=80=20=EC=9E=91=EC=84=B1=20aria-label=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/SelectSupportModal.tsx  |  6 +++---
 .../SupporterSelectItem/SupporterSelectItem.tsx | 17 +++++++++--------
 frontend/src/components/common/Button.tsx       |  4 +++-
 frontend/src/components/common/Modal.tsx        |  2 +-
 frontend/src/pages/MainPage.tsx                 |  2 +-
 5 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/SelectSupportModal.tsx b/frontend/src/components/SelectSupportModal.tsx
index fb3aaddba..c991b25f0 100644
--- 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
index 7191b433a..6be197f6d 100644
--- 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
index fb94574c1..e7b81b4de 100644
--- 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
index 2558f933d..05f527898 100644
--- 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
index bd8aa329c..8dcad1c24 100644
--- 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>