From 3cde22cfd05627eff8051c925b90834c9cd3ec5a Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Sun, 29 Apr 2018 20:54:06 -0700
Subject: [PATCH] Add role and aria attributes.

---
 .../__snapshots__/tabbed_content.test.js.snap | 90 +++++++++++++------
 .../tabs/tabbed_content/tabbed_content.js     | 36 ++++++--
 .../tabbed_content/tabbed_content.test.js     |  7 ++
 3 files changed, 102 insertions(+), 31 deletions(-)

diff --git a/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.js.snap b/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.js.snap
index 669724555463..f6a460fe5198 100644
--- a/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.js.snap
+++ b/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.js.snap
@@ -7,9 +7,10 @@ exports[`EuiTabbedContent behavior when selected tab state isn't controlled by t
     role="tablist"
   >
     <button
+      aria-controls="42-es"
       aria-selected="true"
       class="euiTab euiTab-isSelected"
-      content="[object Object]"
+      id="es"
       role="tab"
       title="Elasticsearch"
       type="button"
@@ -19,10 +20,11 @@ exports[`EuiTabbedContent behavior when selected tab state isn't controlled by t
       />
     </button>
     <button
+      aria-controls="42-kibana"
       aria-selected="false"
       class="euiTab"
-      content="[object Object]"
       data-test-subj="kibanaTab"
+      id="kibana"
       role="tab"
       title="Kibana"
       type="button"
@@ -32,9 +34,15 @@ exports[`EuiTabbedContent behavior when selected tab state isn't controlled by t
       />
     </button>
   </div>
-  <p>
-    Elasticsearch content
-  </p>
+  <div
+    aria-labelledby="es"
+    id="42-es"
+    role="tabpanel"
+  >
+    <p>
+      Elasticsearch content
+    </p>
+  </div>
 </div>
 `;
 
@@ -49,9 +57,10 @@ exports[`EuiTabbedContent is rendered 1`] = `
     role="tablist"
   >
     <button
+      aria-controls="42-es"
       aria-selected="true"
       class="euiTab euiTab-isSelected"
-      content="[object Object]"
+      id="es"
       role="tab"
       title="Elasticsearch"
       type="button"
@@ -61,10 +70,11 @@ exports[`EuiTabbedContent is rendered 1`] = `
       />
     </button>
     <button
+      aria-controls="42-kibana"
       aria-selected="false"
       class="euiTab"
-      content="[object Object]"
       data-test-subj="kibanaTab"
+      id="kibana"
       role="tab"
       title="Kibana"
       type="button"
@@ -74,9 +84,15 @@ exports[`EuiTabbedContent is rendered 1`] = `
       />
     </button>
   </div>
-  <p>
-    Elasticsearch content
-  </p>
+  <div
+    aria-labelledby="es"
+    id="42-es"
+    role="tabpanel"
+  >
+    <p>
+      Elasticsearch content
+    </p>
+  </div>
 </div>
 `;
 
@@ -87,9 +103,10 @@ exports[`EuiTabbedContent props initialSelectedTab is rendered 1`] = `
     role="tablist"
   >
     <button
+      aria-controls="42-es"
       aria-selected="false"
       class="euiTab"
-      content="[object Object]"
+      id="es"
       role="tab"
       title="Elasticsearch"
       type="button"
@@ -99,10 +116,11 @@ exports[`EuiTabbedContent props initialSelectedTab is rendered 1`] = `
       />
     </button>
     <button
+      aria-controls="42-kibana"
       aria-selected="true"
       class="euiTab euiTab-isSelected"
-      content="[object Object]"
       data-test-subj="kibanaTab"
+      id="kibana"
       role="tab"
       title="Kibana"
       type="button"
@@ -112,9 +130,15 @@ exports[`EuiTabbedContent props initialSelectedTab is rendered 1`] = `
       />
     </button>
   </div>
-  <p>
-    Kibana content
-  </p>
+  <div
+    aria-labelledby="kibana"
+    id="42-kibana"
+    role="tabpanel"
+  >
+    <p>
+      Kibana content
+    </p>
+  </div>
 </div>
 `;
 
@@ -125,9 +149,10 @@ exports[`EuiTabbedContent props selectedTab is rendered 1`] = `
     role="tablist"
   >
     <button
+      aria-controls="42-es"
       aria-selected="false"
       class="euiTab"
-      content="[object Object]"
+      id="es"
       role="tab"
       title="Elasticsearch"
       type="button"
@@ -137,10 +162,11 @@ exports[`EuiTabbedContent props selectedTab is rendered 1`] = `
       />
     </button>
     <button
+      aria-controls="42-kibana"
       aria-selected="true"
       class="euiTab euiTab-isSelected"
-      content="[object Object]"
       data-test-subj="kibanaTab"
+      id="kibana"
       role="tab"
       title="Kibana"
       type="button"
@@ -150,9 +176,15 @@ exports[`EuiTabbedContent props selectedTab is rendered 1`] = `
       />
     </button>
   </div>
-  <p>
-    Kibana content
-  </p>
+  <div
+    aria-labelledby="kibana"
+    id="42-kibana"
+    role="tabpanel"
+  >
+    <p>
+      Kibana content
+    </p>
+  </div>
 </div>
 `;
 
@@ -163,9 +195,10 @@ exports[`EuiTabbedContent props size is rendered 1`] = `
     role="tablist"
   >
     <button
+      aria-controls="42-es"
       aria-selected="true"
       class="euiTab euiTab-isSelected"
-      content="[object Object]"
+      id="es"
       role="tab"
       title="Elasticsearch"
       type="button"
@@ -175,10 +208,11 @@ exports[`EuiTabbedContent props size is rendered 1`] = `
       />
     </button>
     <button
+      aria-controls="42-kibana"
       aria-selected="false"
       class="euiTab"
-      content="[object Object]"
       data-test-subj="kibanaTab"
+      id="kibana"
       role="tab"
       title="Kibana"
       type="button"
@@ -188,8 +222,14 @@ exports[`EuiTabbedContent props size is rendered 1`] = `
       />
     </button>
   </div>
-  <p>
-    Elasticsearch content
-  </p>
+  <div
+    aria-labelledby="es"
+    id="42-es"
+    role="tabpanel"
+  >
+    <p>
+      Elasticsearch content
+    </p>
+  </div>
 </div>
 `;
diff --git a/src/components/tabs/tabbed_content/tabbed_content.js b/src/components/tabs/tabbed_content/tabbed_content.js
index 71677dd82a83..de7e1c20f030 100644
--- a/src/components/tabs/tabbed_content/tabbed_content.js
+++ b/src/components/tabs/tabbed_content/tabbed_content.js
@@ -1,13 +1,18 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types';
 
+import { htmlIdGenerator } from '../../../services';
+
 import { EuiTabs, SIZES } from '../tabs';
 import { EuiTab } from '../tab';
 
+const makeId = htmlIdGenerator();
+
 export class EuiTabbedContent extends Component {
   static propTypes = {
     className: PropTypes.string,
-    tabs: PropTypes.array.isRequired,
+    // We use the id to associate tabs with panels for accessibility.
+    tabs: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.string.isRequired })).isRequired,
     onTabClick: PropTypes.func,
     selectedTab: PropTypes.object,
     initialSelectedTab: PropTypes.object,
@@ -19,6 +24,8 @@ export class EuiTabbedContent extends Component {
 
     const { initialSelectedTab, selectedTab, tabs } = props;
 
+    this.rootId = makeId();
+
     this.state = {
       selectedTab: selectedTab || initialSelectedTab || tabs[0],
     };
@@ -47,19 +54,30 @@ export class EuiTabbedContent extends Component {
 
     // Allow the consumer to control tab selection.
     const selectedTab = externalSelectedTab || this.state.selectedTab
-    const { content } = selectedTab
+
+    const {
+      content: selectedTabContent,
+      id: selectedTabId,
+    } = selectedTab
 
     return (
       <div className={className} {...rest}>
         <EuiTabs size={size}>
           {
-          tabs.map((tab, index) => {
-            const { id, name, ...tabProps } = tab
+          tabs.map((tab) => {
+            const {
+              id,
+              name,
+              content, // eslint-disable-line no-unused-vars
+              ...tabProps
+            } = tab
             const props = {
-              key: id !== undefined ? id : index,
+              key: id,
+              id,
               ...tabProps,
               onClick: () => this.onTabClick(tab),
               isSelected: tab === selectedTab,
+              'aria-controls': `${this.rootId}-${id}`,
             };
 
             return <EuiTab {...props}>{name}</EuiTab>;
@@ -67,7 +85,13 @@ export class EuiTabbedContent extends Component {
         }
         </EuiTabs>
 
-        {content}
+        <div
+          role='tabpanel'
+          id={`${this.rootId}-${selectedTabId}`}
+          aria-labelledby={selectedTabId}
+        >
+          {selectedTabContent}
+        </div>
       </div>
     )
   }
diff --git a/src/components/tabs/tabbed_content/tabbed_content.test.js b/src/components/tabs/tabbed_content/tabbed_content.test.js
index cba61a6dda22..8e9d70228b16 100644
--- a/src/components/tabs/tabbed_content/tabbed_content.test.js
+++ b/src/components/tabs/tabbed_content/tabbed_content.test.js
@@ -5,12 +5,19 @@ import { requiredProps, findTestSubject } from '../../../test';
 
 import { EuiTabbedContent } from './tabbed_content';
 
+// Mock the htmlIdGenerator to generate predictable ids for snapshot tests
+jest.mock('../../../services/accessibility/html_id_generator', () => ({
+  htmlIdGenerator: () => { return () => 42; },
+}));
+
 const elasticsearchTab = {
+  id: 'es',
   title: `Elasticsearch`,
   content: <p>Elasticsearch content</p>,
 };
 
 const kibanaTab = {
+  id: 'kibana',
   title: `Kibana`,
   'data-test-subj': 'kibanaTab',
   content: <p>Kibana content</p>,