Write tests for new EuiHeader affordance & screen reader instructions

src/components/flyout/flyout.spec.tsx

@@ -11,6 +11,7 @@
 import React, { useState } from 'react';
 
 import { EuiGlobalToastList } from '../toast';
+import { EuiHeader } from '../header';
 import { EuiFlyout } from './flyout';
 
 const childrenDefault = (
@@ -157,4 +158,56 @@ describe('EuiFlyout', () => {
         });
     });
   });
+
+  describe('EuiHeader shards', () => {
+    const FlyoutWithHeader = ({ children = childrenDefault, ...rest }) => {
+      const [isOpen, setIsOpen] = useState(false);
+
+      return (
+        <>
+          <EuiHeader position="fixed">
+            <button
+              data-test-subj="toggleFlyoutFromHeader"
+              onClick={() => setIsOpen(!isOpen)}
+            >
+              Toggle flyout
+            </button>
+          </EuiHeader>
+          {isOpen ? (
+            <EuiFlyout
+              data-test-subj="flyoutSpec"
+              onClose={() => setIsOpen(false)}
+              {...rest}
+            >
+              {children}
+            </EuiFlyout>
+          ) : null}
+        </>
+      );
+    };
+
+    it('correctly focuses on the flyout wrapper when flyouts are toggled from headers', () => {
+      cy.mount(<FlyoutWithHeader />);
+      cy.get('[data-test-subj="toggleFlyoutFromHeader"]').click();
+      cy.focused().should('have.class', 'euiFlyout');
+    });
+
+    it('automatically includes fixed EuiHeaders on the page as shards, including them in the tab rotation', () => {
+      cy.mount(<FlyoutWithHeader />);
+      cy.get('[data-test-subj="toggleFlyoutFromHeader"]').click();
+      cy.repeatRealPress('Tab', 6);
+      cy.focused().should(
+        'have.attr',
+        'data-test-subj',
+        'toggleFlyoutFromHeader'
+      );
+    });
+
+    it('does not shard fixed headers if `includeFixedHeadersInFocusTrap` is set to false', () => {
+      cy.mount(<FlyoutWithHeader includeFixedHeadersInFocusTrap={false} />);
+      cy.get('[data-test-subj="toggleFlyoutFromHeader"]').click();
+      cy.repeatRealPress('Tab', 6);
+      cy.focused().should('have.class', 'euiFlyout');
+    });
+  });
 });

src/components/flyout/flyout.test.tsx

@@ -8,9 +8,11 @@
 
 import React from 'react';
 import { mount } from 'enzyme';
+import { render } from '../../test/rtl';
 import { requiredProps, takeMountedSnapshot } from '../../test';
 import { shouldRenderCustomStyles } from '../../test/internal';
 
+import { EuiHeader } from '../header';
 import { EuiFlyout, SIZES, PADDING_SIZES, SIDES } from './flyout';
 
 jest.mock('../overlay_mask', () => ({
@@ -39,6 +41,36 @@ describe('EuiFlyout', () => {
     ).toMatchSnapshot();
   });
 
+  it('renders extra screen reader instructions when fixed EuiHeaders headers exist on the page', () => {
+    const { baseElement, queryByText, rerender } = render(
+      <>
+        <EuiHeader position="fixed" />
+        <EuiFlyout {...requiredProps} onClose={() => {}} />
+      </>
+    );
+
+    expect(baseElement).toMatchSnapshot();
+    expect(
+      queryByText(
+        'You can still continue tabbing through the page headers in addition to the dialog.',
+        { exact: false }
+      )
+    ).toBeTruthy();
+
+    // Should not shard or render instructions when `includeFixedHeadersInFocusTrap={false}
+    rerender(
+      <>
+        <EuiHeader position="fixed" />
+        <EuiFlyout onClose={() => {}} includeFixedHeadersInFocusTrap={false} />
+      </>
+    );
+    expect(
+      queryByText('You can still continue tabbing through the page headers', {
+        exact: false,
+      })
+    ).toBeFalsy();
+  });
+
   describe('props', () => {
     test('role can be removed', () => {
       const component = mount(<EuiFlyout onClose={() => {}} role={null} />);

src/components/flyout/flyout.tsx

@@ -349,6 +349,9 @@ export const EuiFlyout = forwardRef(
             resizeRef?.focus();
           }
         });
+      } else {
+        // Clear existing headers if necessary, e.g. switching to `false`
+        setFixedHeaders((headers) => (headers.length ? [] : headers));
       }
     }, [includeFixedHeadersInFocusTrap, resizeRef]);