From 845a13655a709a4d3610b44e9b0dbedf1e11bf3f Mon Sep 17 00:00:00 2001
From: Joy Serquina <serquina@google.com>
Date: Fri, 17 Oct 2025 22:39:34 +0000
Subject: [PATCH 1/4] feat(aria/toolbar): adds toolbar-basic-horizontal-example
 to dev-app

Adds toolbar-basic-horizontal-example to components-examples for
aria and implements it onto the dev-app aria-toolbar toolbar-demo.html
page.
---
 src/components-examples/aria/toolbar/index.ts |  1 +
 .../toolbar-basic-horizontal-example.html     | 31 +++++++++++++++++++
 .../toolbar-basic-horizontal-example.ts       | 15 +++++++++
 src/dev-app/aria-toolbar/toolbar-demo.html    |  6 +++-
 src/dev-app/aria-toolbar/toolbar-demo.ts      |  3 +-
 5 files changed, 54 insertions(+), 2 deletions(-)
 create mode 100644 src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.html
 create mode 100644 src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.ts

diff --git a/src/components-examples/aria/toolbar/index.ts b/src/components-examples/aria/toolbar/index.ts
index 24091f68e8bd..96b07f6ac29c 100644
--- a/src/components-examples/aria/toolbar/index.ts
+++ b/src/components-examples/aria/toolbar/index.ts
@@ -1 +1,2 @@
+export {ToolbarBasicHorizontalExample} from './toolbar-basic-horizontal/toolbar-basic-horizontal-example';
 export {ToolbarConfigurableExample} from './toolbar-configurable/toolbar-configurable-example';
diff --git a/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.html b/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.html
new file mode 100644
index 000000000000..c13f59804720
--- /dev/null
+++ b/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.html
@@ -0,0 +1,31 @@
+<div class="example-container">
+    <div ngToolbar class="example-toolbar" aria-label="Text Formatting Tools">
+        <button
+            ngToolbarWidget
+            class="example-radio-button"
+            (click)="format('bold')"
+            (keydown.enter)="format('bold')">
+            Bold
+        </button>
+        <button
+            ngToolbarWidget
+            class="example-radio-button"
+            (click)="format('italic')"
+            (keydown.enter)="format('italic')">
+            Italic
+        </button>
+        <button
+            ngToolbarWidget
+            class="example-radio-button"
+            (click)="format('underline')"
+            (keydown.enter)="format('underline')">
+            Underline
+        </button>
+        <button
+            ngToolbarWidget
+            class="example-radio-button"
+            [disabled]="true">
+            Disabled Action
+        </button>
+    </div>
+</div>
diff --git a/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.ts b/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.ts
new file mode 100644
index 000000000000..4a1f9d488399
--- /dev/null
+++ b/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.ts
@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+import {Toolbar, ToolbarWidget} from '@angular/aria/toolbar';
+
+/** @title Basic Horizontal Toolbar Example */
+@Component({
+  selector: 'toolbar-basic-horizontal-example',
+  templateUrl: 'toolbar-basic-horizontal-example.html',
+  styleUrl: '../toolbar-common.css',
+  imports: [Toolbar, ToolbarWidget],
+})
+export class ToolbarBasicHorizontalExample {
+  format(tool: string) {
+    console.log(`Tool activated: ${tool}`);
+  }
+}
diff --git a/src/dev-app/aria-toolbar/toolbar-demo.html b/src/dev-app/aria-toolbar/toolbar-demo.html
index 46fc505f461a..3777d1d97da2 100644
--- a/src/dev-app/aria-toolbar/toolbar-demo.html
+++ b/src/dev-app/aria-toolbar/toolbar-demo.html
@@ -1,7 +1,11 @@
 <div>
   <div class="example-radio-grid">
+    <div class="example-toolbar-container">
+        <h2>Toolbar Basic Horizontal</h2>
+        <toolbar-basic-horizontal-example></toolbar-basic-horizontal-example>
+    </div>
     <div class="example-configurable-radio-container">
-        <h4>Configurable CDK Toolbar</h4>
+        <h2>Configurable CDK Toolbar</h2>
         <toolbar-configurable-example></toolbar-configurable-example>
     </div>
   </div>
