[Accesibility: spaces] Switching to another space should show a notification

x-pack/legacy/plugins/spaces/public/lib/spaces_manager.ts

@@ -51,14 +51,16 @@ export class SpacesManager extends EventEmitter {
     });
   }
 
-  public async changeSelectedSpace(space: Space) {
-    await kfetch({
+  public async changeSelectedSpace(space: Space, waitUntil = Promise.resolve()) {
+    const getSpaceLocation = await kfetch({
       pathname: `/api/spaces/v1/space/${encodeURIComponent(space.id)}/select`,
       method: 'POST',
-    })
-      .then(response => {
-        if (response.location) {
-          window.location = response.location;
+    });
+
+    Promise.all([getSpaceLocation, waitUntil])
+      .then(([{ location }]) => {
+        if (location) {
+          window.location = location;
         } else {
           this._displayError();
         }

x-pack/legacy/plugins/spaces/public/views/nav_control/components/spaces_header_nav_button.tsx

@@ -13,16 +13,17 @@ import { ButtonProps } from '../types';
 
 export class SpacesHeaderNavButton extends Component<ButtonProps> {
   public render() {
+    const { spaceSelectorShown, linkTitle, linkIcon, toggleSpaceSelector } = this.props;
     return (
       <EuiHeaderSectionItemButton
         aria-controls="headerSpacesMenuList"
-        aria-expanded={this.props.spaceSelectorShown}
+        aria-expanded={spaceSelectorShown}
         aria-haspopup="true"
-        aria-label={this.props.linkTitle}
-        title={this.props.linkTitle}
-        onClick={this.props.toggleSpaceSelector}
+        aria-label={linkTitle}
+        title={linkTitle}
+        onClick={toggleSpaceSelector}
       >
-        {this.props.linkIcon}
+        {linkIcon}
       </EuiHeaderSectionItemButton>
     );
   }

x-pack/legacy/plugins/spaces/public/views/nav_control/components/spaces_menu.tsx

@@ -6,6 +6,7 @@
 
 import { EuiContextMenuItem, EuiContextMenuPanel, EuiFieldSearch, EuiText } from '@elastic/eui';
 import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
 import React, { Component } from 'react';
 import { SPACE_SEARCH_COUNT_THRESHOLD } from '../../../../common/constants';
 import { Space } from '../../../../common/model/space';
@@ -163,13 +164,23 @@ class SpacesMenuUI extends Component<Props, State> {
 
   private renderSpaceMenuItem = (space: Space): JSX.Element => {
     const icon = <SpaceAvatar space={space} size={'s'} />;
+    const itemAriaLabel = i18n.translate(
+      'xpack.spaces.navControl.spacesMenu.headerNavigationSwitchAriaLabel',
+      {
+        defaultMessage: '; Switch to {spaceName} space',
+        values: {
+          spaceName: space.name,
+        },
+      }
+    );
     return (
       <EuiContextMenuItem
         key={space.id}
         icon={icon}
         onClick={this.props.onSelectSpace.bind(this, space)}
         toolTipTitle={space.description && space.name}
         toolTipContent={space.description}
+        aria-label={itemAriaLabel}
       >
         {space.name}
       </EuiContextMenuItem>

x-pack/legacy/plugins/spaces/public/views/nav_control/nav_control_popover.tsx

@@ -4,8 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiAvatar, EuiPopover, PopoverAnchorPosition } from '@elastic/eui';
 import React, { Component, ComponentClass } from 'react';
+import { EuiAvatar, EuiPopover, PopoverAnchorPosition } from '@elastic/eui';
+import { toastNotifications } from 'ui/notify';
+import { i18n } from '@kbn/i18n';
 import { Space } from '../../../common/model/space';
 import { SpaceAvatar } from '../../components';
 import { SpacesManager } from '../../lib/spaces_manager';
@@ -159,6 +161,22 @@ export class NavControlPopover extends Component<Props, State> {
   };
 
   private onSelectSpace = (space: Space) => {
-    this.props.spacesManager.changeSelectedSpace(space);
+    toastNotifications.add({
+      title: i18n.translate(
+        'xpack.spaces.navControl.spacesMenu.jobCreationFailedNotificationTitle',
+        {
+          defaultMessage: 'Switching to {spaceName} space',
+          values: {
+            spaceName: space.name,
+          },
+        }
+      ),
+      invisible: true,
+      onClose: () => this.props.spacesManager.changeSelectedSpace(space),
+    });
+
+    const timeoutPromise = new Promise(resolve => setTimeout(resolve, 2000));
+    this.props.spacesManager.changeSelectedSpace(space, timeoutPromise);
+    return true;
   };
 }