From 38c4dad8743df5a864eb08462328bd09cdbd5036 Mon Sep 17 00:00:00 2001
From: Joy Serquina <serquina@google.com>
Date: Mon, 20 Oct 2025 21:59:53 +0000
Subject: [PATCH] feat(aria/toolbar): adds skip disabled toolbar example to
 dev-app

Updates component-examples to add a toolbar skip disabled example
and adds it to the dev-app for accessibility testing.
---
 src/components-examples/aria/toolbar/index.ts |  1 +
 .../toolbar-skip-disabled-example.html        | 48 +++++++++++++++++++
 .../toolbar-skip-disabled-example.ts          | 32 +++++++++++++
 src/dev-app/aria-toolbar/toolbar-demo.html    |  4 ++
 src/dev-app/aria-toolbar/toolbar-demo.ts      |  3 +-
 5 files changed, 87 insertions(+), 1 deletion(-)
 create mode 100644 src/components-examples/aria/toolbar/toolbar-skip-disabled/toolbar-skip-disabled-example.html
 create mode 100644 src/components-examples/aria/toolbar/toolbar-skip-disabled/toolbar-skip-disabled-example.ts

diff --git a/src/components-examples/aria/toolbar/index.ts b/src/components-examples/aria/toolbar/index.ts
index 96b07f6ac29c..ca0f7592339f 100644
--- a/src/components-examples/aria/toolbar/index.ts
+++ b/src/components-examples/aria/toolbar/index.ts
@@ -1,2 +1,3 @@
 export {ToolbarBasicHorizontalExample} from './toolbar-basic-horizontal/toolbar-basic-horizontal-example';
 export {ToolbarConfigurableExample} from './toolbar-configurable/toolbar-configurable-example';
+export {ToolbarSkipDisabledExample} from './toolbar-skip-disabled/toolbar-skip-disabled-example';
diff --git a/src/components-examples/aria/toolbar/toolbar-skip-disabled/toolbar-skip-disabled-example.html b/src/components-examples/aria/toolbar/toolbar-skip-disabled/toolbar-skip-disabled-example.html
new file mode 100644
index 000000000000..b67a71410005
--- /dev/null
+++ b/src/components-examples/aria/toolbar/toolbar-skip-disabled/toolbar-skip-disabled-example.html
@@ -0,0 +1,48 @@
+<div class="example-container">
+    <div ngToolbar skipDisabled="true" class="example-toolbar" aria-label="Skip Disabled Toolbar Text Formatting Tools">
+        <button
+            ngToolbarWidget
+            class="example-radio-button"
+            (click)="format('bold')"
+            (keydown.enter)="format('bold')">
+            Bold
+        </button>
+        <button
+            ngToolbarWidget
+            class="example-radio-button"
+            [disabled]="true"
+            (click)="format('italic')"
+            (keydown.enter)="format('italic')">
+            Italic
+        </button>
+        <button
+            ngToolbarWidget
+            class="example-radio-button"
+            (click)="format('underline')"
+            (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"
+              [disabled]="disabledOptions.includes(alignment.value)"
+              class="example-radio-button">
+                <span class="example-radio-indicator"></span>
+                <span>{{ alignment.label }}</span>
+            </li>
+            }
+        </ul>
+        <button
+            ngToolbarWidget
+            class="example-radio-button"
+            [disabled]="true">
+            Disabled Action
+        </button>
+    </div>
+</div>
diff --git a/src/components-examples/aria/toolbar/toolbar-skip-disabled/toolbar-skip-disabled-example.ts b/src/components-examples/aria/toolbar/toolbar-skip-disabled/toolbar-skip-disabled-example.ts
new file mode 100644
index 000000000000..827b85bc5442
--- /dev/null
+++ b/src/components-examples/aria/toolbar/toolbar-skip-disabled/toolbar-skip-disabled-example.ts
@@ -0,0 +1,32 @@
+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 Skip Disabled Toolbar Example */
+@Component({
+  selector: 'toolbar-skip-disabled-example',
+  templateUrl: 'toolbar-skip-disabled-example.html',
+  styleUrl: '../toolbar-common.css',
+  imports: [RadioButton, RadioGroup, Toolbar, ToolbarWidget],
+})
+export class ToolbarSkipDisabledExample {
+  constructor(private _liveAnnouncer: LiveAnnouncer) {}
+  alignments = [
+    {value: 'left', label: 'Left'},
+    {value: 'center', label: 'Center'},
+    {value: 'right', label: 'Right'},
+  ];
+
+  // Control for which radio options are individually disabled
+  disabledOptions: string[] = ['center'];
+
+  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.html b/src/dev-app/aria-toolbar/toolbar-demo.html
index 91333482212c..c339fb73e877 100644
--- a/src/dev-app/aria-toolbar/toolbar-demo.html
+++ b/src/dev-app/aria-toolbar/toolbar-demo.html
@@ -4,6 +4,10 @@
         <h2>Toolbar Basic Horizontal</h2>
         <toolbar-basic-horizontal-example></toolbar-basic-horizontal-example>
     </div>
+    <div class="example-toolbar-container">
+        <h2>Toolbar Skip Disabled</h2>
+        <toolbar-skip-disabled-example></toolbar-skip-disabled-example>
+    </div>
     <div class="example-configurable-radio-container example-toolbar-container">
         <h2>Configurable CDK Toolbar</h2>
         <toolbar-configurable-example></toolbar-configurable-example>
diff --git a/src/dev-app/aria-toolbar/toolbar-demo.ts b/src/dev-app/aria-toolbar/toolbar-demo.ts
index a2d3a11f3c8a..a8acb63ce1c2 100644
--- a/src/dev-app/aria-toolbar/toolbar-demo.ts
+++ b/src/dev-app/aria-toolbar/toolbar-demo.ts
@@ -10,11 +10,12 @@ import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/co
 import {
   ToolbarBasicHorizontalExample,
   ToolbarConfigurableExample,
+  ToolbarSkipDisabledExample,
 } from '@angular/components-examples/aria/toolbar';
 
 @Component({
   templateUrl: 'toolbar-demo.html',
-  imports: [ToolbarBasicHorizontalExample, ToolbarConfigurableExample],
+  imports: [ToolbarBasicHorizontalExample, ToolbarConfigurableExample, ToolbarSkipDisabledExample],
   styleUrl: './toolbar-demo.css',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,