Production Release - Nov 28 / 2025

package.json

@@ -12,9 +12,9 @@
     "prettier": "npx prettier . --write"
   },
   "dependencies": {
-    "@abgov/react-components": "6.9.0-alpha.2",
-    "@abgov/ui-components-common": "1.9.0-alpha.1",
-    "@abgov/web-components": "1.39.0-alpha.2",
+    "@abgov/react-components": "6.9.3-next.1",
+    "@abgov/ui-components-common": "1.9.1-next.1",
+    "@abgov/web-components": "1.39.3-next.1",
     "@faker-js/faker": "^8.3.1",
     "highlight.js": "^11.8.0",
     "js-cookie": "^3.0.5",
@@ -37,7 +37,7 @@
     "eslint-plugin-react-refresh": "^0.3.5",
     "prettier": "2.4.1",
     "typescript": "^5.4.2",
-    "vite": "^5.4.19",
+    "vite": "^5.4.21",
     "lodash": "^4.17.21",
     "@types/lodash": "^4.17.16"
   }

src/App.tsx

@@ -40,6 +40,7 @@ import BugVerificationPage from "@routes/get-started/developers/BugVerification"
 import GetStartedLayout from "@routes/get-started/GetStartedLayout";
 import GetStartedOverviewPage from "@routes/get-started/GetStartedOverview";
 import QATestingOverviewPage from "@routes/get-started/qa-testing/QATestingOverview";
+import AutomatedAccessibilityPage from "@routes/get-started/AutomatedAccessibility";
 import ComponentLifecyclePage from "@routes/get-started/ComponentLifecycle";
 import ContributePage from "@routes/get-started/Contribute";
 import SupportPage from "@routes/get-started/Support";
@@ -115,6 +116,9 @@ const router = createBrowserRouter(
         <Route path="qa-testing">
           <Route index element={<QATestingOverviewPage />} />
         </Route>
+        <Route path="automated-accessibility">
+          <Route index element={<AutomatedAccessibilityPage />} />
+        </Route>
         <Route path="component-lifecycle" element={<ComponentLifecyclePage />} />
         <Route path="lts-policy">
           <Route index element={<LtsPolicyPage />} />

src/components/sandbox/AngularReactiveSerializer.ts

@@ -102,7 +102,11 @@ export class AngularReactiveSerializer extends BaseSerializer implements Seriali
     }
     const currentPrefix = "Goab";
     const oldPrefix = "goa";
