fix(cdk-experimental/ui-patterns): fixing toolbar interactions when disabled

Author: demanr

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

@@ -19,7 +19,6 @@ import {
   model,
   signal,
   WritableSignal,
-  OnInit,
   OnDestroy,
 } from '@angular/core';
 import {RadioButtonPattern, RadioGroupPattern} from '../ui-patterns';
@@ -162,21 +161,27 @@ export class CdkRadioGroup<V> {
         this.pattern.setDefaultState();
       }
     });
+
+    afterRenderEffect(() => {
+      if (this.toolbar) {
+        const radioButtons = this._cdkRadioButtons();
+        // If the group is disabled and the toolbar is set to skip disabled items,
+        // the radio buttons should not be part of the toolbar's navigation.
+        if (this.disabled() && this.toolbar.skipDisabled()) {
+          radioButtons.forEach(radio => this.toolbar!.deregister(radio));
+        } else {
+          radioButtons.forEach(radio => this.toolbar!.register(radio));
+        }
+      }
+    });
   }
 
   onFocus() {
     this._hasFocused.set(true);
   }
 
-  toolbarButtonRegister(radio: CdkRadioButton<V>) {
-    // only register if the group is not disabled or the toolbar does not skip disabled
-    if (this.toolbar && (!this.disabled() || !this.toolbar.skipDisabled())) {
-      this.toolbar.register(radio);
-    }
-  }
-
   toolbarButtonDeregister(radio: CdkRadioButton<V>) {
-    if (this.toolbar && (!this.disabled() || !this.toolbar.skipDisabled())) {
+    if (this.toolbar) {
       this.toolbar.deregister(radio);
     }
   }
@@ -196,7 +201,7 @@ export class CdkRadioGroup<V> {
     '[id]': 'pattern.id()',
   },
 })
