From 0f0036054bba86e5e8853a41eb24097af72dc8af Mon Sep 17 00:00:00 2001 From: jeramysoucy Date: Tue, 12 Jul 2022 13:24:44 +0200 Subject: [PATCH] Fixed typo in roles spaces popover list. Keyboard navigation with options (shift, ctrl, etc.) is not yet working - event argument in selectable onChange is null for keyboard events. --- .../spaces_popover_list.tsx | 4 ++- .../nav_control_popover.test.tsx.snap | 32 +++++++++---------- .../nav_control/components/spaces_menu.tsx | 19 +++++++---- .../nav_control/nav_control_popover.tsx | 13 +++----- 4 files changed, 34 insertions(+), 34 deletions(-) diff --git a/x-pack/plugins/security/public/management/roles/edit_role/spaces_popover_list/spaces_popover_list.tsx b/x-pack/plugins/security/public/management/roles/edit_role/spaces_popover_list/spaces_popover_list.tsx index df515653a1dde09..219cc5cb58708ce 100644 --- a/x-pack/plugins/security/public/management/roles/edit_role/spaces_popover_list/spaces_popover_list.tsx +++ b/x-pack/plugins/security/public/management/roles/edit_role/spaces_popover_list/spaces_popover_list.tsx @@ -96,6 +96,8 @@ export class SpacesPopoverList extends Component { } ), compressed: true, + isClearable: true, + id: 'spacesPopoverListSearch', } as any) : undefined } @@ -143,7 +145,7 @@ export class SpacesPopoverList extends Component { return this.props.spaces.map((space) => { const icon = ( }> - ; + ); 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 index 59fd686ee70b044..2a432971a233884 100644 --- 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 @@ -30,26 +30,24 @@ exports[`NavControlPopover renders without crashing 1`] = ` hasArrow={true} id="spcMenuPopover" isOpen={false} - ownFocus={false} + ownFocus={true} panelPaddingSize="none" repositionOnScroll={true} > - - - + } + id="headerSpacesMenuContent" + navigateToApp={[MockFunction]} + onManageSpacesClick={[Function]} + /> `; 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 index 9a2c866eb168d96..efc6174640d5973 100644 --- 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 { } ), 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 { 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 { // 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 index 514eef0cc68ffdb..b5de971c2ce4c0e 100644 --- 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 { anchorPosition={this.props.anchorPosition} panelPaddingSize="none" repositionOnScroll - // ownFocus={false} + ownFocus={true} > {element} @@ -160,7 +155,7 @@ export class NavControlPopover extends Component { 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 { > {linkIcon}