-    const tail = name.replace(currentPrefix, "");
+    let tail = name.replace(currentPrefix, "");
+
+    if (tail === "TextArea" && this.version === "new") {
+      tail = "Textarea"
+    }
 
     if (this.version === "old") {
       return `${oldPrefix}-${this.dasherize(tail)}`;

src/components/sandbox/AngularSerializer.ts

@@ -94,6 +94,9 @@ export class AngularSerializer extends BaseSerializer implements Serializer {
     if (tail === "OneColumnLayout" && this.version === "new") {
       tail = "ColumnLayout";
     }
+    if (tail === "TextArea" && this.version === "new") {
+      tail = "Textarea"
+    }
     return `${this.version === "old" ? "goa" : "goab"}-${this.dasherize(tail)}`;
   }
 

src/examples/add-a-filter-chip.tsx

@@ -64,12 +64,13 @@ export const AddAFilterChip = () => {
           allowCopy={true}
           code={`
                       <div>
-                        <goa-filter-chip
-                          *ngFor="let filter of activeFilters"
-                          [content]="filter"
-                          (_click)="removeFilter(filter)"
-                          mr="s">
-                        </goa-filter-chip>
+                        @for (filter of activeFilters; track filter) {
+                          <goa-filter-chip
+                            [content]="filter"
+                            (_click)="removeFilter(filter)"
+                            mr="s">
+                          </goa-filter-chip>
+                        }
                       </div>
                       <goa-button-group alignment="center" mt="l">
                         <goa-button (click)="addFilter()">Add Random Filter</goa-button>
@@ -84,12 +85,13 @@ export const AddAFilterChip = () => {
           allowCopy={true}
           code={`
                       <div>
-                        <goab-filter-chip
-                          *ngFor="let filter of activeFilters"
-                          [content]="filter"
-                          (onClick)="removeFilter(filter)"
-                          mr="s">
-                        </goab-filter-chip>
+                        @for (filter of activeFilters; track filter) {
+                          <goab-filter-chip
+                            [content]="filter"
+                            (onClick)="removeFilter(filter)"
+                            mr="s">
+                          </goab-filter-chip>
+                        }
                       </div>
                       <goab-button-group alignment="center" mt="l">
                         <goab-button (onClick)="addFilter()">Add Random Filter</goab-button>

src/examples/add-another-item-in-a-modal.tsx

@@ -4,7 +4,7 @@ import {
   GoabContainer,
   GoabDropdown, GoabDropdownItem,
   GoabFormItem, GoabInput,
-  GoabModal, GoabTextarea
+  GoabModal, GoabTextArea
 } from "@abgov/react-components";
 import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx";
 import { useContext, useState } from "react";
@@ -66,12 +66,12 @@ export const AddAnotherItemInAModal = () => {
               name="name"></GoabInput>
           </GoabFormItem>
           <GoabFormItem label="Description" mt="xs">
-            <GoabTextarea
+            <GoabTextArea
               name="description"
               width="80%"
               rows={2}
               onChange={onChangeDescription}
-              value={description}></GoabTextarea>
+              value={description}></GoabTextArea>
           </GoabFormItem>
         </GoabModal>
       </GoabContainer>

src/examples/ask-a-long-answer-question-with-a-maximum-word-count.tsx

@@ -1,7 +1,7 @@
 import { Sandbox } from "@components/sandbox";
 import {
   GoabFormItem,
-  GoabTextarea
+  GoabTextArea
 } from "@abgov/react-components";
 
 export const AskALongAnswerQuestionWithAMaximumWordCount = () => {
@@ -13,7 +13,7 @@ export const AskALongAnswerQuestionWithAMaximumWordCount = () => {
       <GoabFormItem
         label="Provide more detail"
         helpText="Do not include personal or financial information, like your National Insurance number or credit card details.">
-        <GoabTextarea name="program" onChange={noop} width="100%" rows={6} maxCount={500} countBy={"word"} />
+        <GoabTextArea name="program" onChange={noop} width="100%" rows={6} maxCount={500} countBy={"word"} />
       </GoabFormItem>
 
     </Sandbox>

src/examples/compact-buttons-in-a-table.tsx

@@ -359,18 +359,20 @@ export const CompactButtonsInATable = () => {
                   </tr>
                 </thead>
                 <tbody>
-                  <tr *ngFor="let user of pageUsers; index as i">
-                    <td>{{ user.firstName }}</td>
-                    <td>{{ user.lastName }}</td>
-                    <td class="goa-table-number-column">12345667</td>
-                    <td>
-                    <goa-button-group alignment="center">
-                      <goa-button type="tertiary" size="compact" (_click)="onClick($event)">
-                        View
-                      </goa-button>
-                    </goa-button-group>
-                  </td>
-                  </tr>
+                  @for (user of pageUsers; track $index) {
+                    <tr>
+                      <td>{{ user.firstName }}</td>
+                      <td>{{ user.lastName }}</td>
+                      <td class="goa-table-number-column">12345667</td>
+                      <td>
+                      <goa-button-group alignment="center">
+                        <goa-button type="tertiary" size="compact" (_click)="onClick($event)">
+                          View
+                        </goa-button>
+                      </goa-button-group>
+                    </td>
+                    </tr>
+                  }
                 </tbody>
               </goa-table>
 
@@ -400,18 +402,20 @@ export const CompactButtonsInATable = () => {
                   </tr>
                 </thead>
                 <tbody>
-                  <tr *ngFor="let user of pageUsers; index as i">
-                    <td>{{ user.firstName }}</td>
-                    <td>{{ user.lastName }}</td>
-                    <td class="goa-table-number-column">12345667</td>
-                    <td>
-                    <goab-button-group alignment="center">
-                      <goab-button type="tertiary" size="compact" (onClick)="onClick()">
-                        View
-                      </goab-button>
-                    </goab-button-group>
-                  </td>
-                  </tr>
+                  @for (user of pageUsers; track $index) {
+                    <tr>
+                      <td>{{ user.firstName }}</td>
+                      <td>{{ user.lastName }}</td>
+                      <td class="goa-table-number-column">12345667</td>
+                      <td>
+                      <goab-button-group alignment="center">
+                        <goab-button type="tertiary" size="compact" (onClick)="onClick()">
+                          View
+                        </goab-button>
+                      </goab-button-group>
+                    </td>
+                    </tr>
+                  }
                 </tbody>
               </goab-table>