From 36f91ad5896329119707b6d37d86bdfc9bcbb989 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Fri, 11 May 2018 10:12:11 -0700
Subject: [PATCH 01/17] pagination labeling fixes #735

---
 src/components/pagination/pagination.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pagination/pagination.js b/src/components/pagination/pagination.js
index 70b0c7f9663..e8a98446a1b 100644
--- a/src/components/pagination/pagination.js
+++ b/src/components/pagination/pagination.js
@@ -102,7 +102,7 @@ export const EuiPagination = ({
     <EuiButtonIcon
       onClick={onPageClick.bind(null, activePage + 1)}
       iconType="arrowRight"
-      aria-label="Previous"
+      aria-label="Next"
       disabled={activePage === pageCount - 1}
       color="text"
     />

From e39a031f59e8cbe2ac2f305ff3816b4db33c7107 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Fri, 11 May 2018 11:17:45 -0700
Subject: [PATCH 02/17] fixes #621 adds menubar roles to side nav

---
 src-docs/src/components/guide_page/guide_page_chrome.js | 8 ++++++--
 src/components/side_nav/side_nav.js                     | 2 +-
 src/components/side_nav/side_nav_item.js                | 3 +++
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src-docs/src/components/guide_page/guide_page_chrome.js b/src-docs/src/components/guide_page/guide_page_chrome.js
index 84777ae528d..ae07508e38d 100644
--- a/src-docs/src/components/guide_page/guide_page_chrome.js
+++ b/src-docs/src/components/guide_page/guide_page_chrome.js
@@ -93,11 +93,15 @@ export class GuidePageChrome extends Component {
   }
 
   renderSubSections = (subSections = []) => {
-    if (subSections.length <= 1) {
+    console.log(subSections);
+
+    const subSectionsWithTitles = subSections.filter(item => (item.title));
+
+    if (subSectionsWithTitles.length <= 1) {
       return;
     }
 
-    return subSections.map(({ title, id }) => ({
+    return subSectionsWithTitles.map(({ title, id }) => ({
       id: `subSection-${id}`,
       name: title,
       onClick: this.onClickLink.bind(this, id),
diff --git a/src/components/side_nav/side_nav.js b/src/components/side_nav/side_nav.js
index f8d92694571..1d28495bd5a 100644
--- a/src/components/side_nav/side_nav.js
+++ b/src/components/side_nav/side_nav.js
@@ -123,7 +123,7 @@ export class EuiSideNav extends Component {
         </button>
 
         {/* Hidden from view in mobile, but toggled from the button above */}
-        <div className="euiSideNav__content">
+        <div className="euiSideNav__content" role="menubar">
           {nav}
         </div>
       </nav>
diff --git a/src/components/side_nav/side_nav_item.js b/src/components/side_nav/side_nav_item.js
index 5d5f216a56f..4d5610bfbe8 100644
--- a/src/components/side_nav/side_nav_item.js
+++ b/src/components/side_nav/side_nav_item.js
@@ -15,6 +15,7 @@ const defaultRenderItem = ({ href, onClick, className, children, ...rest }) => {
         className={className}
         href={href}
         onClick={onClick}
+        role="menuitem"
         {...rest}
       >
         {children}
@@ -27,6 +28,7 @@ const defaultRenderItem = ({ href, onClick, className, children, ...rest }) => {
       <button
         className={className}
         onClick={onClick}
+        role="menuitem"
         {...rest}
       >
         {children}
@@ -37,6 +39,7 @@ const defaultRenderItem = ({ href, onClick, className, children, ...rest }) => {
   return (
     <div
       className={className}
+      aria-label={children}
       {...rest}
     >
       {children}

From 48b16d8774bc6083f3eeacc4cb4c12d11307ecd7 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Fri, 11 May 2018 11:28:43 -0700
Subject: [PATCH 03/17] fixes #734, adds more descriptive aria labeling for
 pagination

---
 src/components/pagination/pagination.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/pagination/pagination.js b/src/components/pagination/pagination.js
index e8a98446a1b..c3535c00589 100644
--- a/src/components/pagination/pagination.js
+++ b/src/components/pagination/pagination.js
@@ -29,6 +29,7 @@ export const EuiPagination = ({
         key={index}
         onClick={onPageClick.bind(null, i)}
         hideOnMobile
+        aria-label={`Page ${i + 1} of ${lastPageInRange}`}
       >
         {i + 1}
       </EuiPaginationButton>
@@ -42,7 +43,7 @@ export const EuiPagination = ({
       iconType="arrowLeft"
       disabled={activePage === 0}
       color="text"
-      aria-label="Previous"
+      aria-label="Previous page"
     />
   );
 
@@ -54,6 +55,7 @@ export const EuiPagination = ({
         key="0"
         onClick={onPageClick.bind(null, 0)}
         hideOnMobile
+        aria-label={`Page 1 of ${lastPageInRange}`}
       >
         1
       </EuiPaginationButton>
@@ -65,6 +67,7 @@ export const EuiPagination = ({
           key="beginningEllipsis"
           isPlaceholder
           hideOnMobile
+          aria-hidden
         >
           <span>&hellip;</span>
         </EuiPaginationButton>
@@ -81,6 +84,7 @@ export const EuiPagination = ({
           key="endingEllipsis"
           isPlaceholder
           hideOnMobile
+          aria-hidden
         >
           <span>&hellip;</span>
         </EuiPaginationButton>
@@ -92,6 +96,7 @@ export const EuiPagination = ({
         key={pageCount - 1}
         onClick={onPageClick.bind(null, pageCount - 1)}
         hideOnMobile
+        aria-label={`Jump to the last page, number ${pageCount}`}
       >
         {pageCount}
       </EuiPaginationButton>
@@ -102,7 +107,7 @@ export const EuiPagination = ({
     <EuiButtonIcon
       onClick={onPageClick.bind(null, activePage + 1)}
       iconType="arrowRight"
-      aria-label="Next"
+      aria-label="Next page"
       disabled={activePage === pageCount - 1}
       color="text"
     />
@@ -124,6 +129,7 @@ export const EuiPagination = ({
       return (
         <div
           className={classes}
+          role="group"
           {...rest}
         >
           {previousButton}

From 5355ddf7d724e32e607cceb3916e2035dae1daba Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Fri, 11 May 2018 11:30:18 -0700
Subject: [PATCH 04/17] update snapshots

---
 .../__snapshots__/side_nav.test.js.snap       | 24 +++++++++++++++++++
 .../__snapshots__/side_nav_item.test.js.snap  |  4 ++++
 2 files changed, 28 insertions(+)

diff --git a/src/components/side_nav/__snapshots__/side_nav.test.js.snap b/src/components/side_nav/__snapshots__/side_nav.test.js.snap
index 7e64cfd2904..ec93110d54f 100644
--- a/src/components/side_nav/__snapshots__/side_nav.test.js.snap
+++ b/src/components/side_nav/__snapshots__/side_nav.test.js.snap
@@ -39,6 +39,7 @@ exports[`EuiSideNav is rendered 1`] = `
   </button>
   <div
     class="euiSideNav__content"
+    role="menubar"
   />
 </nav>
 `;
@@ -80,6 +81,7 @@ exports[`EuiSideNav props isOpenOnMobile defaults to false 1`] = `
   </button>
   <div
     class="euiSideNav__content"
+    role="menubar"
   />
 </nav>
 `;
@@ -121,6 +123,7 @@ exports[`EuiSideNav props isOpenOnMobile is rendered when specified as true 1`]
   </button>
   <div
     class="euiSideNav__content"
+    role="menubar"
   />
 </nav>
 `;
@@ -162,11 +165,13 @@ exports[`EuiSideNav props items is rendered 1`] = `
   </button>
   <div
     class="euiSideNav__content"
+    role="menubar"
   >
     <div
       class="euiSideNavItem euiSideNavItem--root euiSideNavItem--hasChildItems"
     >
       <div
+        aria-label="[object Object]"
         class="euiSideNavItemButton"
       >
         <span
@@ -186,6 +191,7 @@ exports[`EuiSideNav props items is rendered 1`] = `
           class="euiSideNavItem euiSideNavItem--trunk"
         >
           <div
+            aria-label="[object Object]"
             class="euiSideNavItemButton"
           >
             <span
@@ -203,6 +209,7 @@ exports[`EuiSideNav props items is rendered 1`] = `
           class="euiSideNavItem euiSideNavItem--trunk"
         >
           <div
+            aria-label="[object Object]"
             class="euiSideNavItemButton"
           >
             <span
@@ -278,11 +285,13 @@ exports[`EuiSideNav props items renders items having { forceOpen: true } in open
   </button>
   <div
     class="euiSideNav__content"
+    role="menubar"
   >
     <div
       class="euiSideNavItem euiSideNavItem--root euiSideNavItem--hasChildItems"
     >
       <div
+        aria-label="[object Object]"
         class="euiSideNavItemButton"
       >
         <span
@@ -302,6 +311,7 @@ exports[`EuiSideNav props items renders items having { forceOpen: true } in open
           class="euiSideNavItem euiSideNavItem--trunk"
         >
           <div
+            aria-label="[object Object]"
             class="euiSideNavItemButton"
           >
             <span
@@ -319,6 +329,7 @@ exports[`EuiSideNav props items renders items having { forceOpen: true } in open
           class="euiSideNavItem euiSideNavItem--trunk euiSideNavItem--hasChildItems"
         >
           <div
+            aria-label="[object Object]"
             class="euiSideNavItemButton euiSideNavItemButton-isOpen"
           >
             <span
@@ -338,6 +349,7 @@ exports[`EuiSideNav props items renders items having { forceOpen: true } in open
               class="euiSideNavItem euiSideNavItem--branch euiSideNavItem--hasChildItems"
             >
               <div
+                aria-label="[object Object]"
                 class="euiSideNavItemButton euiSideNavItemButton-isOpen"
               >
                 <span
@@ -357,6 +369,7 @@ exports[`EuiSideNav props items renders items having { forceOpen: true } in open
                   class="euiSideNavItem euiSideNavItem--branch"
                 >
                   <div
+                    aria-label="[object Object]"
                     class="euiSideNavItemButton"
                   >
                     <span
@@ -417,6 +430,7 @@ exports[`EuiSideNav props items renders items using a specified callback 1`] = `
   </button>
   <div
     class="euiSideNav__content"
+    role="menubar"
   >
     <div
       class="euiSideNavItem euiSideNavItem--root euiSideNavItem--hasChildItems"
@@ -500,6 +514,7 @@ exports[`EuiSideNav props items renders items which are links 1`] = `
   </button>
   <div
     class="euiSideNav__content"
+    role="menubar"
   >
     <div
       class="euiSideNavItem euiSideNavItem--root euiSideNavItem--hasChildItems"
@@ -507,6 +522,7 @@ exports[`EuiSideNav props items renders items which are links 1`] = `
       <a
         class="euiSideNavItemButton euiSideNavItemButton--isClickable"
         href="http://www.elastic.co"
+        role="menuitem"
       >
         <span
           class="euiSideNavItemButton__content"
@@ -525,6 +541,7 @@ exports[`EuiSideNav props items renders items which are links 1`] = `
           class="euiSideNavItem euiSideNavItem--trunk"
         >
           <div
+            aria-label="[object Object]"
             class="euiSideNavItemButton"
           >
             <span
@@ -542,6 +559,7 @@ exports[`EuiSideNav props items renders items which are links 1`] = `
           class="euiSideNavItem euiSideNavItem--trunk"
         >
           <div
+            aria-label="[object Object]"
             class="euiSideNavItemButton"
           >
             <span
@@ -617,11 +635,13 @@ exports[`EuiSideNav props items renders selected item and automatically opens pa
   </button>
   <div
     class="euiSideNav__content"
+    role="menubar"
   >
     <div
       class="euiSideNavItem euiSideNavItem--root euiSideNavItem--hasChildItems"
     >
       <div
+        aria-label="[object Object]"
         class="euiSideNavItemButton"
       >
         <span
@@ -641,6 +661,7 @@ exports[`EuiSideNav props items renders selected item and automatically opens pa
           class="euiSideNavItem euiSideNavItem--trunk"
         >
           <div
+            aria-label="[object Object]"
             class="euiSideNavItemButton"
           >
             <span
@@ -658,6 +679,7 @@ exports[`EuiSideNav props items renders selected item and automatically opens pa
           class="euiSideNavItem euiSideNavItem--trunk euiSideNavItem--hasChildItems"
         >
           <div
+            aria-label="[object Object]"
             class="euiSideNavItemButton euiSideNavItemButton-isOpen"
           >
             <span
@@ -677,6 +699,7 @@ exports[`EuiSideNav props items renders selected item and automatically opens pa
               class="euiSideNavItem euiSideNavItem--branch"
             >
               <div
+                aria-label="[object Object]"
                 class="euiSideNavItemButton euiSideNavItemButton-isSelected"
               >
                 <span
@@ -694,6 +717,7 @@ exports[`EuiSideNav props items renders selected item and automatically opens pa
               class="euiSideNavItem euiSideNavItem--branch"
             >
               <div
+                aria-label="[object Object]"
                 class="euiSideNavItemButton"
               >
                 <span
diff --git a/src/components/side_nav/__snapshots__/side_nav_item.test.js.snap b/src/components/side_nav/__snapshots__/side_nav_item.test.js.snap
index fbd52c9f2f5..a0a88b50435 100644
--- a/src/components/side_nav/__snapshots__/side_nav_item.test.js.snap
+++ b/src/components/side_nav/__snapshots__/side_nav_item.test.js.snap
@@ -5,6 +5,7 @@ exports[`EuiSideNavItem is rendered 1`] = `
   class="euiSideNavItem"
 >
   <div
+    aria-label="[object Object]"
     class="euiSideNavItemButton"
   >
     <span
@@ -29,6 +30,7 @@ exports[`EuiSideNavItem isSelected defaults to false 1`] = `
   class="euiSideNavItem"
 >
   <div
+    aria-label="[object Object]"
     class="euiSideNavItemButton"
   >
     <span
@@ -49,6 +51,7 @@ exports[`EuiSideNavItem isSelected is rendered when specified as true 1`] = `
   class="euiSideNavItem"
 >
   <div
+    aria-label="[object Object]"
     class="euiSideNavItemButton euiSideNavItemButton-isSelected"
   >
     <span
@@ -69,6 +72,7 @@ exports[`EuiSideNavItem preserves child's classes 1`] = `
   class="euiSideNavItem"
 >
   <div
+    aria-label="[object Object]"
     class="euiSideNavItemButton"
   >
     <span

From b8639bc6d49c004d1d7012c20256d89bbf7ed3c7 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Fri, 11 May 2018 11:46:32 -0700
Subject: [PATCH 05/17] fixes #729, apply aria-live to popovers

---
 src/components/popover/__snapshots__/popover.test.js.snap | 5 +++++
 src/components/popover/popover.js                         | 1 +
 2 files changed, 6 insertions(+)

diff --git a/src/components/popover/__snapshots__/popover.test.js.snap b/src/components/popover/__snapshots__/popover.test.js.snap
index 571c235a437..909a477252d 100644
--- a/src/components/popover/__snapshots__/popover.test.js.snap
+++ b/src/components/popover/__snapshots__/popover.test.js.snap
@@ -78,6 +78,7 @@ exports[`EuiPopover props isOpen renders true 1`] = `
   />
   <div>
     <div
+      aria-live="assertive"
       class="euiPanel euiPanel--paddingMedium euiPanel--shadow euiPopover__panel"
       id="8"
     />
@@ -95,6 +96,7 @@ exports[`EuiPopover props ownFocus defaults to false 1`] = `
   />
   <div>
     <div
+      aria-live="assertive"
       class="euiPanel euiPanel--paddingMedium euiPanel--shadow euiPopover__panel"
       id="9"
     />
@@ -112,6 +114,7 @@ exports[`EuiPopover props ownFocus renders true 1`] = `
   />
   <div>
     <div
+      aria-live="assertive"
       class="euiPanel euiPanel--paddingMedium euiPanel--shadow euiPopover__panel"
       id="10"
       tabindex="0"
@@ -130,6 +133,7 @@ exports[`EuiPopover props panelClassName is rendered 1`] = `
   />
   <div>
     <div
+      aria-live="assertive"
       class="euiPanel euiPanel--paddingMedium euiPanel--shadow euiPopover__panel test"
       id="11"
     />
@@ -147,6 +151,7 @@ exports[`EuiPopover props panelPaddingSize is rendered 1`] = `
   />
   <div>
     <div
+      aria-live="assertive"
       class="euiPanel euiPanel--paddingSmall euiPanel--shadow euiPopover__panel"
       id="12"
     />
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 7e6d00b6b7e..4b149091709 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -172,6 +172,7 @@ export class EuiPopover extends Component {
             tabIndex={tabIndex}
             hasShadow
             id={id}
+            aria-live="assertive"
           >
             {children}
           </EuiPanel>

From 81ada2804879c3304f64779c7785f97a0b2a8ff5 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Fri, 11 May 2018 12:09:09 -0700
Subject: [PATCH 06/17] fixes #723, provides screen reader notice for bottom
 bar appearance

---
 .../__snapshots__/bottom_bar.test.js.snap     | 78 ++++++++++++++-----
 src/components/bottom_bar/bottom_bar.js       | 10 +++
 2 files changed, 69 insertions(+), 19 deletions(-)

diff --git a/src/components/bottom_bar/__snapshots__/bottom_bar.test.js.snap b/src/components/bottom_bar/__snapshots__/bottom_bar.test.js.snap
index d37a045e36c..fd83f2479b8 100644
--- a/src/components/bottom_bar/__snapshots__/bottom_bar.test.js.snap
+++ b/src/components/bottom_bar/__snapshots__/bottom_bar.test.js.snap
@@ -1,35 +1,75 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiBottomBar is rendered 1`] = `
-<div
-  aria-label="aria-label"
-  class="euiBottomBar euiBottomBar--paddingMedium testClass1 testClass2"
-  data-test-subj="test subject string"
->
-  Content
-</div>
+Array [
+  <p
+    aria-live="assertive"
+    class="euiScreenReaderOnly"
+  >
+    There is a new menu opening with page level controls at the bottom of the document.
+  </p>,
+  <div
+    aria-label="aria-label"
+    class="euiBottomBar euiBottomBar--paddingMedium testClass1 testClass2"
+    data-test-subj="test subject string"
+  >
+    Content
+  </div>,
+]
 `;
 
 exports[`EuiBottomBar props paddingSize l is rendered 1`] = `
-<div
-  class="euiBottomBar euiBottomBar--paddingLarge"
-/>
+Array [
+  <p
+    aria-live="assertive"
+    class="euiScreenReaderOnly"
+  >
+    There is a new menu opening with page level controls at the bottom of the document.
+  </p>,
+  <div
+    class="euiBottomBar euiBottomBar--paddingLarge"
+  />,
+]
 `;
 
 exports[`EuiBottomBar props paddingSize m is rendered 1`] = `
-<div
-  class="euiBottomBar euiBottomBar--paddingMedium"
-/>
+Array [
+  <p
+    aria-live="assertive"
+    class="euiScreenReaderOnly"
+  >
+    There is a new menu opening with page level controls at the bottom of the document.
+  </p>,
+  <div
+    class="euiBottomBar euiBottomBar--paddingMedium"
+  />,
+]
 `;
 
 exports[`EuiBottomBar props paddingSize none is rendered 1`] = `
-<div
-  class="euiBottomBar"
-/>
+Array [
+  <p
+    aria-live="assertive"
+    class="euiScreenReaderOnly"
+  >
+    There is a new menu opening with page level controls at the bottom of the document.
+  </p>,
+  <div
+    class="euiBottomBar"
+  />,
+]
 `;
 
 exports[`EuiBottomBar props paddingSize s is rendered 1`] = `
-<div
-  class="euiBottomBar euiBottomBar--paddingSmall"
-/>
+Array [
+  <p
+    aria-live="assertive"
+    class="euiScreenReaderOnly"
+  >
+    There is a new menu opening with page level controls at the bottom of the document.
+  </p>,
+  <div
+    class="euiBottomBar euiBottomBar--paddingSmall"
+  />,
+]
 `;
diff --git a/src/components/bottom_bar/bottom_bar.js b/src/components/bottom_bar/bottom_bar.js
index cc93bb01028..0536e8e190b 100644
--- a/src/components/bottom_bar/bottom_bar.js
+++ b/src/components/bottom_bar/bottom_bar.js
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import { EuiPortal } from '../portal';
+import { EuiScreenReaderOnly } from '../accessibility';
 
 const paddingSizeToClassNameMap = {
   none: null,
@@ -32,6 +33,10 @@ export class EuiBottomBar extends Component {
     }
   }
 
+  handleScreenReaderFocus() {
+    this.bar.focus();
+  }
+
   render() {
     const {
       children,
@@ -50,6 +55,11 @@ export class EuiBottomBar extends Component {
 
     return (
       <EuiPortal>
+        <EuiScreenReaderOnly>
+          <p aria-live="assertive">
+            There is a new menu opening with page level controls at the bottom of the document.
+          </p>
+        </EuiScreenReaderOnly>
         <div
           className={classes}
           ref={node => { this.bar = node; }}

From 3614a0e2e6c0d21ab0851d75ce84bdeef7344057 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Fri, 11 May 2018 13:18:17 -0700
Subject: [PATCH 07/17] fix ownFocus needing to be true for non-context menu
 sitations. apply aria labels depending upon ownFocus state

---
 src-docs/src/views/popover/popover.js |  1 -
 src/components/popover/popover.js     | 14 ++++++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src-docs/src/views/popover/popover.js b/src-docs/src/views/popover/popover.js
index ed7f2748d8b..ce322020a0e 100644
--- a/src-docs/src/views/popover/popover.js
+++ b/src-docs/src/views/popover/popover.js
@@ -42,7 +42,6 @@ export default class extends Component {
     return (
       <EuiPopover
         id="popover"
-        ownFocus
         button={button}
         isOpen={this.state.isPopoverOpen}
         closePopover={this.closePopover.bind(this)}
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 4b149091709..41d995ac8f7 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -152,14 +152,20 @@ export class EuiPopover extends Component {
     if (isOpen || this.state.isClosing) {
       let tabIndex;
       let initialFocus;
+      let ariaLive;
 
       if (ownFocus) {
         tabIndex = '0';
+        ariaLive = 'off';
+
         initialFocus = () => this.panel;
+      } else {
+        ariaLive = 'assertive';
       }
 
       panel = (
         <FocusTrap
+          active={ownFocus}
           focusTrapOptions={{
             clickOutsideDeactivates: true,
             initialFocus,
@@ -171,8 +177,7 @@ export class EuiPopover extends Component {
             paddingSize={panelPaddingSize}
             tabIndex={tabIndex}
             hasShadow
-            id={id}
-            aria-live="assertive"
+            aria-live={ariaLive}
           >
             {children}
           </EuiPanel>
@@ -188,10 +193,7 @@ export class EuiPopover extends Component {
           ref={popoverRef}
           {...rest}
         >
-          {cloneElement(button, {
-            'aria-controls': id,
-            'aria-expanded': !!isOpen,
-          })}
+          {button}
           {panel}
         </div>
       </EuiOutsideClickDetector>

From 7b36ccf569b4c9ac6e418eede5ea7ecc88ca7db6 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Fri, 11 May 2018 13:20:53 -0700
Subject: [PATCH 08/17] feedback

---
 src-docs/src/components/guide_page/guide_page_chrome.js | 1 -
 src/components/bottom_bar/bottom_bar.js                 | 4 ----
 2 files changed, 5 deletions(-)

diff --git a/src-docs/src/components/guide_page/guide_page_chrome.js b/src-docs/src/components/guide_page/guide_page_chrome.js
index ae07508e38d..57763bc3b5f 100644
--- a/src-docs/src/components/guide_page/guide_page_chrome.js
+++ b/src-docs/src/components/guide_page/guide_page_chrome.js
@@ -93,7 +93,6 @@ export class GuidePageChrome extends Component {
   }
 
   renderSubSections = (subSections = []) => {
-    console.log(subSections);
 
     const subSectionsWithTitles = subSections.filter(item => (item.title));
 
diff --git a/src/components/bottom_bar/bottom_bar.js b/src/components/bottom_bar/bottom_bar.js
index 0536e8e190b..c770a73110e 100644
--- a/src/components/bottom_bar/bottom_bar.js
+++ b/src/components/bottom_bar/bottom_bar.js
@@ -33,10 +33,6 @@ export class EuiBottomBar extends Component {
     }
   }
 
-  handleScreenReaderFocus() {
-    this.bar.focus();
-  }
-
   render() {
     const {
       children,

From 4cf3206b645b95792fd4bb77202a7cd512c53c4d Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Fri, 11 May 2018 13:24:13 -0700
Subject: [PATCH 09/17] fixes #616 adds home page label

---
 src-docs/src/components/guide_page/guide_page_chrome.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src-docs/src/components/guide_page/guide_page_chrome.js b/src-docs/src/components/guide_page/guide_page_chrome.js
index 57763bc3b5f..c60ec28488e 100644
--- a/src-docs/src/components/guide_page/guide_page_chrome.js
+++ b/src-docs/src/components/guide_page/guide_page_chrome.js
@@ -71,6 +71,7 @@ export class GuidePageChrome extends Component {
       <Link
         to="/"
         className="guideLogo"
+        aria-label="Go to home page"
       >
         <EuiIcon type="logoElastic" size="l" />
       </Link>

From fdd9acdc82e945a16f1d41796dcc7daaa8842733 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Fri, 11 May 2018 13:30:06 -0700
Subject: [PATCH 10/17] fixes #687, documentation button labeling

---
 src-docs/src/views/guidelines/button.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src-docs/src/views/guidelines/button.js b/src-docs/src/views/guidelines/button.js
index 1d2da8d6c40..295bf5a5a82 100644
--- a/src-docs/src/views/guidelines/button.js
+++ b/src-docs/src/views/guidelines/button.js
@@ -287,9 +287,9 @@ export default() => (
         frame="frame"
       >
         <div>
-          <EuiButtonIcon size="s" iconType="pencil" aria-label="Next"/>
+          <EuiButtonIcon size="s" iconType="pencil" aria-label="Edit"/>
           &nbsp;&nbsp;&nbsp;&nbsp;
-          <EuiButtonIcon size="s" iconType="expand" aria-label="Next"/>
+          <EuiButtonIcon size="s" iconType="expand" aria-label="Expand"/>
         </div>
       </GuideRuleExample>
       <GuideRuleExample
@@ -300,11 +300,11 @@ export default() => (
       >
         <div>
           <EuiButton>
-            <EuiIcon type="pencil"/>
+            <EuiIcon type="pencil" aria-label="Edit" />
           </EuiButton>
           &nbsp;&nbsp;&nbsp;&nbsp;
-          <EuiButton >
-            <EuiIcon type="expand"/>
+          <EuiButton>
+            <EuiIcon type="expand" aria-label="Expand" />
           </EuiButton>
         </div>
       </GuideRuleExample>

From bddb74e5471963dbd0c60c92a3b1a387fe1dd44c Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Fri, 11 May 2018 13:30:49 -0700
Subject: [PATCH 11/17] snapshot updates

---
 .../__snapshots__/popover.test.js.snap        | 67 ++++---------------
 .../table_sort_mobile.test.js.snap            |  2 -
 .../table_pagination.test.js.snap             |  2 -
 3 files changed, 13 insertions(+), 58 deletions(-)

diff --git a/src/components/popover/__snapshots__/popover.test.js.snap b/src/components/popover/__snapshots__/popover.test.js.snap
index 909a477252d..f152ad694c8 100644
--- a/src/components/popover/__snapshots__/popover.test.js.snap
+++ b/src/components/popover/__snapshots__/popover.test.js.snap
@@ -4,10 +4,7 @@ exports[`EuiPopover children is rendered 1`] = `
 <div
   class="euiPopover euiPopover--anchorDownCenter"
 >
-  <button
-    aria-controls="1"
-    aria-expanded="false"
-  />
+  <button />
 </div>
 `;
 
@@ -17,10 +14,7 @@ exports[`EuiPopover is rendered 1`] = `
   class="euiPopover euiPopover--anchorDownCenter testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  <button
-    aria-controls="0"
-    aria-expanded="false"
-  />
+  <button />
 </div>
 `;
 
@@ -28,10 +22,7 @@ exports[`EuiPopover props anchorPosition defaults to centerDown 1`] = `
 <div
   class="euiPopover euiPopover--anchorDownCenter"
 >
-  <button
-    aria-controls="4"
-    aria-expanded="false"
-  />
+  <button />
 </div>
 `;
 
@@ -39,10 +30,7 @@ exports[`EuiPopover props anchorPosition downRight is rendered 1`] = `
 <div
   class="euiPopover euiPopover--anchorDownRight"
 >
-  <button
-    aria-controls="6"
-    aria-expanded="false"
-  />
+  <button />
 </div>
 `;
 
@@ -50,10 +38,7 @@ exports[`EuiPopover props anchorPosition leftCenter is rendered 1`] = `
 <div
   class="euiPopover euiPopover--anchorLeftCenter"
 >
-  <button
-    aria-controls="5"
-    aria-expanded="false"
-  />
+  <button />
 </div>
 `;
 
@@ -61,10 +46,7 @@ exports[`EuiPopover props isOpen defaults to false 1`] = `
 <div
   class="euiPopover euiPopover--anchorDownCenter"
 >
-  <button
-    aria-controls="7"
-    aria-expanded="false"
-  />
+  <button />
 </div>
 `;
 
@@ -72,15 +54,11 @@ exports[`EuiPopover props isOpen renders true 1`] = `
 <div
   class="euiPopover euiPopover--anchorDownCenter"
 >
-  <button
-    aria-controls="8"
-    aria-expanded="true"
-  />
+  <button />
   <div>
     <div
       aria-live="assertive"
       class="euiPanel euiPanel--paddingMedium euiPanel--shadow euiPopover__panel"
-      id="8"
     />
   </div>
 </div>
@@ -90,15 +68,11 @@ exports[`EuiPopover props ownFocus defaults to false 1`] = `
 <div
   class="euiPopover euiPopover--anchorDownCenter"
 >
-  <button
-    aria-controls="9"
-    aria-expanded="true"
-  />
+  <button />
   <div>
     <div
       aria-live="assertive"
       class="euiPanel euiPanel--paddingMedium euiPanel--shadow euiPopover__panel"
-      id="9"
     />
   </div>
 </div>
@@ -108,15 +82,11 @@ exports[`EuiPopover props ownFocus renders true 1`] = `
 <div
   class="euiPopover euiPopover--anchorDownCenter"
 >
-  <button
-    aria-controls="10"
-    aria-expanded="true"
-  />
+  <button />
   <div>
     <div
-      aria-live="assertive"
+      aria-live="off"
       class="euiPanel euiPanel--paddingMedium euiPanel--shadow euiPopover__panel"
-      id="10"
       tabindex="0"
     />
   </div>
@@ -127,15 +97,11 @@ exports[`EuiPopover props panelClassName is rendered 1`] = `
 <div
   class="euiPopover euiPopover--anchorDownCenter"
 >
-  <button
-    aria-controls="11"
-    aria-expanded="true"
-  />
+  <button />
   <div>
     <div
       aria-live="assertive"
       class="euiPanel euiPanel--paddingMedium euiPanel--shadow euiPopover__panel test"
-      id="11"
     />
   </div>
 </div>
@@ -145,15 +111,11 @@ exports[`EuiPopover props panelPaddingSize is rendered 1`] = `
 <div
   class="euiPopover euiPopover--anchorDownCenter"
 >
-  <button
-    aria-controls="12"
-    aria-expanded="true"
-  />
+  <button />
   <div>
     <div
       aria-live="assertive"
       class="euiPanel euiPanel--paddingSmall euiPanel--shadow euiPopover__panel"
-      id="12"
     />
   </div>
 </div>
@@ -163,9 +125,6 @@ exports[`EuiPopover props withTitle is rendered 1`] = `
 <div
   class="euiPopover euiPopover--anchorDownCenter euiPopover--withTitle"
 >
-  <button
-    aria-controls="2"
-    aria-expanded="false"
-  />
+  <button />
 </div>
 `;
diff --git a/src/components/table/mobile/__snapshots__/table_sort_mobile.test.js.snap b/src/components/table/mobile/__snapshots__/table_sort_mobile.test.js.snap
index 7d5d768503d..d18722d2399 100644
--- a/src/components/table/mobile/__snapshots__/table_sort_mobile.test.js.snap
+++ b/src/components/table/mobile/__snapshots__/table_sort_mobile.test.js.snap
@@ -10,8 +10,6 @@ exports[`EuiTableSortMobile is rendered 1`] = `
     data-test-subj="test subject string"
   >
     <button
-      aria-controls="sortPopover"
-      aria-expanded="false"
       class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiButtonEmpty--flushRight"
       type="button"
     >
diff --git a/src/components/table/table_pagination/__snapshots__/table_pagination.test.js.snap b/src/components/table/table_pagination/__snapshots__/table_pagination.test.js.snap
index 8567aeb1e59..d9ea3c42a57 100644
--- a/src/components/table/table_pagination/__snapshots__/table_pagination.test.js.snap
+++ b/src/components/table/table_pagination/__snapshots__/table_pagination.test.js.snap
@@ -11,8 +11,6 @@ exports[`EuiTablePagination is rendered 1`] = `
       class="euiPopover euiPopover--anchorUpRight euiPopover--withTitle"
     >
       <button
-        aria-controls="customizablePagination"
-        aria-expanded="false"
         class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty--iconRight"
         type="button"
       >

From 1c89762f0fbcecd05ac3e1ebee6d2fc84b9cb949 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Fri, 11 May 2018 13:43:14 -0700
Subject: [PATCH 12/17] fixes #617 applies aria label to theme selector

---
 .../src/components/guide_theme_selector/guide_theme_selector.js  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src-docs/src/components/guide_theme_selector/guide_theme_selector.js b/src-docs/src/components/guide_theme_selector/guide_theme_selector.js
index 3fdddadc17a..a5c58743a74 100644
--- a/src-docs/src/components/guide_theme_selector/guide_theme_selector.js
+++ b/src-docs/src/components/guide_theme_selector/guide_theme_selector.js
@@ -37,6 +37,7 @@ export class GuideThemeSelector extends Component {
         iconType="arrowDown"
         iconSide="right"
         onClick={this.onThemeButtonClick}
+        aria-label="Select a visual theme"
       >
         <strong>Elastic UI</strong> <span className="guideSideNav__theme"> ~ {this.props.selectedTheme}</span>
       </EuiButtonEmpty>

From a950bbd7fea79e4d91b245b628169fd6cccc4ce2 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Fri, 11 May 2018 13:58:13 -0700
Subject: [PATCH 13/17] fixes #746 applies proper label to select all
 checkboxes in table

---
 src/components/basic_table/basic_table.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/basic_table/basic_table.js b/src/components/basic_table/basic_table.js
index 3e522a5fd08..1582bf3ee08 100644
--- a/src/components/basic_table/basic_table.js
+++ b/src/components/basic_table/basic_table.js
@@ -366,6 +366,7 @@ export class EuiBasicTable extends Component {
             disabled={disabled}
             onChange={onChange}
             data-test-subj="checkboxSelectAll"
+            aria-label="Select all rows"
           />
         </EuiTableHeaderCellCheckbox>
       );
@@ -562,6 +563,7 @@ export class EuiBasicTable extends Component {
           checked={checked}
           onChange={onChange}
           title={title}
+          aria-label="Select this row"
           data-test-subj={`checkboxSelectRow-${itemId}`}
         />
       </EuiTableRowCellCheckbox>

From 585bdd46f06cdc280d96059932178fd36cf42041 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Fri, 11 May 2018 14:03:11 -0700
Subject: [PATCH 14/17] snapshots

---
 .../__snapshots__/basic_table.test.js.snap    | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/components/basic_table/__snapshots__/basic_table.test.js.snap b/src/components/basic_table/__snapshots__/basic_table.test.js.snap
index f8b9fb5ca9c..b54c262d81f 100644
--- a/src/components/basic_table/__snapshots__/basic_table.test.js.snap
+++ b/src/components/basic_table/__snapshots__/basic_table.test.js.snap
@@ -483,6 +483,7 @@ exports[`EuiBasicTable with pagination and selection 1`] = `
           width="24px"
         >
           <EuiCheckbox
+            aria-label="Select all rows"
             checked={false}
             compressed={false}
             data-test-subj="checkboxSelectAll"
@@ -511,6 +512,7 @@ exports[`EuiBasicTable with pagination and selection 1`] = `
               key="_selection_column_1"
             >
               <EuiCheckbox
+                aria-label="Select this row"
                 checked={false}
                 compressed={false}
                 data-test-subj="checkboxSelectRow-1"
@@ -540,6 +542,7 @@ exports[`EuiBasicTable with pagination and selection 1`] = `
               key="_selection_column_2"
             >
               <EuiCheckbox
+                aria-label="Select this row"
                 checked={false}
                 compressed={false}
                 data-test-subj="checkboxSelectRow-2"
@@ -569,6 +572,7 @@ exports[`EuiBasicTable with pagination and selection 1`] = `
               key="_selection_column_3"
             >
               <EuiCheckbox
+                aria-label="Select this row"
                 checked={false}
                 compressed={false}
                 data-test-subj="checkboxSelectRow-3"
@@ -635,6 +639,7 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = `
           width="24px"
         >
           <EuiCheckbox
+            aria-label="Select all rows"
             checked={false}
             compressed={false}
             data-test-subj="checkboxSelectAll"
@@ -666,6 +671,7 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = `
               key="_selection_column_1"
             >
               <EuiCheckbox
+                aria-label="Select this row"
                 checked={false}
                 compressed={false}
                 data-test-subj="checkboxSelectRow-1"
@@ -695,6 +701,7 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = `
               key="_selection_column_2"
             >
               <EuiCheckbox
+                aria-label="Select this row"
                 checked={false}
                 compressed={false}
                 data-test-subj="checkboxSelectRow-2"
@@ -724,6 +731,7 @@ exports[`EuiBasicTable with pagination, selection and sorting 1`] = `
               key="_selection_column_3"
             >
               <EuiCheckbox
+                aria-label="Select this row"
                 checked={false}
                 compressed={false}
                 data-test-subj="checkboxSelectRow-3"
@@ -790,6 +798,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a
           width="24px"
         >
           <EuiCheckbox
+            aria-label="Select all rows"
             checked={false}
             compressed={false}
             data-test-subj="checkboxSelectAll"
@@ -828,6 +837,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a
               key="_selection_column_1"
             >
               <EuiCheckbox
+                aria-label="Select this row"
                 checked={false}
                 compressed={false}
                 data-test-subj="checkboxSelectRow-1"
@@ -885,6 +895,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a
               key="_selection_column_2"
             >
               <EuiCheckbox
+                aria-label="Select this row"
                 checked={false}
                 compressed={false}
                 data-test-subj="checkboxSelectRow-2"
@@ -942,6 +953,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a
               key="_selection_column_3"
             >
               <EuiCheckbox
+                aria-label="Select this row"
                 checked={false}
                 compressed={false}
                 data-test-subj="checkboxSelectRow-3"
@@ -1036,6 +1048,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1
           width="24px"
         >
           <EuiCheckbox
+            aria-label="Select all rows"
             checked={false}
             compressed={false}
             data-test-subj="checkboxSelectAll"
@@ -1067,6 +1080,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1
               key="_selection_column_1"
             >
               <EuiCheckbox
+                aria-label="Select this row"
                 checked={false}
                 compressed={false}
                 data-test-subj="checkboxSelectRow-1"
@@ -1096,6 +1110,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1
               key="_selection_column_2"
             >
               <EuiCheckbox
+                aria-label="Select this row"
                 checked={false}
                 compressed={false}
                 data-test-subj="checkboxSelectRow-2"
@@ -1125,6 +1140,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column dataType 1
               key="_selection_column_3"
             >
               <EuiCheckbox
+                aria-label="Select this row"
                 checked={false}
                 compressed={false}
                 data-test-subj="checkboxSelectRow-3"
@@ -1191,6 +1207,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1
           width="24px"
         >
           <EuiCheckbox
+            aria-label="Select all rows"
             checked={false}
             compressed={false}
             data-test-subj="checkboxSelectAll"
@@ -1222,6 +1239,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1
               key="_selection_column_1"
             >
               <EuiCheckbox
+                aria-label="Select this row"
                 checked={false}
                 compressed={false}
                 data-test-subj="checkboxSelectRow-1"
@@ -1251,6 +1269,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1
               key="_selection_column_2"
             >
               <EuiCheckbox
+                aria-label="Select this row"
                 checked={false}
                 compressed={false}
                 data-test-subj="checkboxSelectRow-2"
@@ -1280,6 +1299,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and column renderer 1
               key="_selection_column_3"
             >
               <EuiCheckbox
+                aria-label="Select this row"
                 checked={false}
                 compressed={false}
                 data-test-subj="checkboxSelectRow-3"
@@ -1346,6 +1366,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a
           width="24px"
         >
           <EuiCheckbox
+            aria-label="Select all rows"
             checked={false}
             compressed={false}
             data-test-subj="checkboxSelectAll"
@@ -1384,6 +1405,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a
               key="_selection_column_1"
             >
               <EuiCheckbox
+                aria-label="Select this row"
                 checked={false}
                 compressed={false}
                 data-test-subj="checkboxSelectRow-1"
@@ -1439,6 +1461,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a
               key="_selection_column_2"
             >
               <EuiCheckbox
+                aria-label="Select this row"
                 checked={false}
                 compressed={false}
                 data-test-subj="checkboxSelectRow-2"
@@ -1494,6 +1517,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a
               key="_selection_column_3"
             >
               <EuiCheckbox
+                aria-label="Select this row"
                 checked={false}
                 compressed={false}
                 data-test-subj="checkboxSelectRow-3"
@@ -1586,6 +1610,7 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and
           width="24px"
         >
           <EuiCheckbox
+            aria-label="Select all rows"
             checked={false}
             compressed={false}
             data-test-subj="checkboxSelectAll"
@@ -1617,6 +1642,7 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and
               key="_selection_column_1"
             >
               <EuiCheckbox
+                aria-label="Select this row"
                 checked={false}
                 compressed={false}
                 data-test-subj="checkboxSelectRow-1"
@@ -1646,6 +1672,7 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and
               key="_selection_column_2"
             >
               <EuiCheckbox
+                aria-label="Select this row"
                 checked={false}
                 compressed={false}
                 data-test-subj="checkboxSelectRow-2"
@@ -1675,6 +1702,7 @@ exports[`EuiBasicTable with pagination, selection, sorting, column renderer and
               key="_selection_column_3"
             >
               <EuiCheckbox
+                aria-label="Select this row"
                 checked={false}
                 compressed={false}
                 data-test-subj="checkboxSelectRow-3"

From af4f8731db8265aaf19027ece6440aaaa2a37ca7 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Fri, 11 May 2018 14:05:45 -0700
Subject: [PATCH 15/17] changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 86f686b4264..d562560bbef 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@
 - Ensure switches’ inputs are still hidden when `[disabled]` ([#778](https://github.com/elastic/eui/pull/778))
 - Made boolean matching in `EuiSearchBar` more exact so it doesn't match words starting with booleans, like "truest" or "offer" ([#776](https://github.com/elastic/eui/pull/776))
 - `EuiComboBox` do not setState or call refs once component is unmounted ([807](https://github.com/elastic/eui/pull/807) and [#813](https://github.com/elastic/eui/pull/813))
+- Added better accessibility labeling to `EuiPagination`, `EuiSideNav`, `EuiPopover`, `EuiBottomBar` and `EuiBasicTable`.  ([#821](https://github.com/elastic/eui/pull/821))
 
 ## [`0.0.46`](https://github.com/elastic/eui/tree/v0.0.46)
 

From 76d40c613ea15ffbada05d4081e12b4e1245fc9f Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Fri, 11 May 2018 14:17:00 -0700
Subject: [PATCH 16/17] clone element and id no longer needed for popover

---
 src/components/popover/popover.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 41d995ac8f7..82f398dcb1e 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -1,5 +1,4 @@
 import React, {
-  cloneElement,
   Component,
 } from 'react';
 import PropTypes from 'prop-types';
@@ -126,7 +125,6 @@ export class EuiPopover extends Component {
       ownFocus,
       withTitle,
       children,
-      id,
       className,
       closePopover,
       panelClassName,
@@ -202,7 +200,6 @@ export class EuiPopover extends Component {
 }
 
 EuiPopover.propTypes = {
-  id: PropTypes.string.isRequired,
   isOpen: PropTypes.bool,
   ownFocus: PropTypes.bool,
   withTitle: PropTypes.bool,

From 98b7766f69822398123dcf2aa586a5dd3393be16 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Fri, 11 May 2018 14:26:22 -0700
Subject: [PATCH 17/17] more snapshots

---
 .../popover/__snapshots__/popover.test.js.snap       | 12 ++++++++++++
 .../__snapshots__/table_sort_mobile.test.js.snap     |  1 +
 .../__snapshots__/table_pagination.test.js.snap      |  1 +
 3 files changed, 14 insertions(+)

diff --git a/src/components/popover/__snapshots__/popover.test.js.snap b/src/components/popover/__snapshots__/popover.test.js.snap
index f152ad694c8..67a05ead022 100644
--- a/src/components/popover/__snapshots__/popover.test.js.snap
+++ b/src/components/popover/__snapshots__/popover.test.js.snap
@@ -3,6 +3,7 @@
 exports[`EuiPopover children is rendered 1`] = `
 <div
   class="euiPopover euiPopover--anchorDownCenter"
+  id="1"
 >
   <button />
 </div>
@@ -13,6 +14,7 @@ exports[`EuiPopover is rendered 1`] = `
   aria-label="aria-label"
   class="euiPopover euiPopover--anchorDownCenter testClass1 testClass2"
   data-test-subj="test subject string"
+  id="0"
 >
   <button />
 </div>
@@ -21,6 +23,7 @@ exports[`EuiPopover is rendered 1`] = `
 exports[`EuiPopover props anchorPosition defaults to centerDown 1`] = `
 <div
   class="euiPopover euiPopover--anchorDownCenter"
+  id="4"
 >
   <button />
 </div>
@@ -29,6 +32,7 @@ exports[`EuiPopover props anchorPosition defaults to centerDown 1`] = `
 exports[`EuiPopover props anchorPosition downRight is rendered 1`] = `
 <div
   class="euiPopover euiPopover--anchorDownRight"
+  id="6"
 >
   <button />
 </div>
@@ -37,6 +41,7 @@ exports[`EuiPopover props anchorPosition downRight is rendered 1`] = `
 exports[`EuiPopover props anchorPosition leftCenter is rendered 1`] = `
 <div
   class="euiPopover euiPopover--anchorLeftCenter"
+  id="5"
 >
   <button />
 </div>
@@ -45,6 +50,7 @@ exports[`EuiPopover props anchorPosition leftCenter is rendered 1`] = `
 exports[`EuiPopover props isOpen defaults to false 1`] = `
 <div
   class="euiPopover euiPopover--anchorDownCenter"
+  id="7"
 >
   <button />
 </div>
@@ -53,6 +59,7 @@ exports[`EuiPopover props isOpen defaults to false 1`] = `
 exports[`EuiPopover props isOpen renders true 1`] = `
 <div
   class="euiPopover euiPopover--anchorDownCenter"
+  id="8"
 >
   <button />
   <div>
@@ -67,6 +74,7 @@ exports[`EuiPopover props isOpen renders true 1`] = `
 exports[`EuiPopover props ownFocus defaults to false 1`] = `
 <div
   class="euiPopover euiPopover--anchorDownCenter"
+  id="9"
 >
   <button />
   <div>
@@ -81,6 +89,7 @@ exports[`EuiPopover props ownFocus defaults to false 1`] = `
 exports[`EuiPopover props ownFocus renders true 1`] = `
 <div
   class="euiPopover euiPopover--anchorDownCenter"
+  id="10"
 >
   <button />
   <div>
@@ -96,6 +105,7 @@ exports[`EuiPopover props ownFocus renders true 1`] = `
 exports[`EuiPopover props panelClassName is rendered 1`] = `
 <div
   class="euiPopover euiPopover--anchorDownCenter"
+  id="11"
 >
   <button />
   <div>
@@ -110,6 +120,7 @@ exports[`EuiPopover props panelClassName is rendered 1`] = `
 exports[`EuiPopover props panelPaddingSize is rendered 1`] = `
 <div
   class="euiPopover euiPopover--anchorDownCenter"
+  id="12"
 >
   <button />
   <div>
@@ -124,6 +135,7 @@ exports[`EuiPopover props panelPaddingSize is rendered 1`] = `
 exports[`EuiPopover props withTitle is rendered 1`] = `
 <div
   class="euiPopover euiPopover--anchorDownCenter euiPopover--withTitle"
+  id="2"
 >
   <button />
 </div>
diff --git a/src/components/table/mobile/__snapshots__/table_sort_mobile.test.js.snap b/src/components/table/mobile/__snapshots__/table_sort_mobile.test.js.snap
index d18722d2399..2c3d686dce9 100644
--- a/src/components/table/mobile/__snapshots__/table_sort_mobile.test.js.snap
+++ b/src/components/table/mobile/__snapshots__/table_sort_mobile.test.js.snap
@@ -8,6 +8,7 @@ exports[`EuiTableSortMobile is rendered 1`] = `
     aria-label="aria-label"
     class="euiPopover euiPopover--anchorDownRight"
     data-test-subj="test subject string"
+    id="sortPopover"
   >
     <button
       class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiButtonEmpty--flushRight"
diff --git a/src/components/table/table_pagination/__snapshots__/table_pagination.test.js.snap b/src/components/table/table_pagination/__snapshots__/table_pagination.test.js.snap
index d9ea3c42a57..f020e1a1826 100644
--- a/src/components/table/table_pagination/__snapshots__/table_pagination.test.js.snap
+++ b/src/components/table/table_pagination/__snapshots__/table_pagination.test.js.snap
@@ -9,6 +9,7 @@ exports[`EuiTablePagination is rendered 1`] = `
   >
     <div
       class="euiPopover euiPopover--anchorUpRight euiPopover--withTitle"
+      id="customizablePagination"
     >
       <button
         class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty--iconRight"