[EuiAccordion] Improve keyboard accessibility of tabbable children

src/components/accordion/accordion.tsx

@@ -8,6 +8,7 @@
 
 import React, { Component, HTMLAttributes, ReactNode } from 'react';
 import classNames from 'classnames';
+import { tabbable, FocusableElement } from 'tabbable';
 
 import { CommonProps } from '../common';
 
@@ -108,9 +109,13 @@ export type EuiAccordionProps = CommonProps &
     isDisabled?: boolean;
   };
 
+type EuiAccordionState = {
+  isOpen: boolean;
+};
+
 export class EuiAccordionClass extends Component<
   WithEuiThemeProps & EuiAccordionProps,
-  { isOpen: boolean }
+  EuiAccordionState
 > {
   static defaultProps = {
     initialIsOpen: false,
@@ -125,6 +130,7 @@ export class EuiAccordionClass extends Component<
 
   childContent: HTMLDivElement | null = null;
   childWrapper: HTMLDivElement | null = null;
+  tabbableChildren: FocusableElement[] | null = null;
 
   state = {
     isOpen: this.props.forceState
@@ -152,10 +158,27 @@ export class EuiAccordionClass extends Component<
 
   componentDidMount() {
     this.setChildContentHeight();
+    if (!this.isOpen) this.preventTabbing();
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(
+    prevProps: EuiAccordionProps,
+    prevState: EuiAccordionState
+  ) {
     this.setChildContentHeight();
+
+    if (
+      (prevProps.forceState === 'open' && this.props.forceState === 'closed') ||
+      (prevState.isOpen === true && this.state.isOpen === false)
+    ) {
+      this.preventTabbing();
+    }
+    if (
+      (prevProps.forceState === 'closed' && this.props.forceState === 'open') ||
+      (prevState.isOpen === false && this.state.isOpen === true)
+    ) {
+      this.enableTabbing();
+    }
   }
 
   onToggle = () => {
@@ -177,6 +200,43 @@ export class EuiAccordionClass extends Component<
     }
   };
 
+  // When accordions are closed, tabbable children should not be present in the tab order
+  preventTabbing = () => {
+    if (this.childContent) {
+      // Re-check for children on every close - content can change dynamically
+      this.tabbableChildren = tabbable(this.childContent);
+
+      this.tabbableChildren.forEach((element) => {
+        // If the element has an existing `tabIndex` set, make sure we can restore it
+        const originalTabIndex = element.getAttribute('tabIndex');
+        if (originalTabIndex) {
+          element.setAttribute('data-original-tabindex', originalTabIndex);
+        }
+
+        element.setAttribute('tabIndex', '-1');
+      });
+    }
+  };
+
+  enableTabbing = () => {
+    // If no tabbable children were set, we don't need to re-enable anything
+    if (this.tabbableChildren) {
+      this.tabbableChildren.forEach((element) => {
+        const originalTabIndex = element.getAttribute('data-original-tabindex');
+        if (originalTabIndex) {
+          // If the element originally had an existing `tabIndex` set, restore it
+          element.setAttribute('tabIndex', originalTabIndex);
+          element.removeAttribute('data-original-tabindex');
+        } else {
+          // If not, remove the tabIndex property
+          element.removeAttribute('tabIndex');
+        }
+      });
+      // Cleanup - unset the list of children
+      this.tabbableChildren = null;
+    }
+  };
+
   setChildContentRef = (node: HTMLDivElement | null) => {
     this.childContent = node;
   };