From 8495e145efc65745c016be447525b730a314e4e5 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Thu, 21 Jan 2021 14:54:24 -0700
Subject: [PATCH 1/5] Shift focus to accordion content when expanded

---
 .../__snapshots__/accordion.test.tsx.snap          | 12 ++++++++++++
 src/components/accordion/_accordion.scss           |  4 ++++
 src/components/accordion/accordion.test.tsx        | 14 ++++++++++++++
 src/components/accordion/accordion.tsx             |  4 ++++
 4 files changed, 34 insertions(+)

diff --git a/src/components/accordion/__snapshots__/accordion.test.tsx.snap b/src/components/accordion/__snapshots__/accordion.test.tsx.snap
index 020d001c37e..7e89547f7a1 100644
--- a/src/components/accordion/__snapshots__/accordion.test.tsx.snap
+++ b/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
diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss
index 5a6d76c7fea..85df611c141 100644
--- a/src/components/accordion/_accordion.scss
+++ b/src/components/accordion/_accordion.scss
@@ -73,6 +73,10 @@
   transition:
     height $euiAnimSpeedNormal $euiAnimSlightResistance,
     opacity $euiAnimSpeedNormal $euiAnimSlightResistance;
+
+  &:focus {
+    outline: 1px solid blue;
+  }
 }
 
 $paddingSizes: (
diff --git a/src/components/accordion/accordion.test.tsx b/src/components/accordion/accordion.test.tsx
index 3b8dbde362c..039bbac909f 100644
--- a/src/components/accordion/accordion.test.tsx
+++ b/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);
+    });
   });
 });
diff --git a/src/components/accordion/accordion.tsx b/src/components/accordion/accordion.tsx
index 6d3ec3c84ef..c6f0370d588 100644
--- a/src/components/accordion/accordion.tsx
+++ b/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) => (

From bcbeffb4358ce75af9b777e7862bb409b9bdcf70 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Tue, 26 Jan 2021 09:23:35 -0700
Subject: [PATCH 2/5] Remove focus ring

---
 src/components/accordion/_accordion.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/accordion/_accordion.scss b/src/components/accordion/_accordion.scss
index 85df611c141..5a6d76c7fea 100644
--- a/src/components/accordion/_accordion.scss
+++ b/src/components/accordion/_accordion.scss
@@ -73,10 +73,6 @@
   transition:
     height $euiAnimSpeedNormal $euiAnimSlightResistance,
     opacity $euiAnimSpeedNormal $euiAnimSlightResistance;
-
-  &:focus {
-    outline: 1px solid blue;
-  }
 }
 
 $paddingSizes: (

From d6935f8ca386e8b9df2677baeefc6c3d389d8744 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Tue, 26 Jan 2021 09:56:01 -0700
Subject: [PATCH 3/5] Fix a snapshot

---
 .../__snapshots__/collapsible_nav_group.test.tsx.snap            | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap b/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
index 71d8af929ce..2512fda20ae 100644
--- a/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
+++ b/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

From cfb671e015ee12f583ec1fb075ebccf56ae2c419 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Thu, 28 Jan 2021 11:42:37 -0700
Subject: [PATCH 4/5] Add role=region and aria-labelledby to EuiAccordion's
 child wrapper

Co-authored-by: Michail Yasonik <michail@yasonik.com>
---
 src/components/accordion/accordion.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/accordion/accordion.tsx b/src/components/accordion/accordion.tsx
index c6f0370d588..e7cc1efa8a1 100644
--- a/src/components/accordion/accordion.tsx
+++ b/src/components/accordion/accordion.tsx
@@ -292,6 +292,8 @@ export class EuiAccordion extends Component<
             this.childWrapper = node;
           }}
           tabIndex={-1}
