Refactor: aria-label 추가

codesquad-members-2022 · May 25, 2022 · df23d69 · df23d69
1 parent d32d193
commit df23d69
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 8 deletions.
diff --git a/fe/src/components/Header/SearchBar/Period.tsx b/fe/src/components/Header/SearchBar/Period.tsx
@@ -12,13 +12,15 @@ function Period() {
     <PeriodContainer>
       <CommonWrapper>
         <CheckIn>체크인</CheckIn>
-        <Btn>날짜 입력</Btn>
+        <Btn aria-label="체크인 날짜 입력 버튼">날짜 입력</Btn>
       </CommonWrapper>
       <CommonWrapper>
         <CheckOut>체크아웃</CheckOut>
-        <Btn>날짜 입력</Btn>
+        <Btn aria-label="체크아웃 날짜 입력 버튼">날짜 입력</Btn>
       </CommonWrapper>
-      <StyledCrossIcon />
+      <button type="button" aria-label="날짜 입력 취소 버튼">
+        <StyledCrossIcon />
+      </button>
     </PeriodContainer>
   );
 }

diff --git a/fe/src/components/Header/SearchBar/Personnel.tsx b/fe/src/components/Header/SearchBar/Personnel.tsx
@@ -11,9 +11,11 @@ function Personnel() {
     <PersonnelContainer>
       <CommonWrapper>
         <Label>인원</Label>
-        <Btn>게스트 추가</Btn>
+        <Btn aria-label="게스트 추가 버튼">게스트 추가</Btn>
       </CommonWrapper>
-      <StyledCrossIcon />
+      <button type="button" aria-label="게스트 추가 취소 버튼">
+        <StyledCrossIcon />
+      </button>
     </PersonnelContainer>
   );
 }

diff --git a/fe/src/components/Header/SearchBar/Price.tsx b/fe/src/components/Header/SearchBar/Price.tsx
@@ -11,9 +11,11 @@ function Price() {
     <PriceContainer>
       <PriceWrapper>
         <Label>요금</Label>
-        <Btn>₩100,000~1,000,000</Btn>
+        <Btn aria-label="요금 입력 버튼">₩100,000~1,000,000</Btn>
       </PriceWrapper>
-      <StyledCrossIcon />
+      <button type="button" aria-label="요금 입력 취소 버튼">
+        <StyledCrossIcon />
+      </button>
     </PriceContainer>
   );
 }

diff --git a/fe/src/components/Header/SearchBar/searchBar.styled.js b/fe/src/components/Header/SearchBar/searchBar.styled.js
@@ -66,7 +66,7 @@ export const CheckIn = styled(Label)`
 
 export const CheckOut = styled(CheckIn)``;
 
-export const SearchButton = styled.div`
+export const SearchButton = styled.button`
   display: flex;
   align-items: center;
   justify-content: center;