[EuiFlyout] Include all fixed EuiHeaders in flyout focus traps + im…

…prove screen reader accessibility (#6566) * EuiFlyout - auto-shard all fixed EuiHeaders NOT YET WORKING: autoFocus on flyout open and returnFocus * Fix flyouts toggled from header shards not correctly focusing headers + a11y improvement: mirroring popovers & modals, make the flyout wrapper focusable via `tabIndex={0}`, so that screen readers take out a beat to read out the `labelledby` and (upcoming `describedby`) instead of jumping to the close button or the first focusable child (if no close button exists) * Add screen reader instructions on interacting with the flyout - allow for custom `role`s that consumers pass in that aren't `dialog`s (likely very rare, may need more testing) * Deprecate `closeButtonAriaLabel` - use `closeButtonProps['aria-label']` instead * [chore] Remove Fragment * Write tests for new EuiHeader affordance & screen reader instructions * [PR feedback] Remove `role` prop customization, tweak SR text accordingly
elastic · Feb 3, 2023 · 7cdbe07 · 7cdbe07
1 parent bd98aaf
commit 7cdbe07
Show file tree

Hide file tree

Showing 9 changed files with 540 additions and 151 deletions.
diff --git a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
@@ -12,11 +12,20 @@ Array [
       data-focus-lock-disabled="false"
     >
       <nav
+        aria-describedby="generated-id"
         class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
+        data-autofocus="true"
         id="id"
+        role="dialog"
         style="inline-size: 320px;"
-        tabindex="-1"
+        tabindex="0"
       >
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
         <button
           aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
@@ -55,13 +64,22 @@ Array [
       data-focus-lock-disabled="false"
     >
       <nav
+        aria-describedby="generated-id"
         aria-label="aria-label"
         class="euiFlyout euiCollapsibleNav testClass1 testClass2 emotion-euiFlyout-none-noMaxWidth-overlay-left"
+        data-autofocus="true"
         data-test-subj="test subject string"
         id="id"
+        role="dialog"
         style="inline-size: 320px;"
-        tabindex="-1"
+        tabindex="0"
       >
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
         <button
           aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
@@ -97,11 +115,20 @@ Array [
     data-focus-lock-disabled="false"
   >
     <nav
+      aria-describedby="generated-id"
       class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
+      data-autofocus="true"
       id="id"
+      role="dialog"
       style="inline-size: 240px;"
-      tabindex="-1"
+      tabindex="0"
     >
+      <p
+        class="emotion-euiScreenReaderOnly"
+        id="generated-id"
+      >
+        You are in a non-modal dialog. To close the dialog, press Escape. 
+      </p>
       <button
         aria-label="Close this dialog"
         class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
@@ -142,11 +169,20 @@ Array [
       data-focus-lock-disabled="false"
     >
       <nav
+        aria-describedby="generated-id"
         class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
+        data-autofocus="true"
         id="id"
+        role="dialog"
         style="inline-size: 320px;"
-        tabindex="-1"
+        tabindex="0"
       >
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
         <button
           aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
@@ -183,11 +219,20 @@ Array [
       data-focus-lock-disabled="false"
     >
       <nav
+        aria-describedby="generated-id"
         class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
+        data-autofocus="true"
         id="id"
+        role="dialog"
         style="inline-size: 320px;"
-        tabindex="-1"
+        tabindex="0"
       >
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
         <button
           aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
@@ -224,9 +269,11 @@ Array [
   >
     <nav
       class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-left"
+      data-autofocus="true"
       id="id"
+      role="dialog"
       style="inline-size:320px"
-      tabindex="-1"
+      tabindex="0"
     />
   </div>,
   <div
@@ -249,11 +296,20 @@ Array [
       data-focus-lock-disabled="false"
     >
       <nav
+        aria-describedby="generated-id"
         class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
+        data-autofocus="true"
         id="id"
+        role="dialog"
         style="inline-size: 320px;"
-        tabindex="-1"
+        tabindex="0"
       >
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
         <button
           aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"
@@ -295,9 +351,11 @@ Array [
   >
     <nav
       class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-left"
+      data-autofocus="true"
       id="id"
+      role="dialog"
       style="inline-size: 320px;"
-      tabindex="-1"
+      tabindex="0"
     />
   </div>,
   <div
@@ -320,11 +378,20 @@ Array [
       data-focus-lock-disabled="false"
     >
       <nav
+        aria-describedby="generated-id"
         class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-overlay-left"
+        data-autofocus="true"
         id="id"
+        role="dialog"
         style="inline-size: 240px;"
-        tabindex="-1"
+        tabindex="0"
       >
+        <p
+          class="emotion-euiScreenReaderOnly"
+          id="generated-id"
+        >
+          You are in a modal dialog. Press Escape or tap/click outside the dialog on the shadowed overlay to close. 
+        </p>
         <button
           aria-label="Close this dialog"
           class="euiButtonIcon euiButtonIcon--xSmall euiFlyout__closeButton emotion-euiButtonIcon-fill-text-euiFlyout__closeButton-outside-left"

diff --git a/src/components/collapsible_nav/collapsible_nav.tsx b/src/components/collapsible_nav/collapsible_nav.tsx
@@ -24,7 +24,7 @@ import { EuiFlyout, EuiFlyoutProps } from '../flyout';
 // Extend all the flyout props except `onClose` because we handle this internally
 export type EuiCollapsibleNavProps = Omit<
   EuiFlyoutProps,
-  'closeButtonAriaLabel' | 'type' | 'pushBreakpoint'
+  'type' | 'pushBreakpoint'
 > & {
   /**
    * ReactNode to render as this component's content
@@ -65,7 +65,6 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
   as = 'nav' as EuiCollapsibleNavProps['as'],
   size = 320,
   side = 'left',
-  role = null,
   ownFocus = true,
   outsideClickCloses = true,
   closeButtonPosition = 'outside',
@@ -117,7 +116,6 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
       as={as}
       size={size}
       side={side}
-      role={role}
       ownFocus={ownFocus}
       outsideClickCloses={outsideClickCloses}
       closeButtonPosition={closeButtonPosition}