fix(cdk/a11y): add Shadow DOM support to FocusTrap

Author: Mr-KRAMA

src/cdk/a11y/focus-trap/focus-trap.spec.ts

@@ -1,6 +1,7 @@
 import {Platform, _supportsShadowDom} from '../../platform';
 import {CdkPortalOutlet, PortalModule, TemplatePortal} from '../../portal';
 import {
+  AfterViewInit,
   Component,
   TemplateRef,
   ViewChild,
@@ -185,6 +186,24 @@ describe('FocusTrap', () => {
       expect(() => focusTrapInstance.focusFirstTabbableElement()).not.toThrow();
       expect(() => focusTrapInstance.focusLastTabbableElement()).not.toThrow();
     });
+
+    it('should find tabbable elements in shadow DOM', () => {
+      if (!_supportsShadowDom()) {
+        return;
+      }
+
+      const fixture = TestBed.createComponent(FocusTrapWithShadowDom);
+      fixture.detectChanges();
+      const focusTrapInstance = fixture.componentInstance.focusTrapDirective.focusTrap;
+
+      // The shadow button should be found as the first tabbable element
+      expect(focusTrapInstance.focusFirstTabbableElement()).toBe(true);
+      expect(getActiveElement().textContent?.trim()).toBe('Shadow Button');
+
+      // The shadow button should also be found as the last tabbable element
+      expect(focusTrapInstance.focusLastTabbableElement()).toBe(true);
+      expect(getActiveElement().textContent?.trim()).toBe('Shadow Button');
+    });
   });
 
   describe('with autoCapture', () => {
@@ -448,3 +467,25 @@ class FocusTrapInsidePortal {
   @ViewChild('template') template: TemplateRef<any>;
   @ViewChild(CdkPortalOutlet) portalOutlet: CdkPortalOutlet;
 }
+
+@Component({
+  template: `
+    <div cdkTrapFocus>
+      <div #shadowHost></div>
+    </div>
+  `,
+  imports: [A11yModule],
+})
+class FocusTrapWithShadowDom implements AfterViewInit {
+  @ViewChild(CdkTrapFocus) focusTrapDirective: CdkTrapFocus;
+  @ViewChild('shadowHost', {static: true}) shadowHost: any;
+
+  ngAfterViewInit() {
+    if (_supportsShadowDom()) {
+      const shadowRoot = this.shadowHost.nativeElement.attachShadow({mode: 'open'});
+      const shadowButton = document.createElement('button');
+      shadowButton.textContent = 'Shadow Button';
+      shadowRoot.appendChild(shadowButton);
+    }
+  }
+}

src/cdk/a11y/focus-trap/focus-trap.ts

@@ -286,6 +286,22 @@ export class FocusTrap {
       return root;
     }
 
+    // Check shadow DOM first if it exists
+    if (root.shadowRoot) {
+      const shadowChildren = root.shadowRoot.children;
+      for (let i = 0; i < shadowChildren.length; i++) {
+        const tabbableChild =
+          shadowChildren[i].nodeType === this._document.ELEMENT_NODE
+            ? this._getFirstTabbableElement(shadowChildren[i] as HTMLElement)
+            : null;
+
+        if (tabbableChild) {
+          return tabbableChild;
+        }
+      }
+    }
+
+    // Then check light DOM children
     const children = root.children;
 
     for (let i = 0; i < children.length; i++) {
@@ -308,7 +324,7 @@ export class FocusTrap {
       return root;
     }
 
-    // Iterate in reverse DOM order.
+    // Iterate in reverse DOM order - check light DOM children first
     const children = root.children;
 
     for (let i = children.length - 1; i >= 0; i--) {
@@ -322,6 +338,21 @@ export class FocusTrap {
       }
     }
 
+    // Then check shadow DOM if it exists
+    if (root.shadowRoot) {
+      const shadowChildren = root.shadowRoot.children;
+      for (let i = shadowChildren.length - 1; i >= 0; i--) {
+        const tabbableChild =
+          shadowChildren[i].nodeType === this._document.ELEMENT_NODE
+            ? this._getLastTabbableElement(shadowChildren[i] as HTMLElement)
+            : null;
+
+        if (tabbableChild) {
+          return tabbableChild;
+        }
+      }
+    }
+
     return null;
   }