Sensitive Field Wrapper
Component Detail
User Interface
medium complexity
mobile
0
Dependencies
0
Dependents
2
Entities
0
Integrations
Description
A UI primitive that wraps sensitive form fields and display elements to intercept screen reader output. It renders a visual indicator that the field contains protected content and requires user confirmation before the underlying value is announced.
sensitive-field-wrapper
Sources & reasoning
Explicitly called out in §1.2 (line 24) as an NHF-flagged requirement under the universal-design MUST HAVE umbrella. It is bundled with the Phase 1 WCAG accessibility scope and depends on the WCAG primitives to wrap fields uniformly.
-
docs/source/likeperson.md · line 24Varsling ved opplesning av sensitive felt (NHF).
-
docs/source/likeperson.md · line 18Skjermleser-støtte (VoiceOver/JAWS): Alle interaktive elementer skal ha semantiske labels og ARIA-attributter. Særlig kritisk for Blindeforbundet, men relevant for alle.
Responsibilities
- Wrap child sensitive content and mask its accessibility label by default
- Render a visual indicator showing the field is protected
- Capture explicit user gesture or confirmation to unlock readout
- Restore masked state automatically after readout or timeout
- Forward unmasked content to screen reader once unlocked
Interfaces
render(props: { sensitivityLevel, children }): ReactNode
requestUnlock(fieldId): Promise<boolean>
resetMask(fieldId): void
Related Data Entities (2)
Data entities managed by this component