feature(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.

Author: essjay05

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",

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"

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

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%;
+}

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>