From 57b0e3a2f240b117ddf67bd62900664c7d021999 Mon Sep 17 00:00:00 2001
From: sp90 <dev@nomis.dk>
Date: Wed, 26 Aug 2026 00:26:47 +0200
Subject: [PATCH] docs: screenreader example uses ship components and signal
 forms

---
 .../basic-screenreader.html                   | 28 +++++++++----------
 .../basic-screenreader.scss                   | 15 ++--------
 .../basic-screenreader/basic-screenreader.ts  | 22 +++++++++++++--
 3 files changed, 36 insertions(+), 29 deletions(-)

diff --git a/projects/design-system/src/app/ship/screenreaders/examples/basic-screenreader/basic-screenreader.html b/projects/design-system/src/app/ship/screenreaders/examples/basic-screenreader/basic-screenreader.html
index e0369650..3785514b 100644
--- a/projects/design-system/src/app/ship/screenreaders/examples/basic-screenreader/basic-screenreader.html
+++ b/projects/design-system/src/app/ship/screenreaders/examples/basic-screenreader/basic-screenreader.html
@@ -3,23 +3,23 @@
 <h4>Try it: tab through the controls below</h4>
 
 <div class="playground">
-  <button type="button" [attr.aria-expanded]="expanded()" (click)="toggle()">Settings</button>
+  <button shButton class="primary raised" [attr.aria-expanded]="expanded()" (click)="toggle()">Settings</button>
 
-  <label>
-    <input type="checkbox" checked />
+  <sh-checkbox class="primary">
+    <input type="checkbox" [formField]="termsForm" />
     Accept terms
-  </label>
+  </sh-checkbox>
 
-  <label>
-    Email
-    <input type="email" required aria-invalid="true" value="foo" />
-  </label>
+  <sh-form-field>
+    <label>Email</label>
+    <input type="email" [formField]="emailForm" [attr.aria-required]="true" [attr.aria-invalid]="emailInvalid()" />
+  </sh-form-field>
 
-  <div role="listbox" aria-label="Fruit">
-    <div role="option" aria-selected="false" tabindex="0">Pears</div>
-    <div role="option" aria-selected="true" tabindex="0">Apples</div>
-    <div role="option" aria-selected="false" tabindex="0">Plums</div>
-  </div>
+  <sh-list class="primary" listRole="listbox" label="Fruit" [(value)]="fruit">
+    <button value="pears">Pears</button>
+    <button value="apples">Apples</button>
+    <button value="plums">Plums</button>
+  </sh-list>
 
-  <button type="button" (click)="save()">Save draft (live region)</button>
+  <button shButton class="primary" (click)="save()">Save draft (live region)</button>
 </div>
diff --git a/projects/design-system/src/app/ship/screenreaders/examples/basic-screenreader/basic-screenreader.scss b/projects/design-system/src/app/ship/screenreaders/examples/basic-screenreader/basic-screenreader.scss
index 6e21f93d..2ad0fc1e 100644
--- a/projects/design-system/src/app/ship/screenreaders/examples/basic-screenreader/basic-screenreader.scss
+++ b/projects/design-system/src/app/ship/screenreaders/examples/basic-screenreader/basic-screenreader.scss
@@ -8,19 +8,8 @@
   align-items: flex-start;
   gap: 0.75rem;
 
-  [role='listbox'] {
-    display: flex;
+  sh-list {
+    flex-direction: row;
     gap: 0.5rem;
-
-    [role='option'] {
-      padding: 0.25rem 0.75rem;
-      border: 1px solid var(--base-5);
-      border-radius: var(--shape-1);
-      cursor: pointer;
-
-      &[aria-selected='true'] {
-        background: var(--base-3);
-      }
-    }
   }
 }
diff --git a/projects/design-system/src/app/ship/screenreaders/examples/basic-screenreader/basic-screenreader.ts b/projects/design-system/src/app/ship/screenreaders/examples/basic-screenreader/basic-screenreader.ts
index c329c4ea..f25610c5 100644
--- a/projects/design-system/src/app/ship/screenreaders/examples/basic-screenreader/basic-screenreader.ts
+++ b/projects/design-system/src/app/ship/screenreaders/examples/basic-screenreader/basic-screenreader.ts
@@ -1,11 +1,16 @@
-import { Component, inject, signal } from '@angular/core';
+import { Component, computed, inject, signal } from '@angular/core';
+import { form, FormField, required } from '@angular/forms/signals';
 import { ShipScreenreader } from '@ship-ui/core/ship-screenreader';
 import { ShipA11yAnnouncerService } from '@ship-ui/core/ship-a11y-announcer';
+import { ShipButton } from '@ship-ui/core/ship-button';
+import { ShipCheckbox } from '@ship-ui/core/ship-checkbox';
+import { ShipFormField } from '@ship-ui/core/ship-form-field';
+import { ShipList } from '@ship-ui/core/ship-list';
 
 @Component({
   selector: 'basic-screenreader-example',
   standalone: true,
-  imports: [ShipScreenreader],
+  imports: [ShipScreenreader, ShipButton, ShipCheckbox, ShipFormField, ShipList, FormField],
   templateUrl: './basic-screenreader.html',
   styleUrl: './basic-screenreader.scss',
 })
@@ -15,6 +20,19 @@ export class BasicScreenreader {
   expanded = signal(false);
   saved = signal(0);
 
+  // Signal forms drive the checkbox and email field; the simulator announces
+  // the states these produce (checked, required, invalid …).
+  terms = signal(true);
+  termsForm = form(this.terms);
+
+  email = signal('foo');
+  emailForm = form(this.email, (path) => {
+    required(path);
+  });
+  emailInvalid = computed(() => !this.email().includes('@'));
+
+  fruit = signal('apples');
+
   toggle() {
     this.expanded.update((value) => !value);
   }