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.

Author: essjay05

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>

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');

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>

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');