Shift focus to accordion content when expanded

src/components/accordion/__snapshots__/accordion.test.tsx.snap

@@ -46,6 +46,7 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
     <div
       className="euiAccordion__childWrapper"
       id="12"
+      tabIndex={-1}
     >
       <EuiResizeObserver
         onResize={[Function]}
@@ -107,6 +108,7 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
     <div
       className="euiAccordion__childWrapper"
       id="11"
+      tabIndex={-1}
     >
       <EuiResizeObserver
         onResize={[Function]}
@@ -154,6 +156,7 @@ exports[`EuiAccordion is rendered 1`] = `
   <div
     class="euiAccordion__childWrapper"
     id="0"
+    tabindex="-1"
   >
     <div>
       <div
@@ -186,6 +189,7 @@ exports[`EuiAccordion props arrowDisplay none is rendered 1`] = `
   <div
     class="euiAccordion__childWrapper"
     id="6"
+    tabindex="-1"
   >
     <div>
       <div
@@ -230,6 +234,7 @@ exports[`EuiAccordion props arrowDisplay right is rendered 1`] = `
   <div
     class="euiAccordion__childWrapper"
     id="5"
+    tabindex="-1"
   >
     <div>
       <div
@@ -278,6 +283,7 @@ exports[`EuiAccordion props buttonContent is rendered 1`] = `
   <div
     class="euiAccordion__childWrapper"
     id="2"
+    tabindex="-1"
   >
     <div>
       <div
@@ -318,6 +324,7 @@ exports[`EuiAccordion props buttonContentClassName is rendered 1`] = `
   <div
     class="euiAccordion__childWrapper"
     id="1"
+    tabindex="-1"
   >
     <div>
       <div
@@ -365,6 +372,7 @@ exports[`EuiAccordion props extraAction is rendered 1`] = `
   <div
     class="euiAccordion__childWrapper"
     id="3"
+    tabindex="-1"
   >
     <div>
       <div
@@ -405,6 +413,7 @@ exports[`EuiAccordion props forceState is rendered 1`] = `
   <div
     class="euiAccordion__childWrapper"
     id="7"
+    tabindex="-1"
   >
     <div>
       <div
@@ -449,6 +458,7 @@ exports[`EuiAccordion props initialIsOpen is rendered 1`] = `
   <div
     class="euiAccordion__childWrapper"
     id="4"
+    tabindex="-1"
   >
     <div>
       <div
@@ -500,6 +510,7 @@ exports[`EuiAccordion props isLoading is rendered 1`] = `
   <div
     class="euiAccordion__childWrapper"
     id="9"
+    tabindex="-1"
   >
     <div>
       <div
@@ -551,6 +562,7 @@ exports[`EuiAccordion props isLoadingMessage is rendered 1`] = `
   <div
     class="euiAccordion__childWrapper"
     id="10"
+    tabindex="-1"
   >
     <div>
       <div

src/components/accordion/accordion.test.tsx

@@ -191,5 +191,19 @@ describe('EuiAccordion', () => {
       expect(onToggleHandler).toBeCalled();
       expect(onToggleHandler).toBeCalledWith(false);
     });
+
+    it('moves focus to the content when expanded', () => {
+      const component = mount<EuiAccordion>(<EuiAccordion id={getId()} />);
+      const accordionClass = component.instance();
+      const childWrapper = accordionClass.childWrapper;
+
+      expect(childWrapper).not.toBeFalsy();
+      expect(childWrapper).not.toBe(document.activeElement);
+
+      // click button
+      component.find('button').simulate('click');
+
+      expect(childWrapper).toBe(document.activeElement);
+    });
   });
 });

src/components/accordion/accordion.tsx

@@ -142,6 +142,9 @@ export class EuiAccordion extends Component<
           isOpen: !prevState.isOpen,
         }),
         () => {
+          if (this.state.isOpen && this.childWrapper) {
+            this.childWrapper.focus();
+          }
           this.props.onToggle && this.props.onToggle(this.state.isOpen);
         }
       );
@@ -288,6 +291,7 @@ export class EuiAccordion extends Component<
           ref={(node) => {
             this.childWrapper = node;
           }}
+          tabIndex={-1}
           id={id}>
           <EuiResizeObserver onResize={this.setChildContentHeight}>
             {(resizeRef) => (

src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap

@@ -280,6 +280,7 @@ exports[`EuiCollapsibleNavGroup when isCollapsible is true will render an accord
   <div
     class="euiAccordion__childWrapper"
     id="id"
+    tabindex="-1"
   >
     <div>
       <div