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>

Author: kobelb

x-pack/legacy/plugins/spaces/public/nav_control/__snapshots__/nav_control_popover.test.tsx.snap

@@ -13,6 +13,7 @@ describe('SpacesDescription', () => {
     expect(
       shallow(
         <SpacesDescription
+          id={'foo'}
           capabilities={{
             navLinks: {},
             management: {},

x-pack/legacy/plugins/spaces/public/nav_control/components/__snapshots__/spaces_description.test.tsx.snap

@@ -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_description.test.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/components/spaces_description.tsx

@@ -32,6 +32,8 @@ interface State {
   spaces: Space[];
 }
 
+const popoutContentId = 'headerSpacesMenuContent';
+
 export class NavControlPopover extends Component<Props, State> {
   private activeSpace$?: Subscription;
 
@@ -71,13 +73,15 @@ 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}
         />
       );
     } 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}