웹 표준 및 웹 접근성 준수 (#198)

* refactor: 시멘틱 태그 적용 * refactor: 이미지 alt 속성 추가 * feat: 제목 input autoFocus 기능 추가 * feat: 리뷰 요청 글 작성 aria-label 추가
woowacourse-teams · Aug 3, 2023 · b026061 · b026061
1 parent bd66383
commit b026061
Show file tree

Hide file tree

Showing 11 changed files with 36 additions and 25 deletions.
diff --git a/frontend/src/components/InputBox.tsx b/frontend/src/components/InputBox.tsx
@@ -6,6 +6,7 @@ interface Props extends React.HTMLProps<HTMLInputElement> {
   handleInputTextState: (e: React.ChangeEvent<HTMLInputElement>) => void;
   fontSize?: string | number;
   fontWeight?: string | number;
+  autoFocus?: boolean;
 }
 
 const InputBox = ({
@@ -16,11 +17,17 @@ const InputBox = ({
   height,
   fontSize,
   fontWeight,
+  autoFocus,
   handleInputTextState,
 }: Props) => {
   return (
     <S.InputContainer $fontSize={fontSize} $fontWeight={fontWeight} $width={width} $height={height}>
-      <S.InputBox onChange={handleInputTextState} maxLength={maxLength} placeholder={placeholder} />
+      <S.InputBox
+        onChange={handleInputTextState}
+        maxLength={maxLength}
+        placeholder={placeholder}
+        autoFocus={autoFocus}
+      />
       {maxLength && (
         <S.InputTextLength>
           {inputTextState.length ?? 0} / {maxLength}

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>
@@ -54,20 +54,20 @@ const S = {
     gap: 20px;
   `,
 
-  TitleContainer: styled.div`
+  TitleContainer: styled.header`
     display: flex;
     flex-direction: column;
     gap: 15px;
 
     margin: 20px 0 53px 20px;
   `,
 
-  Title: styled.p`
+  Title: styled.h1`
     font-size: 36px;
     font-weight: 700;
   `,
 
-  TitleDescription: styled.div`
+  TitleDescription: styled.h2`
     margin-left: 5px;
 
     font-size: 18px;

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/Avatar.tsx b/frontend/src/components/common/Avatar.tsx
@@ -8,7 +8,7 @@ interface Props extends React.HTMLProps<HTMLImageElement> {
 const Avatar = ({ imageUrl, width, height }: Props) => {
   return (
     <S.ImageWrapper>
-      <S.Image src={imageUrl} $width={width} $height={height} />
+      <S.Image src={imageUrl} $width={width} $height={height} alt="프로필" />
     </S.ImageWrapper>
   );
 };

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/layout/Header.tsx b/frontend/src/layout/Header.tsx
@@ -9,7 +9,7 @@ const Header = () => {
   return (
     <S.HeaderWrapper>
       <S.HeaderContainer>
-        <S.Logo src={LogoImage} onClick={goToMainPage} />
+        <S.Logo src={LogoImage} onClick={goToMainPage} alt="바톤로고" />
         <S.MenuContainer>
           <S.LoginButton
             onClick={() => {
@@ -28,7 +28,7 @@ const Header = () => {
 export default Header;
 
 const S = {
-  HeaderWrapper: styled.div`
+  HeaderWrapper: styled.header`
     display: flex;
     justify-content: center;
 

diff --git a/frontend/src/layout/Layout.tsx b/frontend/src/layout/Layout.tsx
@@ -24,7 +24,7 @@ const S = {
     align-items: center;
   `,
 
-  ChildrenWrapper: styled.div`
+  ChildrenWrapper: styled.article`
     width: 1200px;
 
     margin-bottom: 80px;

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>
@@ -41,10 +41,10 @@ const MainPage = () => {
 export default MainPage;
 
 const S = {
-  TitleWrapper: styled.div`
+  TitleWrapper: styled.header`
     margin: 72px 0 53px 0;
   `,
-  Title: styled.p`
+  Title: styled.h1`
     font-size: 36px;
     font-weight: 700;
   `,

diff --git a/frontend/src/pages/RunnerPostCreatePage.tsx b/frontend/src/pages/RunnerPostCreatePage.tsx
@@ -162,6 +162,7 @@ const RunnerPostCreatePage = () => {
               fontSize="38px"
               fontWeight="700"
               placeholder="제목을 입력해주세요"
+              autoFocus={true}
             />
           </S.InputContainer>
           <S.InputContainer>

diff --git a/frontend/src/pages/RunnerPostDetailPage.tsx b/frontend/src/pages/RunnerPostDetailPage.tsx
@@ -214,7 +214,7 @@ const S = {
     gap: 10px;
   `,
 
-  PostTitle: styled.div`
+  PostTitle: styled.h1`
     font-size: 38px;
     font-weight: 700;
   `,