🏠 Overview › 🧩 Components ›🧩 SensitiveFieldWarningWidget

SensitiveFieldWarningWidget

Component Detail

User Interface medium complexity frontend
0
Dependencies
0
Dependents
0
Entities
0
Integrations

Description

A wrapper widget that monitors focus events on designated sensitive form fields and displays a visible privacy warning overlay before screen reader vocalization occurs. It intercepts accessibility focus to give the user time to reposition or mute audio before sensitive data is read aloud. The widget integrates with SensitiveFieldService to determine which fields require protection.

Feature: Sensitive Field Readout Warning

sensitive-field-warning-widget

Sources & reasoning

Line 37 names this requirement explicitly within the WCAG 2.2 AA accessibility section, attributed to NHF. That section (lines 26-38) is universally scoped to Fase 1 / MVP per lines 28 and 321. The sensitivity of assignment and contact data across all organizations - and the specific screen-reader user base in Blindeforbundet and NHF - makes this a high-priority privacy control warranting must_have at MVP.

  • docs/source/likeperson.md · line 37
    Varsling ved opplesning av sensitive felt (NHF).

Responsibilities

  • Detect focus events on wrapped sensitive form fields
  • Display a visible warning overlay or banner before the field value is vocalized
  • Provide dismiss or continue actions so the user can confirm readout or cancel
  • Announce the warning itself via ARIA live region before the field content is exposed
  • Coordinate with SensitiveFieldService to check if the wrapped field is registered as sensitive

Interfaces

wrap(fieldElement: HTMLElement): void
showWarning(fieldId: string): Promise<UserDecision>
dismissWarning(): void
onFocusEnter(event: FocusEvent): void