-export class CdkRadioButton<V> implements OnInit, OnDestroy {
+export class CdkRadioButton<V> implements OnDestroy {
   /** A reference to the radio button element. */
   private readonly _elementRef = inject(ElementRef);
 
@@ -230,12 +235,6 @@ export class CdkRadioButton<V> implements OnInit, OnDestroy {
     element: this.element,
   });
 
-  ngOnInit() {
-    if (this._cdkRadioGroup.toolbar) {
-      this._cdkRadioGroup.toolbarButtonRegister(this);
-    }
-  }
-
   ngOnDestroy() {
     if (this._cdkRadioGroup.toolbar) {
       this._cdkRadioGroup.toolbarButtonDeregister(this);

src/cdk-experimental/toolbar/toolbar.ts

@@ -88,7 +88,7 @@ export class CdkToolbar<V> {
 
   /** Sorted UIPatterns of the child widgets */
   items = computed(() =>
-    [...this._cdkWidgets()].sort(sortDirectives).map(button => button.pattern),
+    [...this._cdkWidgets()].sort(sortDirectives).map(widget => widget.pattern),
   );
 
   /** Whether the toolbar is vertically or horizontally oriented. */
@@ -110,7 +110,6 @@ export class CdkToolbar<V> {
   pattern: ToolbarPattern<V> = new ToolbarPattern<V>({
     ...this,
     activeIndex: signal(0),
-    // items: this.items1, // might not need?
     textDirection: this.textDirection,
     focusMode: this.focusMode,
   });
@@ -128,18 +127,30 @@ export class CdkToolbar<V> {
         this.pattern.setDefaultState();
       }
     });
+
+    afterRenderEffect(() => {
+      if (typeof ngDevMode === 'undefined' || ngDevMode) {
+        const violations = this.pattern.validate();
+        for (const violation of violations) {
+          console.error(violation);
+        }
+      }
+    });
   }
 
   register(widget: CdkRadioButtonInterface<V> | CdkToolbarWidget) {
-    this._cdkWidgets().add(widget);
-
-    this._cdkWidgets.set(new Set(this._cdkWidgets()));
+    const widgets = this._cdkWidgets();
+    if (!widgets.has(widget)) {
+      widgets.add(widget);
+      this._cdkWidgets.set(new Set(widgets));
+    }
   }
 
   deregister(widget: CdkRadioButtonInterface<V> | CdkToolbarWidget) {
-    this._cdkWidgets().delete(widget);
-
-    this._cdkWidgets.set(new Set(this._cdkWidgets()));
+    const widgets = this._cdkWidgets();
+    if (widgets.delete(widget)) {
+      this._cdkWidgets.set(new Set(widgets));
+    }
   }
 }
 
@@ -157,37 +168,40 @@ export class CdkToolbar<V> {
     'class': 'cdk-toolbar-widget',
     '[class.cdk-active]': 'pattern.active()',
     '[attr.tabindex]': 'pattern.tabindex()',
-    '[attr.aria-disabled]': 'pattern.disabled()',
+    '[attr.inert]': 'hardDisabled() ? true : null',
+    '[attr.disabled]': 'hardDisabled() ? true : null',
     '[id]': 'pattern.id()',
   },
 })
 export class CdkToolbarWidget implements OnInit, OnDestroy {
-  /** A reference to the radio button element. */
+  /** A reference to the widget element. */
   private readonly _elementRef = inject(ElementRef);
 
   /** The parent CdkToolbar. */
   private readonly _cdkToolbar = inject(CdkToolbar);
 
-  /** A unique identifier for the radio button. */
+  /** A unique identifier for the widget. */
   private readonly _generatedId = inject(_IdGenerator).getId('cdk-toolbar-widget-');
 
-  /** A unique identifier for the radio button. */
+  /** A unique identifier for the widget. */
   protected id = computed(() => this._generatedId);
 
   /** The parent Toolbar UIPattern. */
   protected parentToolbar = computed(() => this._cdkToolbar.pattern);
 
-  /** A reference to the radio button element to be focused on navigation. */
+  /** A reference to the widget element to be focused on navigation. */
   element = computed(() => this._elementRef.nativeElement);
 
-  /** Whether the radio button is disabled. */
+  /** Whether the widget is disabled. */
   disabled = input(false, {transform: booleanAttribute});
 
+  readonly hardDisabled = computed(() => this.pattern.disabled() && this.pattern.tabindex() < 0);
+
   pattern = new ToolbarWidgetPattern({
     ...this,
     id: this.id,
     element: this.element,
-    disabled: computed(() => this._cdkToolbar.disabled() || this.disabled()),
+    disabled: computed(() => this._cdkToolbar.disabled() || this.disabled() || false),
     parentToolbar: this.parentToolbar,
   });
 

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

@@ -26,6 +26,7 @@ interface RadioGroupLike<V> {
   focusManager: ListFocus<RadioButtonPattern<V> | GeneralWidget>;
   selection: ListSelection<RadioButtonPattern<V>, V>;
   navigation: ListNavigation<RadioButtonPattern<V> | GeneralWidget>;
+  readonly: SignalLike<boolean>;
 }
 
 /** Represents the required inputs for a radio button in a radio group. */

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

@@ -99,11 +99,7 @@ export class RadioGroupPattern<V> {
 
     // If within a toolbar relinquish keyboard control
     if (this.inputs.toolbar()) {
-      // when in activedescendant focus mode, allow toolbar to indicate the radio group to do selection
-      if (this.readonly() || this.inputs.focusMode() === 'activedescendant') return manager;
-      return manager
-        .on(' ', () => this.selection.selectOne())
-        .on('Enter', () => this.selection.selectOne());
+      return manager;
     }
 
     // Readonly mode allows navigation but not selection changes.

src/cdk-experimental/ui-patterns/toolbar/toolbar.ts

@@ -65,28 +65,9 @@ export class ToolbarPattern<V> {
   keydown = computed(() => {
     const manager = new KeyboardEventManager();
 
-    /** When a toolbar widget is active and disabled, prevent selection */
-    if (
-      this.focusManager.activeItem().disabled() &&
-      this.focusManager.activeItem() instanceof ToolbarWidgetPattern
-    ) {
-      return manager
-        .on(' ', () => {})
-        .on('Enter', () => {})
-        .on(this.prevKey, () => this.navigation.prev())
-        .on(this.nextKey, () => this.navigation.next())
-        .on('Home', () => this.navigation.first())
-        .on('End', () => this.navigation.last());
-    }
-
-    /** When in Active Descendant mode, Toolbar controls which group receives selection */
-    if (this.inputs.focusMode() === 'activedescendant') {
-      manager
-        .on(' ', () => this.toolbarSelectOverride())
-        .on('Enter', () => this.toolbarSelectOverride());
-    }
-
     return manager
+      .on(' ', () => this.toolbarSelectOverride())
+      .on('Enter', () => this.toolbarSelectOverride())
       .on(this.prevKey, () => this.navigation.prev())
       .on(this.nextKey, () => this.navigation.next())
       .on('Home', () => this.navigation.first())
@@ -98,12 +79,13 @@ export class ToolbarPattern<V> {
 
     /** If the active item is a Radio Button, indicate to the group the selection */
     if (activeItem instanceof RadioButtonPattern) {
-      if (activeItem.group()) {
-        activeItem.group()!!.selection.selectOne();
+      const group = activeItem.group();
+      if (group && !group.readonly()) {
+        group.selection.selectOne();
       }
     } else {
       /** Item is a Toolbar Widget, manually select it */
-      activeItem.element().click();
+      if (activeItem.element()) activeItem.element().click();
     }
   }
 
@@ -115,7 +97,7 @@ export class ToolbarPattern<V> {
     return manager.on(e => this.goto(e));
   });
 
-  /** Navigates to the radio button associated with the given pointer event. */
+  /** Navigates to the widget associated with the given pointer event. */
   goto(event: PointerEvent) {
     const item = this._getItem(event);
 
@@ -142,7 +124,7 @@ export class ToolbarPattern<V> {
       return undefined;
     }
 
-    // Assumes the target or its ancestor has role="radio" or button
+    // Assumes the target or its ancestor has role="radio" or role="button"
     const element = e.target.closest('[role="button"], [role="radio"]');
     return this.inputs.items().find(i => i.element() === element);
   }
@@ -182,6 +164,21 @@ export class ToolbarPattern<V> {
       this.inputs.activeIndex.set(firstItem.index());
     }
   }
+  /** Validates the state of the toolbar and returns a list of accessibility violations. */
+  validate(): string[] {
+    const violations: string[] = [];
+
+    if (this.inputs.skipDisabled()) {
+      for (const item of this.inputs.items()) {
+        if (item instanceof RadioButtonPattern && item.selected() && item.disabled()) {
+          violations.push(
+            "Accessibility Violation: A selected radio button inside the toolbar is disabled while 'skipDisabled' is true, making the selection unreachable via keyboard.",
+          );
+        }
+      }
+    }
+    return violations;
+  }
 }
 
 export type ToolbarWidget = {
@@ -190,14 +187,14 @@ export type ToolbarWidget = {
   disabled: SignalLike<boolean>;
 };
 
-/** Represents the required inputs for a radio button in a radio group. */
+/** Represents the required inputs for a toolbar widget in a toolbar. */
 export interface ToolbarWidgetInputs extends ListNavigationItem, ListFocusItem {
-  /** A reference to the parent radio group. */
-  parentToolbar: SignalLike<ToolbarPattern<null> | undefined>;
+  /** A reference to the parent toolbar. */
+  parentToolbar: SignalLike<ToolbarPattern<null>>;
 }
 
 export class ToolbarWidgetPattern {
-  /** A unique identifier for the radio button. */
+  /** A unique identifier for the widget. */
   id: SignalLike<string>;
   /** The html element that should receive focus. */ // might not be needed
   readonly element: SignalLike<HTMLElement>;
@@ -207,9 +204,8 @@ export class ToolbarWidgetPattern {
   /** A reference to the parent toolbar. */
   parentToolbar: SignalLike<ToolbarPattern<null> | undefined>;
 
-  // expose tab index have tabindex -1 if roving manage 1/0
-  /** The tabindex of the radio button. */
-  tabindex = computed(() => this.parentToolbar()?.focusManager.getItemTabindex(this));
+  /** The tabindex of the widgdet. */
+  tabindex = computed(() => this.inputs.parentToolbar().focusManager.getItemTabindex(this));
 
   /** The position of the widget within the group. */
   index = computed(
@@ -219,8 +215,8 @@ export class ToolbarWidgetPattern {
         .findIndex(i => i.id() === this.id()) ?? -1,
   );
 
-  /** Whether the radio button is currently the active one (focused). */
-  active = computed(() => this.parentToolbar()?.focusManager.activeItem() === this);
+  /** Whether the widhet is currently the active one (focused). */
+  active = computed(() => this.inputs.parentToolbar().focusManager.activeItem() === this);
 
   constructor(readonly inputs: ToolbarWidgetInputs) {
     this.id = inputs.id;