chore(popover): allow to set the element to set a focus trap on

Author: Fafnor

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 -   DatePicker: add an input to change the displayed year
 -   Message: add a `closeButtonProps` prop to add a close button in the message. Only available for `info` kind messages with a background.
+-   Popover: add a `focusTrapZoneElement` prop to specify the element in which the focus trap should be applied.
 
 ### Changed
 

packages/lumx-react/src/components/popover/Popover.tsx

@@ -60,6 +60,8 @@ export interface PopoverProps extends GenericProps, HasTheme {
     placement?: Placement;
     /** Whether the popover should be rendered into a DOM node that exists outside the DOM hierarchy of the parent component. */
     usePortal?: boolean;
+    /** The element in which the focus trap should be set. Default to popover. */
+    focusTrapZoneElement?: RefObject<HTMLElement>;
     /** Z-axis position. */
     zIndex?: number;
     /** On close callback (on click away or Escape pressed). */
@@ -115,6 +117,7 @@ const _InnerPopover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, ref
         boundaryRef,
         fitToAnchorWidth,
         fitWithinViewportHeight,
+        focusTrapZoneElement,
         offset,
         placement,
         style,
@@ -146,12 +149,13 @@ const _InnerPopover: Comp<PopoverProps, HTMLDivElement> = forwardRef((props, ref
     });
 
     const unmountSentinel = useRestoreFocusOnClose({ focusAnchorOnClose, anchorRef, parentElement }, popperElement);
+    const focusZoneElement = focusTrapZoneElement?.current || popoverRef?.current;
 
     useCallbackOnEscape(onClose, isOpen && closeOnEscape);
 
     /** Only set focus within if the focus trap is disabled as they interfere with one another. */
     useFocus(focusElement?.current, !withFocusTrap && isOpen && isPositioned);
-    useFocusTrap(withFocusTrap && isOpen && popoverRef?.current, focusElement?.current);
+    useFocusTrap(withFocusTrap && isOpen && focusZoneElement, focusElement?.current);
 
     const clickAwayRefs = useRef([popoverRef, anchorRef]);
     const mergedRefs = useMergeRefs<HTMLDivElement>(setPopperElement, ref, popoverRef);

packages/lumx-react/src/hooks/useFocusTrap.ts

@@ -26,27 +26,35 @@ export function useFocusTrap(focusZoneElement: HTMLElement | Falsy, focusElement
             return undefined;
         }
 
+        // Use the shadow root as focusZoneElement when available
+        const focusZoneElementOrShadowRoot = focusZoneElement.shadowRoot || focusZoneElement;
+
         // Trap 'Tab' key down focus switch into the focus zone.
         const trapTabFocusInFocusZone = (evt: KeyboardEvent) => {
             const { key } = evt;
             if (key !== 'Tab') {
                 return;
             }
-            const focusable = getFirstAndLastFocusable(focusZoneElement);
+
+            const focusable = getFirstAndLastFocusable(focusZoneElementOrShadowRoot);
 
             // Prevent focus switch if no focusable available.
             if (!focusable.first) {
                 evt.preventDefault();
                 return;
             }
 
+            const activeElement = focusZoneElement.shadowRoot
+                ? focusZoneElement.shadowRoot.activeElement
+                : document.activeElement;
+
             if (
                 // No previous focus
-                !document.activeElement ||
+                !activeElement ||
                 // Previous focus is at the end of the focus zone.
-                (!evt.shiftKey && document.activeElement === focusable.last) ||
+                (!evt.shiftKey && activeElement === focusable.last) ||
                 // Previous focus is outside the focus zone
-                !focusZoneElement.contains(document.activeElement)
+                !focusZoneElementOrShadowRoot.contains(activeElement)
             ) {
                 focusable.first.focus();
                 evt.preventDefault();
@@ -57,7 +65,7 @@ export function useFocusTrap(focusZoneElement: HTMLElement | Falsy, focusElement
                 // Focus order reversed
                 evt.shiftKey &&
                 // Previous focus is at the start of the focus zone.
-                document.activeElement === focusable.first
+                activeElement === focusable.first
             ) {
                 focusable.last.focus();
                 evt.preventDefault();
@@ -70,12 +78,12 @@ export function useFocusTrap(focusZoneElement: HTMLElement | Falsy, focusElement
         };
 
         // SETUP:
-        if (focusElement && focusZoneElement.contains(focusElement)) {
+        if (focusElement && focusZoneElementOrShadowRoot.contains(focusElement)) {
             // Focus the given element.
             focusElement.focus({ preventScroll: true });
         } else {
             // Focus the first focusable element in the zone.
-            getFirstAndLastFocusable(focusZoneElement).first?.focus({ preventScroll: true });
+            getFirstAndLastFocusable(focusZoneElementOrShadowRoot).first?.focus({ preventScroll: true });
         }
         FOCUS_TRAPS.register(focusTrap);
 

packages/lumx-react/src/utils/focus/getFirstAndLastFocusable.ts

@@ -6,7 +6,7 @@ import { getFocusableElements } from './getFocusableElements';
  * @param parentElement The element in which to search focusable elements.
  * @return first and last focusable elements
  */
-export function getFirstAndLastFocusable(parentElement: HTMLElement) {
+export function getFirstAndLastFocusable(parentElement: HTMLElement | ShadowRoot) {
     const focusableElements = getFocusableElements(parentElement);
 
     // First non disabled element.

packages/lumx-react/src/utils/focus/getFocusableElements.ts

@@ -2,6 +2,6 @@ import { DISABLED_SELECTOR, TABBABLE_ELEMENTS_SELECTOR } from './constants';
 
 const isNotDisabled = (element: HTMLElement) => !element.matches(DISABLED_SELECTOR);
 
-export function getFocusableElements(element: HTMLElement): HTMLElement[] {
+export function getFocusableElements(element: HTMLElement | ShadowRoot): HTMLElement[] {
     return Array.from(element.querySelectorAll<HTMLElement>(TABBABLE_ELEMENTS_SELECTOR)).filter(isNotDisabled);
 }