+          role="region"
+          aria-labelledby={buttonId}
           id={id}>
           <EuiResizeObserver onResize={this.setChildContentHeight}>
             {(resizeRef) => (

From 6a72bf1d10f19d9debee444d8bfa48026a1243c8 Mon Sep 17 00:00:00 2001
From: Chandler Prall <chandler.prall@gmail.com>
Date: Thu, 28 Jan 2021 12:26:28 -0700
Subject: [PATCH 5/5] snapshot updates

---
 .../__snapshots__/accordion.test.tsx.snap     | 24 +++++++++++++++++++
 .../collapsible_nav_group.test.tsx.snap       |  2 ++
 2 files changed, 26 insertions(+)

diff --git a/src/components/accordion/__snapshots__/accordion.test.tsx.snap b/src/components/accordion/__snapshots__/accordion.test.tsx.snap
index 7e89547f7a1..3f7b526ec94 100644
--- a/src/components/accordion/__snapshots__/accordion.test.tsx.snap
+++ b/src/components/accordion/__snapshots__/accordion.test.tsx.snap
@@ -44,8 +44,10 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
       </button>
     </div>
     <div
+      aria-labelledby="generated-id"
       className="euiAccordion__childWrapper"
       id="12"
+      role="region"
       tabIndex={-1}
     >
       <EuiResizeObserver
@@ -106,8 +108,10 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
       </button>
     </div>
     <div
+      aria-labelledby="generated-id"
       className="euiAccordion__childWrapper"
       id="11"
+      role="region"
       tabIndex={-1}
     >
       <EuiResizeObserver
@@ -154,8 +158,10 @@ exports[`EuiAccordion is rendered 1`] = `
     </button>
   </div>
   <div
+    aria-labelledby="generated-id"
     class="euiAccordion__childWrapper"
     id="0"
+    role="region"
     tabindex="-1"
   >
     <div>
@@ -187,8 +193,10 @@ exports[`EuiAccordion props arrowDisplay none is rendered 1`] = `
     </button>
   </div>
   <div
+    aria-labelledby="generated-id"
     class="euiAccordion__childWrapper"
     id="6"
+    role="region"
     tabindex="-1"
   >
     <div>
@@ -232,8 +240,10 @@ exports[`EuiAccordion props arrowDisplay right is rendered 1`] = `
     </button>
   </div>
   <div
+    aria-labelledby="generated-id"
     class="euiAccordion__childWrapper"
     id="5"
+    role="region"
     tabindex="-1"
   >
     <div>
@@ -281,8 +291,10 @@ exports[`EuiAccordion props buttonContent is rendered 1`] = `
     </button>
   </div>
   <div
+    aria-labelledby="generated-id"
     class="euiAccordion__childWrapper"
     id="2"
+    role="region"
     tabindex="-1"
   >
     <div>
@@ -322,8 +334,10 @@ exports[`EuiAccordion props buttonContentClassName is rendered 1`] = `
     </button>
   </div>
   <div
+    aria-labelledby="generated-id"
     class="euiAccordion__childWrapper"
     id="1"
+    role="region"
     tabindex="-1"
   >
     <div>
@@ -370,8 +384,10 @@ exports[`EuiAccordion props extraAction is rendered 1`] = `
     </div>
   </div>
   <div
+    aria-labelledby="generated-id"
     class="euiAccordion__childWrapper"
     id="3"
+    role="region"
     tabindex="-1"
   >
     <div>
@@ -411,8 +427,10 @@ exports[`EuiAccordion props forceState is rendered 1`] = `
     </button>
   </div>
   <div
+    aria-labelledby="generated-id"
     class="euiAccordion__childWrapper"
     id="7"
+    role="region"
     tabindex="-1"
   >
     <div>
@@ -456,8 +474,10 @@ exports[`EuiAccordion props initialIsOpen is rendered 1`] = `
     </button>
   </div>
   <div
+    aria-labelledby="generated-id"
     class="euiAccordion__childWrapper"
     id="4"
+    role="region"
     tabindex="-1"
   >
     <div>
@@ -508,8 +528,10 @@ exports[`EuiAccordion props isLoading is rendered 1`] = `
     </div>
   </div>
   <div
+    aria-labelledby="generated-id"
     class="euiAccordion__childWrapper"
     id="9"
+    role="region"
     tabindex="-1"
   >
     <div>
@@ -560,8 +582,10 @@ exports[`EuiAccordion props isLoadingMessage is rendered 1`] = `
     </div>
   </div>
   <div
+    aria-labelledby="generated-id"
     class="euiAccordion__childWrapper"
     id="10"
+    role="region"
     tabindex="-1"
   >
     <div>
diff --git a/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap b/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
index 2512fda20ae..c2af89b47d8 100644
--- a/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
+++ b/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
@@ -278,8 +278,10 @@ exports[`EuiCollapsibleNavGroup when isCollapsible is true will render an accord
     </button>
   </div>
   <div
+    aria-labelledby="generated-id"
     class="euiAccordion__childWrapper"
     id="id"
+    role="region"
     tabindex="-1"
   >
     <div>