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>

src/app/shared/ui/alert/alert.component.ts

@@ -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"

src/app/shared/ui/alert/alert.stories.ts

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/angular';
+import { expect, within } from 'storybook/test';
 import { AlertComponent } from './alert.component';
 
 const meta: Meta<AlertComponent> = {
@@ -12,7 +13,28 @@ const meta: Meta<AlertComponent> = {
 export default meta;
 type Story = StoryObj<AlertComponent>;
 
-export const Info: Story = { args: { type: 'info' } };
-export const Ok: Story = { args: { type: 'ok' } };
-export const Warning: Story = { args: { type: 'warning' } };
-export const Error: Story = { args: { type: 'error' } };
+// role assertions guard the polite/assertive split (WP-16): errors interrupt, others don't.
+export const Info: Story = {
+  args: { type: 'info' },
+  play: async ({ canvasElement }) => {
+    await expect(within(canvasElement).getByRole('status')).toBeInTheDocument();
+  },
+};
+export const Ok: Story = {
+  args: { type: 'ok' },
+  play: async ({ canvasElement }) => {
+    await expect(within(canvasElement).getByRole('status')).toBeInTheDocument();
+  },
+};
+export const Warning: Story = {
+  args: { type: 'warning' },
+  play: async ({ canvasElement }) => {
+    await expect(within(canvasElement).getByRole('status')).toBeInTheDocument();
+  },
+};
+export const Error: Story = {
+  args: { type: 'error' },
+  play: async ({ canvasElement }) => {
+    await expect(within(canvasElement).getByRole('alert')).toBeInTheDocument();
+  },
+};