fix(multiple): account for shadow dom in aria directives

src/aria/private/accordion/BUILD.bazel

@@ -14,6 +14,7 @@ ts_project(
         "//src/aria/private/behaviors/list-navigation",
         "//src/aria/private/behaviors/list-selection",
         "//src/aria/private/behaviors/signal-like",
+        "//src/cdk/platform",
     ],
 )
 

src/aria/private/accordion/accordion.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
+import {_getEventTarget} from '@angular/cdk/platform';
 import {KeyboardEventManager, ClickEventManager} from '../behaviors/event-manager';
 import {ExpansionItem, ListExpansion, ListExpansionInputs} from '../behaviors/expansion/expansion';
 import {ListFocus, ListFocusInputs, ListFocusItem} from '../behaviors/list-focus/list-focus';
@@ -82,7 +83,7 @@ export class AccordionGroupPattern {
   /** The click event manager for the accordion trigger. */
   readonly click = computed(() => {
     return new ClickEventManager<PointerEvent>().on((e: PointerEvent) => {
-      const item = this._findTriggerPattern(e.target as Element);
+      const item = this._findTriggerPattern(_getEventTarget(e));
       if (!item) return;
 
       this.navigationBehavior.goto(item);
@@ -102,7 +103,7 @@ export class AccordionGroupPattern {
 
   /** Handles focus events on the trigger. This ensures the tabbing changes the active index. */
   onFocus(event: FocusEvent): void {
-    const item = this._findTriggerPattern(event.target as Element);
+    const item = this._findTriggerPattern(_getEventTarget(event));
     if (!item) return;
     if (!this.focusBehavior.isFocusable(item)) return;
 

src/aria/private/combobox/BUILD.bazel

@@ -14,6 +14,7 @@ ts_project(
         "//src/aria/private/behaviors/expansion",
         "//src/aria/private/behaviors/list",
         "//src/aria/private/behaviors/signal-like",
+        "//src/cdk/platform",
     ],
 )
 

src/aria/private/combobox/combobox.spec.ts

@@ -154,6 +154,7 @@ describe('ComboboxPattern', () => {
 
       const deleteEvent = new InputEvent('input', {inputType: 'deleteContentBackward'});
       Object.defineProperty(deleteEvent, 'target', {value: element});
+      Object.defineProperty(deleteEvent, 'composedPath', {value: null});
       pattern.onInput(deleteEvent as Event);
 
       expect(pattern.isDeleting()).toBe(true);

src/aria/private/combobox/combobox.ts

@@ -6,8 +6,9 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {KeyboardEventManager, ClickEventManager, Modifier} from '../behaviors/event-manager';
 import {computed, signal, untracked} from '@angular/core';
+import {_getEventTarget} from '@angular/cdk/platform';
+import {KeyboardEventManager, ClickEventManager, Modifier} from '../behaviors/event-manager';
 import {SignalLike, WritableSignalLike} from '../behaviors/signal-like/signal-like';
 import {ExpansionItem} from '../behaviors/expansion/expansion';
 
@@ -231,11 +232,11 @@ export class ComboboxPattern {
 
   /** Handles input events for the combobox. */
   onInput(event: Event) {
-    if (!(event.target instanceof HTMLInputElement)) return;
-    if (this.disabled() || this.readonly()) return;
+    const target = _getEventTarget(event);
+    if (!(target instanceof HTMLInputElement) || this.disabled() || this.readonly()) return;
 
     this.inputs.expanded.set(true);
-    this.value.set(event.target.value);
+    this.value.set(target.value);
     this.isDeleting.set(event instanceof InputEvent && !!event.inputType.match(/^delete/));
   }
 

src/aria/private/grid/BUILD.bazel

@@ -18,6 +18,7 @@ ts_project(
         "//src/aria/private/behaviors/list-navigation",
         "//src/aria/private/behaviors/signal-like",
         "//src/aria/private/utils",
+        "//src/cdk/platform",
     ],
 )
 

src/aria/private/grid/cell.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
+import {_getEventTarget} from '@angular/cdk/platform';
 import {
   computed,
   signal,
@@ -125,7 +126,7 @@ export class GridCellPattern implements GridCell {
   onFocusIn(event: FocusEvent): void {
     this.isFocused.set(true);
 
-    const focusTarget = event.target as Element | null;
+    const focusTarget = _getEventTarget<Element>(event);
     const widget = this.inputs.getWidget(focusTarget);
     if (!widget) return;
 
@@ -135,7 +136,7 @@ export class GridCellPattern implements GridCell {
 
   /** Handles focusout events for the cell. */
   onFocusOut(event: FocusEvent): void {
-    const blurTarget = event.target as Element | null;
+    const blurTarget = _getEventTarget<Element>(event);
     const widget = this.inputs.getWidget(blurTarget);
 
     // Pass down focusout event to the widget.

src/aria/private/grid/grid.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
+import {_getEventTarget} from '@angular/cdk/platform';
 import {SignalLike, computed, signal, untracked} from '../behaviors/signal-like/signal-like';
 import {KeyboardEventManager, ClickEventManager, Modifier} from '../behaviors/event-manager';
 import {NavOptions, Grid, GridInputs as GridBehaviorInputs} from '../behaviors/grid';
@@ -146,7 +147,7 @@ export class GridPattern {
     // Navigation without selection.
     if (!this.inputs.enableSelection()) {
       manager.on(e => {
-        const cell = this.inputs.getCell(e.target as Element);
+        const cell = this.inputs.getCell(_getEventTarget(e));
         if (!cell || !this.gridBehavior.focusBehavior.isFocusable(cell)) return;
 
         this.gridBehavior.gotoCell(cell);
@@ -156,7 +157,7 @@ export class GridPattern {
     // Navigation with selection.
     if (this.inputs.enableSelection()) {
       manager.on(e => {
-        const cell = this.inputs.getCell(e.target as Element);
+        const cell = this.inputs.getCell(_getEventTarget(e));
         if (!cell || !this.gridBehavior.focusBehavior.isFocusable(cell)) return;
 
         this.gridBehavior.gotoCell(cell, {
@@ -169,7 +170,7 @@ export class GridPattern {
       // Selection with modifier keys.
       if (this.inputs.multi()) {
         manager.on([Modifier.Ctrl, Modifier.Meta], e => {
-          const cell = this.inputs.getCell(e.target as Element);
+          const cell = this.inputs.getCell(_getEventTarget(e));
           if (!cell || !this.gridBehavior.focusBehavior.isFocusable(cell)) return;
 
           this.gridBehavior.gotoCell(cell, {toggle: true});
@@ -233,7 +234,7 @@ export class GridPattern {
     this.hasBeenInteracted.set(true);
 
     // Cell that receives focus.
-    const cell = this.inputs.getCell(event.target as Element | null);
+    const cell = this.inputs.getCell(_getEventTarget(event));
     if (!cell || !this.gridBehavior.focusBehavior.isFocusable(cell)) return;
 
     // Pass down the focusin event to the cell.
@@ -249,7 +250,7 @@ export class GridPattern {
   /** Handles focusout events on the grid. */
   onFocusOut(event: FocusEvent) {
     // Pass down focusout event to the cell that loses focus.
-    const blurTarget = event.target as Element | null;
+    const blurTarget = _getEventTarget<Element>(event);
     const cell = this.inputs.getCell(blurTarget);
 
     // Pass down the focusout event to the cell.

src/aria/private/grid/widget.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
+import {_getEventTarget} from '@angular/cdk/platform';
 import {KeyboardEventManager, Modifier} from '../behaviors/event-manager';
 import {
   SignalLike,
@@ -133,7 +134,7 @@ export class GridCellWidgetPattern {
     if (this.inputs.widgetType() === 'simple') return;
 
     // Set activate state if the focus is inside of widget.
-    const focusTarget = event.target as Element;
+    const focusTarget = _getEventTarget<Element>(event);
     if (this.widgetHost().contains(focusTarget) && this.widgetHost() !== focusTarget) {
       this.activate(event);
     }

src/aria/private/listbox/BUILD.bazel

@@ -13,6 +13,7 @@ ts_project(
         "//src/aria/private/behaviors/event-manager",
         "//src/aria/private/behaviors/list",
         "//src/aria/private/behaviors/signal-like",
+        "//src/cdk/platform",
     ],
 )
 

src/aria/private/listbox/listbox.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
+import {_getEventTarget} from '@angular/cdk/platform';
 import {OptionPattern} from './option';
 import {KeyboardEventManager, Modifier, ClickEventManager} from '../behaviors/event-manager';
 import {computed, signal, SignalLike} from '../behaviors/signal-like/signal-like';
@@ -292,11 +293,12 @@ export class ListboxPattern<V> {
   }
 
   protected _getItem(e: PointerEvent) {
-    if (!e.target) {
+    const target = _getEventTarget<Element>(e);
+    if (!target) {
       return;
     }
 
-    const element = (e.target as Element).closest('[role="option"]');
+    const element = target.closest('[role="option"]');
     return this.inputs.items().find(i => i.element() === element);
   }
 }

src/aria/private/menu/BUILD.bazel

@@ -13,6 +13,7 @@ ts_project(
         "//src/aria/private/behaviors/expansion",
         "//src/aria/private/behaviors/list",
         "//src/aria/private/behaviors/signal-like",
+        "//src/cdk/platform",
     ],
 )
 

src/aria/private/menu/menu.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
+import {_getEventTarget} from '@angular/cdk/platform';
 import {KeyboardEventManager} from '../behaviors/event-manager';
 import {computed, signal, SignalLike} from '../behaviors/signal-like/signal-like';
 import {List, ListInputs, ListItem} from '../behaviors/list/list';
@@ -229,7 +230,7 @@ export class MenuPattern<V> {
     }
 
     this.hasBeenHovered.set(true);
-    const item = this.inputs.items().find(i => i.element()?.contains(event.target as Node));
+    const item = this.inputs.items().find(i => i.element()?.contains(_getEventTarget(event)));
 
     if (!item) {
       return;
@@ -309,7 +310,7 @@ export class MenuPattern<V> {
 
   /** Handles click events for the menu. */
   onClick(event: MouseEvent) {
-    const relatedTarget = event.target as Node | null;
+    const relatedTarget = _getEventTarget<Node>(event);
     const item = this.inputs.items().find(i => i.element()?.contains(relatedTarget));
 
     if (item) {
@@ -552,7 +553,7 @@ export class MenuBarPattern<V> {
 
   /** Handles click events for the menu bar. */
   onClick(event: MouseEvent) {
-    const item = this.inputs.items().find(i => i.element()?.contains(event.target as Node));
+    const item = this.inputs.items().find(i => i.element()?.contains(_getEventTarget(event)));
 
     if (!item) {
       return;
@@ -564,7 +565,7 @@ export class MenuBarPattern<V> {
 
   /** Handles mouseover events for the menu bar. */
   onMouseOver(event: MouseEvent) {
-    const item = this.inputs.items().find(i => i.element()?.contains(event.target as Node));
+    const item = this.inputs.items().find(i => i.element()?.contains(_getEventTarget(event)));
 
     if (item) {
       this.goto(item, {focusElement: this.isFocused()});

src/aria/private/tabs/BUILD.bazel

@@ -15,6 +15,7 @@ ts_project(
         "//src/aria/private/behaviors/list-focus",
         "//src/aria/private/behaviors/list-navigation",
         "//src/aria/private/behaviors/signal-like",
+        "//src/cdk/platform",
     ],
 )
 

src/aria/private/tabs/tabs.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
+import {_getEventTarget} from '@angular/cdk/platform';
 import {KeyboardEventManager, ClickEventManager} from '../behaviors/event-manager';
 import {ExpansionItem, ListExpansion, ListExpansionInputs} from '../behaviors/expansion/expansion';
 import {
@@ -296,11 +297,12 @@ export class TabListPattern {
 
   /** Returns the tab item associated with the given pointer event. */
   private _getItem(e: PointerEvent) {
-    if (!e.target) {
+    const target = _getEventTarget<Element>(e);
+    if (!target) {
       return;
     }
 
-    const element = (e.target as Element).closest('[role="tab"]');
+    const element = target.closest('[role="tab"]');
     return this.inputs.items().find(i => i.element() === element);
   }
 }

src/aria/private/toolbar/BUILD.bazel

@@ -14,6 +14,7 @@ ts_project(
         "//src/aria/private/behaviors/event-manager",
         "//src/aria/private/behaviors/list",
         "//src/aria/private/behaviors/signal-like",
+        "//src/cdk/platform",
     ],
 )
 

src/aria/private/toolbar/toolbar.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
+import {_getEventTarget} from '@angular/cdk/platform';
 import {computed, signal, SignalLike} from '../behaviors/signal-like/signal-like';
 import {KeyboardEventManager} from '../behaviors/event-manager';
 import {List, ListInputs} from '../behaviors/list/list';
@@ -139,7 +140,7 @@ export class ToolbarPattern<V> {
 
   /** Navigates to the widget targeted by a pointer event. */
   private _goto(e: MouseEvent) {
-    const item = this.inputs.getItem(e.target as Element);
+    const item = this.inputs.getItem(_getEventTarget(e) as Element);
 
     if (item) {
       this.listBehavior.goto(item);

src/aria/private/tree/BUILD.bazel

@@ -13,6 +13,7 @@ ts_project(
         "//src/aria/private/behaviors/expansion",
         "//src/aria/private/behaviors/signal-like",
         "//src/aria/private/behaviors/tree",
+        "//src/cdk/platform",
     ],
 )
 

src/aria/private/tree/tree.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
+import {_getEventTarget} from '@angular/cdk/platform';
 import {
   SignalLike,
   computed,
@@ -479,10 +480,11 @@ export class TreePattern<V> implements TreeInputs<V> {
 
   /** Retrieves the TreeItemPattern associated with a DOM event, if any. */
   protected _getItem(event: Event): TreeItemPattern<V> | undefined {
-    if (!event.target) {
+    const target = _getEventTarget<Element>(event);
+    if (!target) {
       return;
     }
-    const element = (event.target as Element).closest('[role="treeitem"]');
+    const element = target.closest('[role="treeitem"]');
     return this.inputs.items().find(i => i.element() === element);
   }
 }