fix(cdk-experimental/ui-patterns): toolbar cleanup

Author: demanr

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

@@ -131,7 +131,7 @@ export class CdkRadioGroup<V> {
     value: this._value,
     activeItem: signal(undefined),
     textDirection: this.textDirection,
-    toolbar: signal(undefined),
+    toolbar: signal(undefined), // placeholder until Toolbar CDK is added
   });
 
   /** Whether the radio group has received focus yet. */

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

@@ -43,7 +43,7 @@ type ToolbarWidgetLike = {
  * Represents the properties exposed by a toolbar that need to be accessed by a radio group.
  * This exists to avoid circular dependency errors between the toolbar and radio button.
  */
-interface ToolbarLike<V> {
+export interface ToolbarLike<V> {
   listBehavior: List<RadioButtonPattern<V> | ToolbarWidgetLike, V>;
   orientation: SignalLike<'vertical' | 'horizontal'>;
   disabled: SignalLike<boolean>;
@@ -66,7 +66,7 @@ export class RadioGroupPattern<V> {
   /** Whether the radio group is readonly. */
   readonly = computed(() => this.selectedItem()?.disabled() || this.inputs.readonly());
 
-  /** The tabindex of the radio group (if using activedescendant or if in toolbar). */
+  /** The tabindex of the radio group. */
   tabindex = computed(() => (this.inputs.toolbar() ? -1 : this.listBehavior.tabindex()));
 
   /** The id of the current active radio button (if using activedescendant). */

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

@@ -7,7 +7,7 @@
  */
 
 import {signal, WritableSignal} from '@angular/core';
-import {RadioGroupInputs, RadioGroupPattern} from './radio-group';
+import {RadioGroupInputs, RadioGroupPattern, ToolbarLike} from './radio-group';
 import {RadioButtonPattern} from './radio-button';
 import {createKeyboardEvent} from '@angular/cdk/testing/private';
 import {ModifierKeys} from '@angular/cdk/testing';
@@ -304,4 +304,49 @@ describe('RadioGroup Pattern', () => {
       expect(violations.length).toBe(1);
     });
   });
+
+  describe('toolbar', () => {
+    let radioGroup: TestRadioGroup;
+    let radioButtons: TestRadio[];
+    let toolbar: ToolbarLike<string>;
+
+    beforeEach(() => {
+      const patterns = getDefaultPatterns();
+      radioGroup = patterns.radioGroup;
+      radioButtons = patterns.radioButtons;
+      toolbar = {
+        listBehavior: radioGroup.listBehavior,
+        orientation: radioGroup.orientation,
+        disabled: radioGroup.disabled,
+      };
+      radioGroup.inputs.toolbar = signal(toolbar);
+    });
+
+    it('should ignore keyboard navigation when within a toolbar', () => {
+      const initialActive = radioGroup.inputs.activeItem();
+      radioGroup.onKeydown(down());
+      expect(radioGroup.inputs.activeItem()).toBe(initialActive);
+    });
+
+    it('should ignore keyboard selection when within a toolbar', () => {
+      expect(radioGroup.inputs.value()).toEqual([]);
+      radioGroup.onKeydown(space());
+      expect(radioGroup.inputs.value()).toEqual([]);
+      radioGroup.onKeydown(enter());
+      expect(radioGroup.inputs.value()).toEqual([]);
+    });
+
+    it('should ignore pointer events when within a toolbar', () => {
+      const initialActive = radioGroup.inputs.activeItem();
+      expect(radioGroup.inputs.value()).toEqual([]);
+
+      const clickEvent = {
+        target: radioButtons[1].element(),
+      } as unknown as PointerEvent;
+      radioGroup.onPointerdown(clickEvent);
+
+      expect(radioGroup.inputs.activeItem()).toBe(initialActive);
+      expect(radioGroup.inputs.value()).toEqual([]);
+    });
+  });
 });

src/cdk-experimental/ui-patterns/toolbar/BUILD.bazel

