From ea4a1ac12c03f3f312a0c734acb9e73da4d4266e Mon Sep 17 00:00:00 2001
From: Brandon Kobel <brandon.kobel@elastic.co>
Date: Mon, 13 Jan 2020 07:21:24 -0800
Subject: [PATCH] Fixing the spaces header aria-controls a11y issue (#54512)

* Fixing the spaces header aria-controls a11y issue

* Updating snapshots

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../__snapshots__/nav_control_popover.test.tsx.snap         | 3 ++-
 .../__snapshots__/spaces_description.test.tsx.snap          | 1 +
 .../nav_control/components/spaces_description.test.tsx      | 1 +
 .../public/nav_control/components/spaces_description.tsx    | 2 ++
 .../spaces/public/nav_control/components/spaces_menu.tsx    | 2 ++
 .../spaces/public/nav_control/nav_control_popover.tsx       | 6 +++++-
 6 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/x-pack/legacy/plugins/spaces/public/nav_control/__snapshots__/nav_control_popover.test.tsx.snap b/x-pack/legacy/plugins/spaces/public/nav_control/__snapshots__/nav_control_popover.test.tsx.snap
index 5cad4e794cfd..45daa03e94c2 100644
--- a/x-pack/legacy/plugins/spaces/public/nav_control/__snapshots__/nav_control_popover.test.tsx.snap
+++ b/x-pack/legacy/plugins/spaces/public/nav_control/__snapshots__/nav_control_popover.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`NavControlPopover renders without crashing 1`] = `
   anchorPosition="downRight"
   button={
     <EuiHeaderSectionItemButton
-      aria-controls="headerSpacesMenuList"
+      aria-controls="headerSpacesMenuContent"
       aria-expanded={false}
       aria-haspopup="true"
       aria-label="loading"
@@ -39,6 +39,7 @@ exports[`NavControlPopover renders without crashing 1`] = `
         },
       }
     }
+    id="headerSpacesMenuContent"
     onManageSpacesClick={[Function]}
   />
 </EuiPopover>
diff --git a/x-pack/legacy/plugins/spaces/public/nav_control/components/__snapshots__/spaces_description.test.tsx.snap b/x-pack/legacy/plugins/spaces/public/nav_control/components/__snapshots__/spaces_description.test.tsx.snap
index 079dab701cc1..8e78f64ac59c 100644
--- a/x-pack/legacy/plugins/spaces/public/nav_control/components/__snapshots__/spaces_description.test.tsx.snap
+++ b/x-pack/legacy/plugins/spaces/public/nav_control/components/__snapshots__/spaces_description.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`SpacesDescription renders without crashing 1`] = `
 <EuiContextMenuPanel
   className="spcDescription"
   hasFocus={true}
+  id="foo"
   items={Array []}
   title="Spaces"
 >
diff --git a/x-pack/legacy/plugins/spaces/public/nav_control/components/spaces_description.test.tsx b/x-pack/legacy/plugins/spaces/public/nav_control/components/spaces_description.test.tsx
index aacf3845e0e0..157dcab3e0be 100644
--- a/x-pack/legacy/plugins/spaces/public/nav_control/components/spaces_description.test.tsx
+++ b/x-pack/legacy/plugins/spaces/public/nav_control/components/spaces_description.test.tsx
@@ -13,6 +13,7 @@ describe('SpacesDescription', () => {
     expect(
       shallow(
         <SpacesDescription
+          id={'foo'}
           capabilities={{
             navLinks: {},
             management: {},
diff --git a/x-pack/legacy/plugins/spaces/public/nav_control/components/spaces_description.tsx b/x-pack/legacy/plugins/spaces/public/nav_control/components/spaces_description.tsx
index abf3c636b839..b6982a3d687a 100644
--- a/x-pack/legacy/plugins/spaces/public/nav_control/components/spaces_description.tsx
+++ b/x-pack/legacy/plugins/spaces/public/nav_control/components/spaces_description.tsx
@@ -11,12 +11,14 @@ import { ManageSpacesButton } from './manage_spaces_button';
 import { getSpacesFeatureDescription } from '../../constants';
 
 interface Props {
+  id: string;
   onManageSpacesClick: () => void;
   capabilities: Capabilities;
 }
 
 export const SpacesDescription: FC<Props> = (props: Props) => {
   const panelProps = {
+    id: props.id,
     className: 'spcDescription',
     title: 'Spaces',
   };
diff --git a/x-pack/legacy/plugins/spaces/public/nav_control/components/spaces_menu.tsx b/x-pack/legacy/plugins/spaces/public/nav_control/components/spaces_menu.tsx
index 96ce18896b42..4d89f57d4ccf 100644
--- a/x-pack/legacy/plugins/spaces/public/nav_control/components/spaces_menu.tsx
+++ b/x-pack/legacy/plugins/spaces/public/nav_control/components/spaces_menu.tsx
@@ -20,6 +20,7 @@ import { ManageSpacesButton } from './manage_spaces_button';
 import { SpaceAvatar } from '../../space_avatar';
 
 interface Props {
+  id: string;
   spaces: Space[];
   isLoading: boolean;
   onSelectSpace: (space: Space) => void;
@@ -48,6 +49,7 @@ class SpacesMenuUI extends Component<Props, State> {
       : this.getVisibleSpaces(searchTerm).map(this.renderSpaceMenuItem);
 
     const panelProps = {
+      id: this.props.id,
       className: 'spcMenu',
       title: intl.formatMessage({
         id: 'xpack.spaces.navControl.spacesMenu.changeCurrentSpaceTitle',
diff --git a/x-pack/legacy/plugins/spaces/public/nav_control/nav_control_popover.tsx b/x-pack/legacy/plugins/spaces/public/nav_control/nav_control_popover.tsx
index f291027e1523..59c8052a644d 100644
--- a/x-pack/legacy/plugins/spaces/public/nav_control/nav_control_popover.tsx
+++ b/x-pack/legacy/plugins/spaces/public/nav_control/nav_control_popover.tsx
@@ -32,6 +32,8 @@ interface State {
   spaces: Space[];
 }
 
+const popoutContentId = 'headerSpacesMenuContent';
+
 export class NavControlPopover extends Component<Props, State> {
   private activeSpace$?: Subscription;
 
@@ -71,6 +73,7 @@ export class NavControlPopover extends Component<Props, State> {
     if (!this.state.loading && this.state.spaces.length < 2) {
       element = (
         <SpacesDescription
+          id={popoutContentId}
           onManageSpacesClick={this.toggleSpaceSelector}
           capabilities={this.props.capabilities}
         />
@@ -78,6 +81,7 @@ export class NavControlPopover extends Component<Props, State> {
     } else {
       element = (
         <SpacesMenu
+          id={popoutContentId}
           spaces={this.state.spaces}
           isLoading={this.state.loading}
           onSelectSpace={this.onSelectSpace}
@@ -140,7 +144,7 @@ export class NavControlPopover extends Component<Props, State> {
   private getButton = (linkIcon: JSX.Element, linkTitle: string) => {
     return (
       <EuiHeaderSectionItemButton
-        aria-controls="headerSpacesMenuList"
+        aria-controls={popoutContentId}
         aria-expanded={this.state.showSpaceSelector}
         aria-haspopup="true"
         aria-label={linkTitle}