feat(cdk-experimental/radio): add radio demo to dev-app (#31180)

* feat(cdk-experimental/radio): add radio demo to dev-app

* fixup! feat(cdk-experimental/radio): add radio demo to dev-app

* fixup! feat(cdk-experimental/radio): add radio demo to dev-app

* fixup! feat(cdk-experimental/radio): add radio demo to dev-app

* fixup! feat(cdk-experimental/radio): add radio demo to dev-app

---------

Co-authored-by: Miles Malerba <[email protected]>

Author: wagnermaciel

src/cdk-experimental/radio/radio.spec.ts

@@ -508,6 +508,14 @@ describe('CdkRadioGroup', () => {
       setupRadioGroup({options: []});
       expect(radioButtons.length).toBe(0);
     });
+
+    describe('bad accessibility violations', () => {
+      it('should report when the selected radio button is disabled and skipDisabled is true', () => {
+        spyOn(console, 'error');
+        setupRadioGroup({value: 1, skipDisabled: true, disabledOptions: [1]});
+        expect(console.error).toHaveBeenCalled();
+      });
+    });
   });
 });
 

src/cdk-experimental/radio/radio.ts

@@ -137,6 +137,15 @@ export class CdkRadioGroup<V> {
   private _hasFocused = signal(false);
 
   constructor() {
+    afterRenderEffect(() => {
+      if (typeof ngDevMode === 'undefined' || ngDevMode) {
+        const violations = this.pattern.validate();
+        for (const violation of violations) {
+          console.error(violation);
+        }
+      }
+    });
+
     afterRenderEffect(() => {
       if (!this._hasFocused()) {
         this.pattern.setDefaultState();

src/cdk-experimental/ui-patterns/behaviors/list-selection/list-selection.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {signal} from '@angular/core';
+import {computed, signal} from '@angular/core';
 import {SignalLike, WritableSignalLike} from '../signal-like/signal-like';
 import {ListFocus, ListFocusInputs, ListFocusItem} from '../list-focus/list-focus';
 
@@ -36,6 +36,11 @@ export class ListSelection<T extends ListSelectionItem<V>, V> {
   /** The end index to use for range selection. */
   rangeEndIndex = signal<number>(0);
 
+  /** The currently selected items. */
+  selectedItems = computed(() =>
+    this.inputs.items().filter(item => this.inputs.value().includes(item.value())),
+  );
+
   constructor(readonly inputs: ListSelectionInputs<T, V> & {focusManager: ListFocus<T>}) {}
 
   /** Selects the item at the current active index. */

src/cdk-experimental/ui-patterns/radio/radio-group.ts

@@ -48,8 +48,11 @@ export class RadioGroupPattern<V> {
   /** Whether the radio group is disabled. */
   disabled = computed(() => this.inputs.disabled() || this.focusManager.isListDisabled());
 
+  /** The currently selected radio button. */
+  selectedItem = computed(() => this.selection.selectedItems()[0]);
+
   /** Whether the radio group is readonly. */
-  readonly: SignalLike<boolean>;
+  readonly = computed(() => this.selectedItem()?.disabled() || this.inputs.readonly());
 
   /** The tabindex of the radio group (if using activedescendant). */
   tabindex = computed(() => this.focusManager.getListTabindex());
@@ -111,7 +114,6 @@ export class RadioGroupPattern<V> {
   });
 
   constructor(readonly inputs: RadioGroupInputs<V>) {
-    this.readonly = inputs.readonly;
     this.orientation = inputs.orientation;
 
     this.focusManager = new ListFocus(inputs);
@@ -194,6 +196,19 @@ export class RadioGroupPattern<V> {
     }
   }
 
+  /** Validates the state of the radio group and returns a list of accessibility violations. */
+  validate(): string[] {
+    const violations: string[] = [];
+
+    if (this.selectedItem()?.disabled() && this.inputs.skipDisabled()) {
+      violations.push(
+        "Accessibility Violation: The selected radio button is disabled while 'skipDisabled' is true, making the selection unreachable via keyboard.",
+      );
+    }
+
+    return violations;
+  }
+
   /** Safely performs a navigation operation and updates selection if needed. */
   private _navigate(opts: SelectOptions = {}, operation: () => boolean) {
     const moved = operation();

src/cdk-experimental/ui-patterns/radio/radio.spec.ts

@@ -298,4 +298,16 @@ describe('RadioGroup Pattern', () => {
       expect(radioGroup.inputs.activeIndex()).toBe(0); // Defaults to first focusable
     });
   });
+
+  describe('validate', () => {
+    it('should report a violation if the selected item is disabled and skipDisabled is true', () => {
+      const {radioGroup, radioButtons} = getDefaultPatterns({
+        value: signal(['Banana']),
+        skipDisabled: signal(true),
+      });
+      radioButtons[1].disabled.set(true); // Disable the selected item.
+      const violations = radioGroup.validate();
+      expect(violations.length).toBe(1);
+    });
+  });
 });

src/components-examples/cdk-experimental/radio/BUILD.bazel

@@ -0,0 +1,29 @@
+load("//tools:defaults.bzl", "ng_project")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_project(
+    name = "radio",
+    srcs = glob(["**/*.ts"]),
+    assets = glob([
+        "**/*.html",
+        "**/*.css",
+    ]),
+    deps = [
+        "//:node_modules/@angular/core",
+        "//:node_modules/@angular/forms",
+        "//src/cdk-experimental/radio",
+        "//src/material/checkbox",
+        "//src/material/form-field",
+        "//src/material/select",
+    ],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob([
+        "**/*.html",
+        "**/*.css",
+        "**/*.ts",
+    ]),
+)

src/components-examples/cdk-experimental/radio/cdk-radio/cdk-radio-example.css

@@ -0,0 +1,106 @@
+.example-radio-controls {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding-bottom: 16px;
+}
+
+.example-radio-group {
+  gap: 4px;
+  margin: 0;
+  padding: 8px;
+  max-height: 50vh;
+  border: 1px solid var(--mat-sys-outline);
+  border-radius: var(--mat-sys-corner-extra-small);
+  display: flex;
+  list-style: none;
+  flex-direction: column;
+  overflow: scroll;
+  user-select: none;
+}
+
+.example-radio-group[aria-orientation='horizontal'] {
+  flex-direction: row;
+}
+
+.example-radio-group[aria-disabled='true'] {
+  background-color: var(--mat-sys-surface-dim);
+  pointer-events: none;
+}
+
+.example-radio-button {
+  gap: 16px;
+  padding: 16px;
+  display: flex;
+  cursor: pointer;
+  position: relative;
+  align-items: center;
+  border-radius: var(--mat-sys-corner-extra-small);
+}
+
+/* Basic visual indicator for the radio button */
+.example-radio-indicator {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid var(--mat-sys-outline);
+  display: inline-block;
+  position: relative;
+}
+
+.example-radio-button[aria-checked='true'] .example-radio-indicator {
+  border-color: var(--mat-sys-primary);
+}
+
+.example-radio-button[aria-checked='true'] .example-radio-indicator::after {
+  content: '';
+  display: block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--mat-sys-primary);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.example-radio-button[aria-disabled='true'][aria-checked='true'] .example-radio-indicator::after {
+  background-color: var(--mat-sys-outline);
+}
+
+.example-radio-button.cdk-active,
+.example-radio-button[aria-disabled='false']:hover {
+  outline: 1px solid var(--mat-sys-outline);
+  background: var(--mat-sys-surface-container);
+}
+
+.example-radio-button[aria-disabled='false']:focus-within {
+  outline: 2px solid var(--mat-sys-primary);
+  background: var(--mat-sys-surface-container);
+}
+
+.example-radio-button.cdk-active[aria-disabled='true'],
+.example-radio-button[aria-disabled='true']:focus-within {
+  outline: 2px solid var(--mat-sys-outline);
+}
+
+.example-radio-button[aria-disabled='true'] {
+  cursor: default;
+}
+
+.example-radio-button[aria-disabled='true'] span:not(.example-radio-indicator) {
+  opacity: 0.3;
+}
+
+.example-radio-button[aria-disabled='true']::before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  border-radius: var(--mat-sys-corner-extra-small);
+  background-color: var(--mat-sys-on-surface);
+  opacity: var(--mat-sys-focus-state-layer-opacity);
+}

src/components-examples/cdk-experimental/radio/cdk-radio/cdk-radio-example.html

@@ -0,0 +1,62 @@
+<div class="example-radio-controls">
+  <mat-checkbox [formControl]="disabled">Disabled</mat-checkbox>
+  <mat-checkbox [formControl]="readonly">Readonly</mat-checkbox>
+  <mat-checkbox [formControl]="skipDisabled">Skip Disabled</mat-checkbox>
+
+  <mat-form-field subscriptSizing="dynamic" appearance="outline">
+    <mat-label>Selected Flavor</mat-label>
+    <mat-select [(value)]="selectedValue">
+      <mat-option [value]="null"><em>None</em></mat-option>
+      @for (flavor of flavors; track flavor) {
+        <mat-option [value]="flavor">{{flavor}}</mat-option>
+      }
+    </mat-select>
+  </mat-form-field>
+
+  <mat-form-field subscriptSizing="dynamic" appearance="outline">
+    <mat-label>Disabled Radio Options</mat-label>
+    <mat-select [(value)]="disabledOptions" multiple>
+      @for (flavor of flavors; track flavor) {
+        <mat-option [value]="flavor">{{flavor}}</mat-option>
+      }
+    </mat-select>
+  </mat-form-field>
+
+  <mat-form-field subscriptSizing="dynamic" appearance="outline">
+    <mat-label>Orientation</mat-label>
+    <mat-select [(value)]="orientation">
+      <mat-option value="vertical">Vertical</mat-option>
+      <mat-option value="horizontal">Horizontal</mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <mat-form-field subscriptSizing="dynamic" appearance="outline">
+    <mat-label>Focus strategy</mat-label>
+    <mat-select [(value)]="focusMode">
+      <mat-option value="roving">Roving Tabindex</mat-option>
+      <mat-option value="activedescendant">Active Descendant</mat-option>
+    </mat-select>
+  </mat-form-field>
+</div>
+
+<!-- #docregion radio-group -->
+<ul
+  cdkRadioGroup
+  [(value)]="selectedValue"
+  [disabled]="disabled.value"
+  [readonly]="readonly.value"
+  [skipDisabled]="skipDisabled.value"
+  [orientation]="orientation"
+  [focusMode]="focusMode"
+  class="example-radio-group"
+  aria-label="Select your favorite ice cream flavor"
+>
+  @for (flavor of flavors; track flavor) {
+    @let optionDisabled = disabledOptions.includes(flavor);
+    <li cdkRadioButton [value]="flavor" [disabled]="optionDisabled" class="example-radio-button">
+      <span class="example-radio-indicator"></span>
+      <span>{{ flavor }}</span>
+    </li>
+  }
+</ul>
+<!-- #enddocregion radio-group -->

src/components-examples/cdk-experimental/radio/cdk-radio/cdk-radio-example.ts

@@ -0,0 +1,39 @@
+import {Component} from '@angular/core';
+import {CdkRadioGroup, CdkRadioButton} from '@angular/cdk-experimental/radio';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatSelectModule} from '@angular/material/select';
+import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
+
+/** @title Basic CDK Radio Group */
+@Component({
+  selector: 'cdk-radio-example',
+  exportAs: 'cdkRadioExample',
+  templateUrl: 'cdk-radio-example.html',
+  styleUrl: 'cdk-radio-example.css',
+  standalone: true,
+  imports: [
+    CdkRadioGroup,
+    CdkRadioButton,
+    MatCheckboxModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    FormsModule,
+    ReactiveFormsModule,
+  ],
+})
+export class CdkRadioExample {
+  orientation: 'vertical' | 'horizontal' = 'vertical';
+  disabled = new FormControl(false, {nonNullable: true});
+
+  flavors = ['Vanilla', 'Chocolate', 'Strawberry', 'Mint Chip', 'Cookies & Cream', 'Rocky Road'];
+
+  // New controls
+  readonly = new FormControl(false, {nonNullable: true});
+  skipDisabled = new FormControl(true, {nonNullable: true});
+  focusMode: 'roving' | 'activedescendant' = 'roving';
+  selectedValue: string | null = 'Vanilla'; // To control/reflect the radio group's value
+
+  // Control for which radio options are individually disabled
+  disabledOptions: string[] = ['Chocolate'];
+}

src/components-examples/cdk-experimental/radio/index.ts

@@ -0,0 +1 @@
+export {CdkRadioExample} from './cdk-radio/cdk-radio-example';