피드로 돌아가기
Dev.toFrontend
원문 읽기
Indication API 기반 3:1 대비율 확보한 Compose 포커스 인디케이터 설계
More Accessible Focus Indicators with Compose
AI 요약
Context
Android 기본 Ripple 효과의 낮은 가시성으로 인한 WCAG 2.4.13 기준 미달성 문제 발생. 키보드 및 보조 기기 사용자의 접근성 향상을 위해 고대비의 커스텀 포커스 표시자 구현 필요.
Technical Solution
- InteractionSource를 통한 FocusInteraction 상태 실시간 수집 구조 설계
- Modifier.Node와 DrawModifierNode를 상속받아 렌더링 파이프라인에 직접 개입
- IndicationNodeFactory를 활용하여 InteractionSource와 FocusNode 간의 의존성 주입 및 생성 로직 캡슐화
- drawContent() 호출 후 12px 높이의 Rect를 하단에 렌더링하여 시각적 구분감 확보
- MutableInteractionSource 단일 객체를 공유하여 Row와 내부 Component 간의 상태 동기화 구현
실천 포인트
1. WCAG
2.
4.13 준수를 위해 포커스 인디케이터 두께 2px 이상, 대비비 3:1 이상 확보 여부 확인
2. 단순 Border 추가보다 복잡한 UI 요구사항 대응을 위해 Indication API 기반의 DrawModifierNode 도입 검토
3. 커스텀 컴포넌트 설계 시 InteractionSource를 상위에서 정의하고 하위 Modifier에 주입하여 일관된 인터랙션 상태 관리