이 때, color-contrast(명암비)는 디자이너의 판단 하에 rule을 무시하기로 한다. 또한 a11y 속성과 관련된 'aria-*'과 'role' attribute는 storybook control에 굳이 보여주지 않기로 한다.(aria-*는 자동으로 control에서 제외됨)
이제 storybook을 실행하고 컴포넌트별로 살펴본다. a11y addon
storybook addons에 새로운 Accessibility 탭이 추가되었고, violation / pass / incomplete 한 웹접근성 가이드에 대한 정보가 나온다.
IconButton 컴포넌트에서 aria-label이 없다는 에러 메시지를 발견했다. 1 Violations
IconButton은 children에 icon react element만 들어가기 때문에 text 요소가 없어서 생기는 문제이다. 따라서 aria-label을 명시해야한다. 하지만 aria-*과 role과 같은 prop은 허용되지 않았기 때문에 새로 추가해야한다. (현재는 <button> element의 모든 prop을 허용하도록 변경됨)
전역적으로 사용할 수 있는 a11y system prop을 만든다.
import { AriaAttributes, AriaRole } from 'react';
export type AriaProps = AriaAttributes & { role: AriaRole };
그 후, 기존 Button Prop에 AriaProps를 추가한다.
이제 IconButton에서 aria-label prop을 사용할 수 있다. typescript에 aria-label 자동 완성 aria-label 적용 후, violation이 사라진 것을 확인했다! violations 해결
known issues
loplat UI의 모든 컴포넌트에 대해 violations를 없애기는 했지만 a11y addon은 최소한의 가이드 수준으로 보인다.(실제로 스크린 리더가 어색하게 동작할 수도 있음)
Toast(Alert), Modal, button, input 과 같이 aria/role/type 속성이 특히 중요한 컴포넌트 먼저 웹접근성 개선을 해나가야겠다.