fixup! fix(material/button-toggle): changed after checked error when updating tabindex (#31172)

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,13 @@ export class CdkRadioGroup<V> {
   private _hasFocused = signal(false);
 
   constructor() {
+    afterRenderEffect(() => {
+      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/cdk-radio/cdk-radio-example.html

@@ -59,4 +59,5 @@
     </li>
   }
 </ul>
-<!-- #enddocregion radio-group -->
+<!-- #enddocregion radio-group -->
+