fix(cdk-experimental/ui-patterns): focus list when using active desce… (#31756)

* fix(cdk-experimental/ui-patterns): focus list when using active descendant

* If a list is using active descendant to track focus, calling focus() on a list item should send focus to the parent list element.

* fixup! fix(cdk-experimental/ui-patterns): focus list when using active descendant

Author: wagnermaciel

src/cdk-experimental/accordion/accordion.ts

@@ -150,6 +150,9 @@ export class CdkAccordionTrigger {
   },
 })
 export class CdkAccordionGroup {
+  /** A reference to the group element. */
+  private readonly _elementRef = inject(ElementRef);
+
   /** The CdkAccordionTriggers nested inside this group. */
   protected readonly _triggers = contentChildren(CdkAccordionTrigger, {descendants: true});
 
@@ -184,6 +187,7 @@ export class CdkAccordionGroup {
     expandedIds: this.value,
     // TODO(ok7sai): Investigate whether an accordion should support horizontal mode.
     orientation: () => 'vertical',
+    element: () => this._elementRef.nativeElement,
   });
 
   constructor() {

src/cdk-experimental/listbox/listbox.ts

@@ -55,6 +55,9 @@ import {_IdGenerator} from '@angular/cdk/a11y';
   },
 })
 export class CdkListbox<V> {
+  /** A reference to the listbox element. */
+  private readonly _elementRef = inject(ElementRef);
+
   /** The directionality (LTR / RTL) context for the application (or a subtree of it). */
   private readonly _directionality = inject(Directionality);
 
@@ -105,6 +108,7 @@ export class CdkListbox<V> {
     items: this.items,
     activeItem: signal(undefined),
     textDirection: this.textDirection,
+    element: () => this._elementRef.nativeElement,
   });
 
   /** Whether the listbox has received focus yet. */

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

@@ -93,6 +93,9 @@ export function mapSignal<T, V>(
   },
 })
 export class CdkRadioGroup<V> {
+  /** A reference to the radio group element. */
+  private readonly _elementRef = inject(ElementRef);
+
   /** The CdkRadioButtons nested inside of the CdkRadioGroup. */
   private readonly _cdkRadioButtons = contentChildren(CdkRadioButton, {descendants: true});
 
@@ -140,6 +143,7 @@ export class CdkRadioGroup<V> {
     activeItem: signal(undefined),
     textDirection: this.textDirection,
     toolbar: this._toolbarPattern,
+    element: () => this._elementRef.nativeElement,
     focusMode: this._toolbarPattern()?.inputs.focusMode ?? this.focusMode,
     skipDisabled: this._toolbarPattern()?.inputs.skipDisabled ?? this.skipDisabled,
   });

src/cdk-experimental/tabs/tabs.ts

@@ -130,6 +130,9 @@ export class CdkTabs {
   },
 })
 export class CdkTabList implements OnInit, OnDestroy {
+  /** A reference to the tab list element. */
+  private readonly _elementRef = inject(ElementRef);
+
   /** The parent CdkTabs. */
   private readonly _cdkTabs = inject(CdkTabs);
 
@@ -174,6 +177,7 @@ export class CdkTabList implements OnInit, OnDestroy {
     items: this.tabs,
     value: this._selection,
     activeItem: signal(undefined),
+    element: () => this._elementRef.nativeElement,
   });
 
   /** Whether the tree has received focus yet. */

src/cdk-experimental/toolbar/toolbar.ts

@@ -80,6 +80,9 @@ function sortDirectives(a: HasElement, b: HasElement) {
   },
 })
 export class CdkToolbar<V> {
+  /** A reference to the toolbar element. */
+  private readonly _elementRef = inject(ElementRef);
+
   /** The CdkTabList nested inside of the container. */
   private readonly _cdkWidgets = signal(new Set<CdkRadioButtonInterface<V> | CdkToolbarWidget>());
 
@@ -109,6 +112,7 @@ export class CdkToolbar<V> {
     activeItem: signal(undefined),
     textDirection: this.textDirection,
     focusMode: signal('roving'),
+    element: () => this._elementRef.nativeElement,
   });
 
   /** Whether the toolbar has received focus yet. */

src/cdk-experimental/tree/tree.ts

@@ -76,6 +76,9 @@ function sortDirectives(a: HasElement, b: HasElement) {
   },
 })
 export class CdkTree<V> {
+  /** A reference to the tree element. */
+  private readonly _elementRef = inject(ElementRef);
+
   /** All CdkTreeItem instances within this tree. */
   private readonly _unorderedItems = signal(new Set<CdkTreeItem<V>>());
 
@@ -124,6 +127,7 @@ export class CdkTree<V> {
       [...this._unorderedItems()].sort(sortDirectives).map(item => item.pattern),
     ),
     activeItem: signal(undefined),
+    element: () => this._elementRef.nativeElement,
   });
 
   /** Whether the tree has received focus yet. */

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

@@ -68,6 +68,7 @@ describe('Accordion Pattern', () => {
       expandedIds: signal<string[]>([]),
       skipDisabled: signal(true),
       wrap: signal(true),
+      element: signal(document.createElement('div')),
     };
     groupPattern = new AccordionGroupPattern(groupInputs);
 

src/cdk-experimental/ui-patterns/behaviors/list-focus/list-focus.spec.ts

@@ -24,6 +24,7 @@ export function getListFocus(inputs: TestInputs = {}): ListFocus<ListFocusItem>
     disabled: signal(false),
     skipDisabled: signal(false),
     focusMode: signal('roving'),
+    element: signal({focus: () => {}} as HTMLElement),
     items: items,
     ...inputs,
   });
@@ -98,6 +99,12 @@ describe('List Focus', () => {
       focusManager.inputs.activeItem.set(focusManager.inputs.items()[1]);
       expect(focusManager.getActiveDescendant()).toBe(focusManager.inputs.items()[1].id());
     });
+
+    it('should focus the list element when focusing an item', () => {
+      const focusSpy = spyOn(focusManager.inputs.element()!, 'focus');
+      focusManager.focus(focusManager.inputs.items()[1]);
+      expect(focusSpy).toHaveBeenCalled();
+    });
   });
 
   describe('#isFocusable', () => {

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

@@ -40,6 +40,8 @@ export interface ListFocusInputs<T extends ListFocusItem> {
 
   /** Whether disabled items in the list should be skipped when navigating. */
   skipDisabled: SignalLike<boolean>;
+
+  element: SignalLike<HTMLElement | undefined>;
 }
 
 /** Controls focus for a list of items. */
@@ -103,9 +105,7 @@ export class ListFocus<T extends ListFocusItem> {
     this.prevActiveItem.set(this.inputs.activeItem());
     this.inputs.activeItem.set(item);
 
-    if (this.inputs.focusMode() === 'roving') {
-      item.element().focus();
-    }
+    this.inputs.focusMode() === 'roving' ? item.element().focus() : this.inputs.element()?.focus();
 
     return true;
   }

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

@@ -30,6 +30,7 @@ describe('List Behavior', () => {
       multi: inputs.multi ?? signal(false),
       textDirection: inputs.textDirection ?? signal('ltr'),
       orientation: inputs.orientation ?? signal('vertical'),
+      element: signal({focus: () => {}} as HTMLElement),
       focusMode: inputs.focusMode ?? signal('roving'),
       skipDisabled: inputs.skipDisabled ?? signal(true),
       selectionMode: signal('explicit'),