@@ -10,10 +10,8 @@ ts_project(
     deps = [
         "//:node_modules/@angular/core",
         "//src/cdk-experimental/ui-patterns/behaviors/event-manager",
-        "//src/cdk-experimental/ui-patterns/behaviors/list-focus",
-        "//src/cdk-experimental/ui-patterns/behaviors/list-navigation",
+        "//src/cdk-experimental/ui-patterns/behaviors/list",
         "//src/cdk-experimental/ui-patterns/behaviors/signal-like",
         "//src/cdk-experimental/ui-patterns/radio-group",
-        "//src/cdk/bidi",
     ],
 )

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

@@ -70,57 +70,40 @@ export class ToolbarPattern<V> {
   /** The keydown event manager for the toolbar. */
   keydown = computed(() => {
     const manager = new KeyboardEventManager();
-    manager.options = {
-      preventDefault: false,
-      stopPropagation: true,
-    };
+
+    const activeItem = this.inputs.activeItem();
+    const isRadioButton = activeItem instanceof RadioButtonPattern;
+
+    if (isRadioButton) {
+      manager
+        .on(' ', () => this.selectRadioButton())
+        .on('Enter', () => this.selectRadioButton())
+        .on(this.altNextKey, () => activeItem?.group()?.listBehavior.next())
+        .on(this.altPrevKey, () => activeItem?.group()?.listBehavior.prev());
+    } else {
+      manager.on(this.altNextKey, () => this.listBehavior.next());
+      manager.on(this.altPrevKey, () => this.listBehavior.prev());
+    }
 
     return manager
-      .on(' ', () => this.toolbarSelectOverride())
-      .on('Enter', () => this.toolbarSelectOverride())
       .on(this.prevKey, () => this.listBehavior.prev())
       .on(this.nextKey, () => this.listBehavior.next())
-      .on(this.altNextKey, () => {
-        const activeItem = this.inputs.activeItem();
-        /** When within a Radio Group, use its navigation */
-        if (activeItem instanceof RadioButtonPattern && activeItem.group()) {
-          activeItem.group()?.listBehavior.next();
-        } else {
-          this.listBehavior.next();
-        }
-      })
-      .on(this.altPrevKey, () => {
-        const activeItem = this.inputs.activeItem();
-        /** When within a Radio Group, use its navigation */
-        if (activeItem instanceof RadioButtonPattern && activeItem.group()) {
-          activeItem.group()?.listBehavior.prev();
-        } else {
-          this.listBehavior.prev();
-        }
-      })
       .on('Home', () => this.listBehavior.first())
       .on('End', () => this.listBehavior.last());
   });
 
-  toolbarSelectOverride() {
-    const activeItem = this.inputs.activeItem();
+  selectRadioButton() {
+    const activeItem = this.inputs.activeItem() as RadioButtonPattern<V>;
 
-    /** If the active item is a Radio Button, indicate to the group the selection */
-    if (activeItem instanceof RadioButtonPattern) {
-      const group = activeItem.group();
-      if (group && !group.readonly() && !group.disabled()) {
-        group.listBehavior.selectOne();
-      }
+    // activeItem must be a radio button
+    const group = activeItem!.group();
+    if (group && !group.readonly() && !group.disabled()) {
+      group.listBehavior.selectOne();
     }
   }
 
   /** The pointerdown event manager for the toolbar. */
-  pointerdown = computed(() => {
-    const manager = new PointerEventManager();
-
-    // Default behavior: navigate and select on click.
-    return manager.on(e => this.goto(e));
-  });
+  pointerdown = computed(() => new PointerEventManager().on(e => this.goto(e)));
 
   /** Navigates to the widget associated with the given pointer event. */
   goto(event: PointerEvent) {
@@ -129,8 +112,8 @@ export class ToolbarPattern<V> {
 
     if (item instanceof RadioButtonPattern) {
       const group = item.group();
-      if (group && !group.readonly() && !group.disabled()) {
-        group.listBehavior.goto(item, {selectOne: true});
+      if (group && !group.disabled()) {
+        group.listBehavior.goto(item, {selectOne: !group.readonly()});
       }
     } else {
       this.listBehavior.goto(item);