diff --git a/src/dev-app/aria-toolbar/toolbar-demo.ts b/src/dev-app/aria-toolbar/toolbar-demo.ts
index 1c26818b393d..7490ba24bfea 100644
--- a/src/dev-app/aria-toolbar/toolbar-demo.ts
+++ b/src/dev-app/aria-toolbar/toolbar-demo.ts
@@ -7,11 +7,12 @@
  */
 
 import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+import {ToolbarBasicHorizontalExample} from '@angular/components-examples/aria/toolbar';
 import {ToolbarConfigurableExample} from '@angular/components-examples/aria/toolbar';
 
 @Component({
   templateUrl: 'toolbar-demo.html',
-  imports: [ToolbarConfigurableExample],
+  imports: [ToolbarBasicHorizontalExample, ToolbarConfigurableExample],
   styleUrl: './toolbar-demo.css',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,

From a4d6c2a896e248ce17ef7ee16887a7620a8d4c7d Mon Sep 17 00:00:00 2001
From: Joy Serquina <serquina@google.com>
Date: Fri, 17 Oct 2025 23:26:40 +0000
Subject: [PATCH 2/4] refactor(aria/toolbar): consolidate imports in dev-app

Updates toolbar-demo.ts to consolidate the imports from
components-examples for toolbar.
---
 src/dev-app/aria-toolbar/toolbar-demo.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/dev-app/aria-toolbar/toolbar-demo.ts b/src/dev-app/aria-toolbar/toolbar-demo.ts
index 7490ba24bfea..a2d3a11f3c8a 100644
--- a/src/dev-app/aria-toolbar/toolbar-demo.ts
+++ b/src/dev-app/aria-toolbar/toolbar-demo.ts
@@ -7,8 +7,10 @@
  */
 
 import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
-import {ToolbarBasicHorizontalExample} from '@angular/components-examples/aria/toolbar';
-import {ToolbarConfigurableExample} from '@angular/components-examples/aria/toolbar';
+import {
+  ToolbarBasicHorizontalExample,
+  ToolbarConfigurableExample,
+} from '@angular/components-examples/aria/toolbar';
 
 @Component({
   templateUrl: 'toolbar-demo.html',

From 5bbbd7038378edcc46012d265b680bb63fc91fa7 Mon Sep 17 00:00:00 2001
From: Joy Serquina <serquina@google.com>
Date: Sat, 18 Oct 2025 02:28:13 +0000
Subject: [PATCH 3/4] feat(aria/toolbar): implement radiogroup in toolbar basic
 example

Adds radiogroup UI into the toolbar basic horizontal example. Also
attempts to improve accessibility by adding LiveAnnouncer on button
activation.
---
 src/components-examples/aria/toolbar/BUILD.bazel  |  1 +
 .../toolbar-basic-horizontal-example.html         | 12 ++++++++++++
 .../toolbar-basic-horizontal-example.ts           | 15 ++++++++++++++-
 src/dev-app/aria-toolbar/toolbar-demo.css         |  6 +++++-
 src/dev-app/aria-toolbar/toolbar-demo.html        |  2 +-
 5 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/components-examples/aria/toolbar/BUILD.bazel b/src/components-examples/aria/toolbar/BUILD.bazel
index a8bdcbc956b1..aac5f1eb7eed 100644
--- a/src/components-examples/aria/toolbar/BUILD.bazel
+++ b/src/components-examples/aria/toolbar/BUILD.bazel
@@ -14,6 +14,7 @@ ng_project(
         "//:node_modules/@angular/forms",
         "//src/aria/radio-group",
         "//src/aria/toolbar",
+        "//src/cdk/a11y",
         "//src/material/checkbox",
         "//src/material/form-field",
         "//src/material/select",
diff --git a/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.html b/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.html
index c13f59804720..454d7ffd4f5f 100644
--- a/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.html
+++ b/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.html
@@ -21,6 +21,18 @@
             (keydown.enter)="format('underline')">
             Underline
         </button>
+        <ul
+            ngRadioGroup
+            class="example-radio-group"
+            aria-label="Select text alignment"
+        >
+            @for (alignment of alignments; track alignment) {
+            <li ngRadioButton [value]="alignment.value" class="example-radio-button">
+                <span class="example-radio-indicator"></span>
+                <span>{{ alignment.label }}</span>
+            </li>
+            }
+        </ul>
         <button
             ngToolbarWidget
             class="example-radio-button"
diff --git a/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.ts b/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.ts
index 4a1f9d488399..24b6f47d78e9 100644
--- a/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.ts
+++ b/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.ts
@@ -1,15 +1,28 @@
 import {Component} from '@angular/core';
 import {Toolbar, ToolbarWidget} from '@angular/aria/toolbar';
+import {RadioGroup, RadioButton} from '@angular/aria/radio-group';
+import {LiveAnnouncer} from '@angular/cdk/a11y';
 
 /** @title Basic Horizontal Toolbar Example */
 @Component({
   selector: 'toolbar-basic-horizontal-example',
   templateUrl: 'toolbar-basic-horizontal-example.html',
   styleUrl: '../toolbar-common.css',
-  imports: [Toolbar, ToolbarWidget],
+  imports: [RadioButton, RadioGroup, Toolbar, ToolbarWidget],
 })
 export class ToolbarBasicHorizontalExample {
+  constructor(private liveAnnouncer: LiveAnnouncer) {}
+  alignments = [
+    {value: 'left', label: 'Left'},
+    {value: 'center', label: 'Center'},
+    {value: 'right', label: 'Right'},
+  ];
   format(tool: string) {
     console.log(`Tool activated: ${tool}`);
+    this.liveAnnouncer.announce(`${tool} applied`, 'polite');
+  }
+  test(action: string) {
+    console.log(`Action triggered: ${action}`);
+    this.liveAnnouncer.announce(`${action} button activated`, 'polite');
   }
 }
diff --git a/src/dev-app/aria-toolbar/toolbar-demo.css b/src/dev-app/aria-toolbar/toolbar-demo.css
index 20307209d88a..7164c58accca 100644
--- a/src/dev-app/aria-toolbar/toolbar-demo.css
+++ b/src/dev-app/aria-toolbar/toolbar-demo.css
@@ -1,6 +1,6 @@
 .example-radio-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
   gap: 20px;
 }
 
@@ -18,3 +18,7 @@
 h4 {
   height: 36px;
 }
+
+.example-toolbar-container {
+  width: 100%;
+}
diff --git a/src/dev-app/aria-toolbar/toolbar-demo.html b/src/dev-app/aria-toolbar/toolbar-demo.html
index 3777d1d97da2..91333482212c 100644
--- a/src/dev-app/aria-toolbar/toolbar-demo.html
+++ b/src/dev-app/aria-toolbar/toolbar-demo.html
@@ -4,7 +4,7 @@
         <h2>Toolbar Basic Horizontal</h2>
         <toolbar-basic-horizontal-example></toolbar-basic-horizontal-example>
     </div>
-    <div class="example-configurable-radio-container">
+    <div class="example-configurable-radio-container example-toolbar-container">
         <h2>Configurable CDK Toolbar</h2>
         <toolbar-configurable-example></toolbar-configurable-example>
     </div>

From 98e7e75903971a0d99900feea8319a5419278793 Mon Sep 17 00:00:00 2001
From: Joy Serquina <serquina@google.com>
Date: Mon, 20 Oct 2025 18:45:32 +0000
Subject: [PATCH 4/4] refactor(aria/toolbar): fix lint error

Updates to fix naming convention lint error.
---
 .../toolbar-basic-horizontal-example.ts                     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.ts b/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.ts
index 24b6f47d78e9..45af7aac691d 100644
--- a/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.ts
+++ b/src/components-examples/aria/toolbar/toolbar-basic-horizontal/toolbar-basic-horizontal-example.ts
@@ -11,7 +11,7 @@ import {LiveAnnouncer} from '@angular/cdk/a11y';
   imports: [RadioButton, RadioGroup, Toolbar, ToolbarWidget],
 })
 export class ToolbarBasicHorizontalExample {
-  constructor(private liveAnnouncer: LiveAnnouncer) {}
+  constructor(private _liveAnnouncer: LiveAnnouncer) {}
   alignments = [
     {value: 'left', label: 'Left'},
     {value: 'center', label: 'Center'},
@@ -19,10 +19,10 @@ export class ToolbarBasicHorizontalExample {
   ];
   format(tool: string) {
     console.log(`Tool activated: ${tool}`);
-    this.liveAnnouncer.announce(`${tool} applied`, 'polite');
+    this._liveAnnouncer.announce(`${tool} applied`, 'polite');
   }
   test(action: string) {
     console.log(`Action triggered: ${action}`);
-    this.liveAnnouncer.announce(`${action} button activated`, 'polite');
+    this._liveAnnouncer.announce(`${action} button activated`, 'polite');
   }
 }