Fixed typo in roles spaces popover list. Keyboard navigation with opt…

…ions (shift, ctrl, etc.) is not yet working - event argument in selectable onChange is null for keyboard events.
elastic · Jul 13, 2022 · 0f00360 · 0f00360
1 parent 4fcc593
commit 0f00360
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 34 deletions.
diff --git a/...ns/security/public/management/roles/edit_role/spaces_popover_list/spaces_popover_list.tsx b/...ns/security/public/management/roles/edit_role/spaces_popover_list/spaces_popover_list.tsx
@@ -96,6 +96,8 @@ export class SpacesPopoverList extends Component<Props, State> {
                   }
                 ),
                 compressed: true,
+                isClearable: true,
+                id: 'spacesPopoverListSearch',
               } as any)
             : undefined
         }
@@ -143,7 +145,7 @@ export class SpacesPopoverList extends Component<Props, State> {
     return this.props.spaces.map((space) => {
       const icon = (
         <Suspense fallback={<EuiLoadingSpinner size="m" />}>
-          <LazySpaceAvatar space={space} size={'s'} announceSpaceName={false} />;
+          <LazySpaceAvatar space={space} size={'s'} announceSpaceName={false} />
         </Suspense>
       );
       return {

diff --git a/x-pack/plugins/spaces/public/nav_control/__snapshots__/nav_control_popover.test.tsx.snap b/x-pack/plugins/spaces/public/nav_control/__snapshots__/nav_control_popover.test.tsx.snap
diff --git a/x-pack/plugins/spaces/public/nav_control/components/spaces_menu.tsx b/x-pack/plugins/spaces/public/nav_control/components/spaces_menu.tsx
@@ -96,13 +96,15 @@ class SpacesMenuUI extends Component<Props> {
                   }
                 ),
                 compressed: true,
+                isClearable: true,
+                id: 'headerSpacesMenuListSearch',
               } as any)
             : undefined
         }
         noMatchesMessage={noSpacesMessage}
         emptyMessage={noSpacesMessage}
         options={spaceMenuOptions}
-        singleSelection="always"
+        singleSelection={'always'}
         style={{ width: 300 }}
         onChange={this.spaceSelectionChange}
         listProps={{
@@ -131,6 +133,7 @@ class SpacesMenuUI extends Component<Props> {
     return this.props.spaces.map((space) => {
       return {
         'aria-label': space.name,
+        'aria-roledescription': 'space',
         label: space.name,
         key: space.id,
         prepend: (
@@ -161,20 +164,22 @@ class SpacesMenuUI extends Component<Props> {
       // ToDo: handle options (middle click or cmd/ctrl (new tab), shift click (new window))
       // console.log(`**** Event Class: ${event.constructor.name}`);
       // console.log(`**** Native Event: ${event.nativeEvent}`);
+      // console.log(`**** Event Type: ${event.type}`);
+      // console.log(`**** Event Default Prevented: ${event.defaultPrevented}`);
 
       if (event.shiftKey) {
         // Open in new window, shift is given priority over other modifiers
-        console.log(`**** SHIFT CLICK`);
-        // window.open(urlToSelectedSpace);
+        // console.log(`**** SHIFT CLICK`);
+        window.open(urlToSelectedSpace);
       } else if (event.ctrlKey || event.metaKey) {
         // Open in new tab - either a ctrl click or middle mouse button
-        console.log(`**** CTRL/CMD CLICK`);
-        // window.open(urlToSelectedSpace, '_blank'); // '_blank' causes new tab
+        // console.log(`**** CTRL/CMD CLICK`);
+        window.open(urlToSelectedSpace, '_blank'); // '_blank' causes new tab
       } else {
         // Force full page reload (usually not a good idea, but we need to in order to change spaces)
         // console.log(`**** URL: ${urlToSelectedSpace}`);
-        console.log(`**** NORMAL CLICK`);
-        // this.props.navigateToUrl(urlToSelectedSpace);
+        // console.log(`**** NORMAL CLICK`);
+        this.props.navigateToUrl(urlToSelectedSpace);
       }
     }
   };

diff --git a/x-pack/plugins/spaces/public/nav_control/nav_control_popover.tsx b/x-pack/plugins/spaces/public/nav_control/nav_control_popover.tsx
@@ -6,12 +6,7 @@
  */
 
 import type { PopoverAnchorPosition } from '@elastic/eui';
-import {
-  EuiFocusTrap,
-  EuiHeaderSectionItemButton,
-  EuiLoadingSpinner,
-  EuiPopover,
-} from '@elastic/eui';
+import { EuiHeaderSectionItemButton, EuiLoadingSpinner, EuiPopover } from '@elastic/eui';
 import React, { Component, lazy, Suspense } from 'react';
 import type { Subscription } from 'rxjs';
 
@@ -113,7 +108,7 @@ export class NavControlPopover extends Component<Props, State> {
         anchorPosition={this.props.anchorPosition}
         panelPaddingSize="none"
         repositionOnScroll
-        // ownFocus={false}
+        ownFocus={true}
       >
         {element}
       </EuiPopover>
@@ -160,7 +155,7 @@ export class NavControlPopover extends Component<Props, State> {
         aria-controls={popoutContentId}
         aria-expanded={this.state.showSpaceSelector}
         aria-haspopup="true"
-        aria-label={i18n.translate('pack.spaces.navControl.popover.spacesNavigationLabel', {
+        aria-label={i18n.translate('xpack.spaces.navControl.popover.spacesNavigationLabel', {
           defaultMessage: 'Spaces navigation',
         })}
         aria-describedby="spacesNavDetails"
@@ -170,7 +165,7 @@ export class NavControlPopover extends Component<Props, State> {
       >
         {linkIcon}
         <p id="spacesNavDetails" hidden>
-          {i18n.translate('pack.spaces.navControl.popover.spaceNavigationDetails', {
+          {i18n.translate('xpack.spaces.navControl.popover.spaceNavigationDetails', {
             defaultMessage:
               '{space} is the currently selected space. Click this button to open a popover that allows you to select the active space.',
             values: {