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:
@@ -1,4 +1,4 @@
|
||||
import { Component, forwardRef, input } from '@angular/core';
|
||||
import { Component, booleanAttribute, forwardRef, input } from '@angular/core';
|
||||
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
|
||||
|
||||
/** Atom: text input. Utrecht textbox wired up as a form control (ngModel/reactive). */
|
||||
@@ -22,7 +22,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
|
||||
[type]="type()"
|
||||
[id]="inputId()"
|
||||
[attr.aria-invalid]="invalid() ? 'true' : null"
|
||||
[attr.aria-describedby]="invalid() && inputId() ? inputId() + '-error' : null"
|
||||
[attr.aria-describedby]="describedBy()"
|
||||
[placeholder]="placeholder()"
|
||||
[disabled]="disabled"
|
||||
[value]="value"
|
||||
@@ -39,12 +39,24 @@ export class TextInputComponent implements ControlValueAccessor {
|
||||
placeholder = input('');
|
||||
invalid = input(false);
|
||||
inputId = input<string>();
|
||||
/** Set when the paired form-field renders a `-desc` hint, so it gets announced. */
|
||||
hasDescription = input(false, { transform: booleanAttribute });
|
||||
|
||||
value = '';
|
||||
disabled = false;
|
||||
onChange: (v: string) => void = () => {};
|
||||
onTouched: () => void = () => {};
|
||||
|
||||
describedBy(): string | null {
|
||||
const id = this.inputId();
|
||||
if (!id) return null;
|
||||
const ids = [
|
||||
...(this.hasDescription() ? [`${id}-desc`] : []),
|
||||
...(this.invalid() ? [`${id}-error`] : []),
|
||||
];
|
||||
return ids.length ? ids.join(' ') : null;
|
||||
}
|
||||
|
||||
onInput(e: Event) {
|
||||
this.value = (e.target as HTMLInputElement).value;
|
||||
this.onChange(this.value);
|
||||
|
||||
Reference in New Issue
Block a user