feat(fp): WP-16 — component a11y: description wiring + alert role
Wires text-input's aria-describedby to the form-field description div (the BSN hint was rendered but never announced), pins desc-before-error ordering, and switches alert to role=alert for errors vs role=status for info/ok/warning. Composition contract enforced by story play tests (form-field+text-input, alert per variant) run in the WP-01 CI gate. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -13,7 +13,10 @@ const ICON_LABELS: Record<AlertType, string> = {
|
||||
/** Atom: alert/message banner — the CIBG Huisstijl "melding"
|
||||
(designsystem.cibg.nl/componenten/meldingen). Thin wrapper over the vendored
|
||||
`.feedback feedback-*` classes: the design system owns surface + icon; we add
|
||||
only the icon's a11y label and a content wrapper (`.feedback` is a flex row). */
|
||||
only the icon's a11y label and a content wrapper (`.feedback` is a flex row).
|
||||
Errors are `role="alert"` (assertive — interrupts) since they need immediate
|
||||
attention; other variants stay `role="status"` (polite) so success/info banners
|
||||
don't interrupt what the user is doing. */
|
||||
@Component({
|
||||
selector: 'app-alert',
|
||||
styles: [
|
||||
@@ -31,7 +34,7 @@ const ICON_LABELS: Record<AlertType, string> = {
|
||||
[class.feedback-success]="type() === 'ok'"
|
||||
[class.feedback-warning]="type() === 'warning'"
|
||||
[class.feedback-error]="type() === 'error'"
|
||||
role="status"
|
||||
[attr.role]="type() === 'error' ? 'alert' : 'status'"
|
||||
aria-atomic="true"
|
||||
>
|
||||
<span class="icon"
|
||||
|
||||
Reference in New Issue
Block a user