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>

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>

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"
 >

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: {},

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',
   };

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',

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}