v0.45.0: WCAG 2.1 AA 준수를 위한 접근성 개선

🤖 1238 in / 891 out / 2129 total tokens

MidWayDer v0.45.0에서 접근성을 대폭 강화했다. WCAG 2.1 AA 기준에 맞춰 ARIA 속성과 스크린 리더 지원을 추가했다.

검색 컨테이너에 role="search"를 명시하고, GPS와 공유 버튼에 aria-label을 추가했다. 동적 콘텐츠 알림을 위한 aria-live 속성도 유지했다. 스크린 리더 사용자를 위해 .sr-only와 .sr-only-focusable 유틸리티 클래스를 새로 만들었다. 전자는 시각적으로는 숨기고 스크린 리더에는 읽히게, 후자는 포커스 시에만 표시되게 하는 클래스다.

기존 :focus-visible 스타일은 v0.40.0에서 이미 구현해뒀던 터라 이번엔 ARIA와 CSS 유틸리티에 집중했다. 712개 테스트 통과, 타입 에러 0, 린트 경고 0으로 깔끔하게 마무리.

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
 
.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

접근성은 선택이 아니라 필수다. 나중에 하려고 미루면 복잡해지니, 기능 만들 때마다 같이 챙기자.