feat(eui): use the focus trap pub sub in flyout and popover

weronikaolejniczak · weronikaolejniczak · commit 695e5b15a7ac · 2025-10-31T15:35:32.000+01:00
diff --git a/packages/eui/src/components/flyout/flyout.component.tsx b/packages/eui/src/components/flyout/flyout.component.tsx
@@ -32,6 +32,7 @@ import {
   useEuiMemoizedStyles,
   useGeneratedHtmlId,
   useEuiThemeCSSVariables,
+  focusTrapPubSub,
 } from '../../services';
 import {
   useCurrentSession,
@@ -462,26 +463,38 @@ export const EuiFlyoutComponent = forwardRef(
       return selectors;
     }, [includeSelectorInFocusTrap, includeFixedHeadersInFocusTrap]);
 
-    useEffect(() => {
-      if (focusTrapSelectors.length > 0) {
-        const shardsEls = focusTrapSelectors.flatMap((selector) =>
-          Array.from(document.querySelectorAll<HTMLElement>(selector))
-        );
-
-        setFocusTrapShards(Array.from(shardsEls));
-
-        // Flyouts that are toggled from shards do not have working
-        // focus trap autoFocus, so we need to focus the flyout wrapper ourselves
-        shardsEls.forEach((shard) => {
-          if (shard.contains(flyoutToggle.current)) {
-            resizeRef?.focus();
+    const findShards = useCallback(
+      (shouldAutoFocus: boolean = false) => {
+        if (focusTrapSelectors.length > 0) {
+          const shardsEls = focusTrapSelectors.flatMap((selector) =>
+            Array.from(document.querySelectorAll<HTMLElement>(selector))
+          );
+
+          setFocusTrapShards(Array.from(shardsEls));
+
+          // Flyouts that are toggled from shards do not have working
+          // focus trap autoFocus, so we need to focus the flyout wrapper ourselves
+          if (shouldAutoFocus) {
+            shardsEls.forEach((shard) => {
+              if (shard.contains(flyoutToggle.current)) {
+                resizeRef?.focus();
+              }
+            });
           }
-        });
-      } else {
-        // Clear existing shards if necessary, e.g. switching to `false`
-        setFocusTrapShards((shards) => (shards.length ? [] : shards));
-      }
-    }, [focusTrapSelectors, resizeRef]);
+        } else {
+          // Clear existing shards if necessary, e.g. switching to `false`
+          setFocusTrapShards((shards) => (shards.length ? [] : shards));
+        }
+      },
+      [focusTrapSelectors, resizeRef]
+    );
+
+    useEffect(() => {
+      findShards(true);
+
+      const unsubscribe = focusTrapPubSub.subscribe(findShards);
+      return unsubscribe;
+    }, [findShards]);
 
     const focusTrapProps: EuiFlyoutComponentProps['focusTrapProps'] = useMemo(
       () => ({
diff --git a/packages/eui/src/components/flyout/flyout.spec.tsx b/packages/eui/src/components/flyout/flyout.spec.tsx
@@ -23,6 +23,7 @@ import { EuiFlyout } from './flyout';
 import { EuiCollapsibleNav, EuiCollapsibleNavGroup } from '../collapsible_nav';
 import { EuiIcon } from '../icon';
 import { EuiButton } from '../button';
+import { EuiPopover } from '../popover';
 
 const childrenDefault = (
   <>
@@ -457,4 +458,65 @@ describe('EuiFlyout', () => {
       cy.get(':root').cssVar(euiPushFlyoutOffsetInlineEnd).should('not.exist');
     });
   });
+
+  describe('Focus trap shards', () => {
+    const FlyoutWithPopoverShard = () => {
+      const [isFlyoutOpen, setIsFlyoutOpen] = useState(true);
+      const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+      return (
+        <>
+          {isFlyoutOpen && (
+            <EuiFlyout
+              onClose={() => setIsFlyoutOpen(false)}
+              data-test-subj="flyoutSpec"
+              includeSelectorInFocusTrap="[data-test-subj='popover-panel']"
+            >
+              <EuiPopover
+                isOpen={isPopoverOpen}
+                closePopover={() => setIsPopoverOpen(false)}
+                button={
+                  <EuiButton
+                    data-test-subj="popover-trigger"
+                    onClick={() => setIsPopoverOpen(!isPopoverOpen)}
+                  >
+                    Toggle popover
+                  </EuiButton>
+                }
+                panelProps={{
+                  'data-test-subj': 'popover-panel',
+                }}
+              >
+                <EuiButton data-test-subj="popover-button">
+                  Popover button
+                </EuiButton>
+              </EuiPopover>
+            </EuiFlyout>
+          )}
+        </>
+      );
+    };
+
+    it('includes popover panels in the focus trap when opened', () => {
+      cy.mount(<FlyoutWithPopoverShard />);
+      cy.get('[data-test-subj="flyoutSpec"]').should('be.focused');
+
+      // 1. Open the popover.
+      cy.get('[data-test-subj="popover-trigger"]').click();
+      cy.get('[data-test-subj="popover-panel"]').should('exist');
+
+      // 2. Tab from the popover trigger into the popover content.
+      cy.get('[data-test-subj="popover-trigger"]').should('be.focused');
+      cy.realPress('Tab');
+      cy.get('[data-test-subj="popover-button"]').should('be.focused');
+
+      // 3. Tab from the popover content to the flyout close button.
+      cy.realPress('Tab');
+      cy.get('[data-test-subj="euiFlyoutCloseButton"]').should('be.focused');
+
+      // 4. Tab from the close button back to the popover trigger.
+      cy.realPress('Tab');
+      cy.get('[data-test-subj="popover-trigger"]').should('be.focused');
+    });
+  });
 });
diff --git a/packages/eui/src/components/popover/popover.tsx b/packages/eui/src/components/popover/popover.tsx
@@ -28,6 +28,7 @@ import {
   getWaitDuration,
   performOnFrame,
   htmlIdGenerator,
+  focusTrapPubSub,
 } from '../../services';
 import { setMultipleRefs } from '../../services/hooks/useCombinedRefs';
 
@@ -432,6 +433,7 @@ export class EuiPopover extends Component<Props, State> {
     this.respositionTimeout = window.setTimeout(() => {
       this.setState({ isOpenStable: true }, () => {
         this.positionPopoverFixed();
+        focusTrapPubSub.publish();
       });
     }, durationMatch + delayMatch);
   };
@@ -484,6 +486,7 @@ export class EuiPopover extends Component<Props, State> {
         this.setState({
           isClosing: false,
         });
+        focusTrapPubSub.publish();
       }, closingTransitionTime);
     }
   }
@@ -494,6 +497,7 @@ export class EuiPopover extends Component<Props, State> {
     clearTimeout(this.strandedFocusTimeout);
     clearTimeout(this.closingTransitionTimeout);
     cancelAnimationFrame(this.closingTransitionAnimationFrame!);
+    focusTrapPubSub.publish();
   }
 
   onMutation = (records: MutationRecord[]) => {
