01문제 분석 · 접근성 개선 제안
문제의 원인을 찾고 개선을 제안합니다
- 문제
- 디자인시스템 컴포넌트의 접근성 정보가 부족해 E2E 테스트에서 컴포넌트를 찾기 어려웠습니다.
- 조사
- 전체 컴포넌트의 접근성 속성을 조사하고, 개선이 필요한 항목을 정리했습니다.
- 제안
- 접근성 테스트 예시와 디자인시스템 컴포넌트별 개선안을 작성해 공유했습니다.
- 결과
- 제안한 개선안이 반영되어, 디자인시스템 33종 컴포넌트에 필요한 role·ARIA 속성이 적용되었습니다.
접근성 Role.mdMarkdown
role 속성과 테스트 코드의 연관성
프론트엔드에서 e2e 테스트 코드를 작성하는 방법에는 크게 세 가지가 있습니다.
// 1. html 태그와 css 선택자로 탐색
const repeatSettingModal = page.locator('section#repeat-setting-modal');
// 2. test-id 부여
await page.getByTestId('repeat-select').click();
// 3. 접근성 role을 통해 탐색
await page.getByRole('button', { name: '일정 추가' }).click();1번 방법의 경우, 복잡한 구조의 태그는 쉽게 찾을 수 없다는 단점이 있습니다.
2번 방법의 경우, 테스트가 필요한 모든 컴포넌트에 data-testid 속성을 넘겨주어야 하는 번거로움이 있습니다.
사용자관리 전화번호 입력 예시
// 사용자관리 테이블 최상단에 전화번호를 입력
await page
.locator('section')
.locator('table')
.locator('tbody')
.locator('input[placeholder="휴대전화"]')
.fill('010-1234-5678')
// 접근성 role을 사용하여 탐색할 경우
await page
.getByRole('textbox', { name: '휴대전화' })
.fill('010-1234-5678')접근성을 사용할 경우, 위처럼 role 속성과 Accessible Name 값을 통해 쉽게 테스트 코드를 작성할 수 있습니다.
디자인 시스템 Role 정의
현재 하이웍스 디자인시스템에서 role 속성이 정의되어 있지 않거나, 논의가 필요한 컴포넌트는 다음과 같습니다.
(경영 플랫폼을 기준으로 정리하였습니다.)
| 컴포넌트 | 정리한 Role 기준 |
|---|---|
| Autocomplete | combobox |
| DatePicker | combobox · TableDatePicker는 button |
| ↳ DatePicker - Calendar | dialog · 내부 요소에 aria-label 추가 |
| … | … |