[EuiFlyoutBody] Add scrollableTabIndex prop (#7061)

elastic · Aug 10, 2023 · 76e7889 · 76e7889
1 parent 99068eb
commit 76e7889
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 3 deletions.
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx b/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx
@@ -61,7 +61,7 @@ const OpenCollapsibleNav: FunctionComponent<
 export const KibanaExample: Story = {
   render: ({ ...args }) => (
     <OpenCollapsibleNav {...args}>
-      <EuiFlyoutBody>
+      <EuiFlyoutBody scrollableTabIndex={-1}>
         <EuiCollapsibleNavItem title="Home" icon="home" isSelected href="#" />
         <EuiCollapsibleNavItem
           title="Recent"
@@ -288,7 +288,7 @@ export const KibanaExample: Story = {
 export const SecurityExample: Story = {
   render: ({ ...args }) => (
     <OpenCollapsibleNav {...args}>
-      <EuiFlyoutBody>
+      <EuiFlyoutBody scrollableTabIndex={-1}>
         <EuiCollapsibleNavItem
           title="Recent"
           icon="clock"

diff --git a/src/components/flyout/flyout_body.test.tsx b/src/components/flyout/flyout_body.test.tsx
@@ -18,4 +18,13 @@ describe('EuiFlyoutBody', () => {
 
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  test('scrollableTabIndex', () => {
+    const { container } = render(<EuiFlyoutBody scrollableTabIndex={-1} />);
+
+    expect(container.querySelector('.euiFlyoutBody__overflow')).toHaveAttribute(
+      'tabIndex',
+      '-1'
+    );
+  });
 });
diff --git a/src/components/flyout/flyout_body.tsx b/src/components/flyout/flyout_body.tsx
@@ -19,13 +19,24 @@ export type EuiFlyoutBodyProps = FunctionComponent<
        * Use to display a banner at the top of the body. It is suggested to use `EuiCallOut` for it.
        */
       banner?: ReactNode;
+      /**
+       * [Scrollable regions (or their children) should be focusable](https://dequeuniversity.com/rules/axe/4.0/scrollable-region-focusable)
+       * to allow keyboard users to scroll the region via arrow keys.
+       *
+       * By default, EuiFlyoutBody's scroll overflow wrapper sets a `tabIndex` of `0`.
+       * If you know your flyout body content already contains focusable children
+       * that satisfy keyboard accessibility requirements, you can use this prop
+       * to override this default.
+       */
+      scrollableTabIndex?: number;
     }
 >;
 
 export const EuiFlyoutBody: EuiFlyoutBodyProps = ({
   children,
   className,
   banner,
+  scrollableTabIndex = 0,
   ...rest
 }) => {
   const classes = classNames('euiFlyoutBody', className);
@@ -44,7 +55,7 @@ export const EuiFlyoutBody: EuiFlyoutBodyProps = ({
   return (
     <div className={classes} css={cssStyles} {...rest}>
       <div
-        tabIndex={0}
+        tabIndex={scrollableTabIndex}
         className="euiFlyoutBody__overflow"
         css={overflowCssStyles}
       >

diff --git a/upcoming_changelogs/7061.md b/upcoming_changelogs/7061.md
@@ -0,0 +1 @@
+- Updated `EuiFlyoutBody` with a new `scrollableTabIndex` prop