FocusIndicatorWidget
Component Detail
User Interface
medium complexity
Shared Component
mobile
0
Dependencies
0
Dependents
0
Entities
0
Integrations
Description
A reusable UI widget that renders visible focus indicators on all interactive elements across the app. It enforces minimum contrast and size requirements for focus rings so keyboard and switch-access users can always track their position. The widget wraps any focusable child and applies platform-appropriate styling without requiring per-screen customisation.
focus-indicator-widget
Sources & reasoning
Lines 28 and 30 declare WCAG 2.2 AA an absolute MVP requirement with no organizational exemptions, and line 321 repeats this explicitly under Fase 1 scope. The priority matrix (line 143) marks it MUST HAVE Phase 1 for all five organizations. This is the strongest mandate in the source doc, directly placing target_release at MVP with no ambiguity.
-
docs/source/likeperson.md · line 28Appen SKAL oppfylle WCAG 2.2 nivå AA som minimumskrav for alle skjermer og interaksjoner - fra dag én, for alle organisasjoner. Ingen organisasjon er unntatt eller utsatt til senere fase.
-
docs/source/likeperson.md · line 30WCAG 2.2 AA compliance er et absolutt krav for MVP - ikke noe som fikses etterpå.
-
docs/source/likeperson.md · line 321WCAG 2.2 AA compliance fra dag én - for alle organisasjoner, uten unntak
Responsibilities
- Render a high-contrast focus ring around any wrapped interactive element when it receives focus
- Enforce minimum 3:1 contrast ratio between the focus indicator and its surrounding background
- Adapt indicator style to platform conventions (iOS VoiceOver cursor vs Android TalkBack highlight)
- Expose an override API for screens that require custom indicator shapes or offsets
- Suppress the indicator for pointer-driven interactions while preserving it for keyboard and switch access
Interfaces
wrap(child: Widget, options?: FocusIndicatorOptions): Widget
setContrastMode(mode: 'standard' | 'high'): void
getFocusState(elementId: string): FocusState