From 1cb6f0f0f68a0ff68adad72e348e0a163542249e Mon Sep 17 00:00:00 2001
From: Joy Serquina <serquina@google.com>
Date: Tue, 21 Oct 2025 19:28:23 +0000
Subject: [PATCH] feat(aria/toolbar): adds disabled radio options to toolbar
 basic examples

Updates toolbar basic horizontal example and toolbar basic
vertical example to both have a disabled radio option for
accessibility testing.
---
 .../toolbar-basic-horizontal-example.html                   | 6 +++++-
 .../toolbar-basic-horizontal-example.ts                     | 5 +++++
 .../toolbar-basic-vertical-example.html                     | 6 +++++-
 .../toolbar-basic-vertical-example.ts                       | 5 +++++
 4 files changed, 20 insertions(+), 2 deletions(-)

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 caa014e61494..f24a48719b9b 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
@@ -27,7 +27,11 @@
             aria-label="Select text alignment"
         >
             @for (alignment of alignments; track alignment) {
-            <li ngRadioButton [value]="alignment.value" class="example-radio-button">
+            <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>
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 45af7aac691d..4ed91715998c 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
@@ -17,10 +17,15 @@ export class ToolbarBasicHorizontalExample {
     {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/components-examples/aria/toolbar/toolbar-basic-vertical/toolbar-basic-vertical-example.html b/src/components-examples/aria/toolbar/toolbar-basic-vertical/toolbar-basic-vertical-example.html
index eec277e9de26..25c7ec93dbb6 100644
--- a/src/components-examples/aria/toolbar/toolbar-basic-vertical/toolbar-basic-vertical-example.html
+++ b/src/components-examples/aria/toolbar/toolbar-basic-vertical/toolbar-basic-vertical-example.html
@@ -27,7 +27,11 @@
             aria-label="Select text alignment"
         >
             @for (alignment of alignments; track alignment) {
-            <li ngRadioButton [value]="alignment.value" class="example-radio-button">
+            <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>
diff --git a/src/components-examples/aria/toolbar/toolbar-basic-vertical/toolbar-basic-vertical-example.ts b/src/components-examples/aria/toolbar/toolbar-basic-vertical/toolbar-basic-vertical-example.ts
index fec7482882d1..6620cdf3cdb8 100644
--- a/src/components-examples/aria/toolbar/toolbar-basic-vertical/toolbar-basic-vertical-example.ts
+++ b/src/components-examples/aria/toolbar/toolbar-basic-vertical/toolbar-basic-vertical-example.ts
@@ -17,10 +17,15 @@ export class ToolbarBasicVerticalExample {
     {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');