feat: (#456) 타임 픽커 웹 접근성 향상

woowacourse-teams · Aug 17, 2023 · fe3803b · fe3803b
1 parent 72ad8be
commit fe3803b
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/frontend/src/components/common/TimePickerOptionList/TimePickerOption/constants.ts b/frontend/src/components/common/TimePickerOptionList/TimePickerOption/constants.ts
@@ -5,3 +5,9 @@ export const TIME_UNIT: { [key: string]: number } = {
  hour: 24,
  minute: 60,
 };
+
+export const TIME_KOREAN: { [key: string]: string } = {
+ day: '일',
+ hour: '시간',
+ minute: '분',
+};
diff --git a/frontend/src/components/common/TimePickerOptionList/TimePickerOption/index.tsx b/frontend/src/components/common/TimePickerOptionList/TimePickerOption/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 
-import { TIME_UNIT, TIMEBOX_CHILD_HEIGHT } from './constants';
+import { TIME_KOREAN, TIME_UNIT, TIMEBOX_CHILD_HEIGHT } from './constants';
 import * as S from './style';
 
 interface TimePickerOptionProps {
@@ -65,11 +65,19 @@ export default function TimePickerOption({
  return (
  <S.Container>
  <S.PickedTimeOverlay />
- <S.TimeBox onScroll={handleScroll} ref={timeBoxRef} onWheel={handleWheel}>
+ <S.TimeBox
+ aria-label={`현재 선택된 ${TIME_KOREAN[option]}은 ${currentTime} 입니다. 위, 아래 방향키 혹은 터치로 시간 조절이 가능합니다.`}
+ tabIndex={0}
+ onScroll={handleScroll}
+ ref={timeBoxRef}
+ onWheel={handleWheel}
+ >
  <S.Empty />
  {Array.from({ length: timeUnit }).map((_, index) => (
  <S.Time
  key={index}
+ aria-live="polite"
+ aria-label={`현재 선택된 ${TIME_KOREAN[option]}은 ${currentTime} 입니다.`}
  ref={index === currentTime ? timeBoxChildRef : null}
  $isPicked={currentTime === index}
  >

diff --git a/frontend/src/components/common/TimePickerOptionList/index.tsx b/frontend/src/components/common/TimePickerOptionList/index.tsx
@@ -36,7 +36,7 @@ export default function TimePickerOptionList({ time, setTime }: TimePickerOption
  ></TimePickerOption>
  ))}
  </S.Container>
- <S.PickedTimeText>
+ <S.PickedTimeText tabIndex={0}>
  <p>{day}일</p>
  <p>{hour}시</p>
  <p>{minute}분</p> 후 마감