mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
Space switcher not visible when sidebar is expanded (Accessibility) (#154622)
Space switcher not visible when sidebar is expanded (Accessibility) Resolves https://github.com/elastic/kibana/issues/153464 ### Loom video/Screenshot #### BEFORE  #### AFTER  --- This code was written and reviewed by GitStart Community. Growing future engineers, one PR at a time. --------- Co-authored-by: KlingerMatheus <klinger.matheus@gitstart.dev> Co-authored-by: gitstart_bot <gitstart_bot@users.noreply.github.com> Co-authored-by: Klinger Matheus <50892465+KlingerMatheus@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
GitStart
GitHub
parent
88f4f8082a
commit
065fdf9a49
2 changed files with 176 additions and 52 deletions
|
|
@ -1,55 +1,169 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`NavControlPopover renders without crashing 1`] = `
|
||||
<EuiPopover
|
||||
<NavControlPopoverUI
|
||||
anchorPosition="downRight"
|
||||
button={
|
||||
<EuiHeaderSectionItemButton
|
||||
aria-controls="headerSpacesMenuContent"
|
||||
aria-describedby="spacesNavDetails"
|
||||
aria-expanded={false}
|
||||
aria-haspopup="true"
|
||||
aria-label="Spaces navigation"
|
||||
data-test-subj="spacesNavSelector"
|
||||
onClick={[Function]}
|
||||
title="loading spaces navigation"
|
||||
>
|
||||
<EuiLoadingSpinner
|
||||
className="eui-alignMiddle"
|
||||
size="m"
|
||||
/>
|
||||
<p
|
||||
hidden={true}
|
||||
id="spacesNavDetails"
|
||||
>
|
||||
loading spaces navigation is the currently selected space. Click this button to open a popover that allows you to select the active space.
|
||||
</p>
|
||||
</EuiHeaderSectionItemButton>
|
||||
}
|
||||
closePopover={[Function]}
|
||||
display="inline-block"
|
||||
hasArrow={true}
|
||||
id="spcMenuPopover"
|
||||
isOpen={false}
|
||||
ownFocus={true}
|
||||
panelPaddingSize="none"
|
||||
repositionOnScroll={true}
|
||||
>
|
||||
<SpacesDescription
|
||||
capabilities={
|
||||
Object {
|
||||
"catalogue": Object {},
|
||||
"management": Object {},
|
||||
"navLinks": Object {},
|
||||
"spaces": Object {
|
||||
"manage": true,
|
||||
},
|
||||
}
|
||||
capabilities={
|
||||
Object {
|
||||
"catalogue": Object {},
|
||||
"management": Object {},
|
||||
"navLinks": Object {},
|
||||
"spaces": Object {
|
||||
"manage": true,
|
||||
},
|
||||
}
|
||||
id="headerSpacesMenuContent"
|
||||
isLoading={false}
|
||||
navigateToApp={[MockFunction]}
|
||||
toggleSpaceSelector={[Function]}
|
||||
/>
|
||||
</EuiPopover>
|
||||
}
|
||||
navigateToApp={[MockFunction]}
|
||||
navigateToUrl={[MockFunction]}
|
||||
serverBasePath="/server-base-path"
|
||||
spacesManager={
|
||||
Object {
|
||||
"copySavedObjects": [MockFunction],
|
||||
"createSpace": [MockFunction],
|
||||
"deleteSpace": [MockFunction],
|
||||
"disableLegacyUrlAliases": [MockFunction],
|
||||
"getActiveSpace": [MockFunction],
|
||||
"getShareSavedObjectPermissions": [MockFunction],
|
||||
"getShareableReferences": [MockFunction],
|
||||
"getSpace": [MockFunction],
|
||||
"getSpaces": [MockFunction],
|
||||
"onActiveSpaceChange$": Observable {
|
||||
"_subscribe": [Function],
|
||||
},
|
||||
"redirectToSpaceSelector": [MockFunction],
|
||||
"resolveCopySavedObjectsErrors": [MockFunction],
|
||||
"updateSavedObjectsSpaces": [MockFunction],
|
||||
"updateSpace": [MockFunction],
|
||||
}
|
||||
}
|
||||
theme={
|
||||
Object {
|
||||
"colorMode": "LIGHT",
|
||||
"euiTheme": Object {
|
||||
"animation": Object {
|
||||
"bounce": "cubic-bezier(.34, 1.61, .7, 1)",
|
||||
"extraFast": "90ms",
|
||||
"extraSlow": "500ms",
|
||||
"fast": "150ms",
|
||||
"normal": "250ms",
|
||||
"resistance": "cubic-bezier(.694, .0482, .335, 1)",
|
||||
"slow": "350ms",
|
||||
},
|
||||
"base": 16,
|
||||
"border": Object {
|
||||
"color": "#D3DAE6",
|
||||
"editable": "2px dotted #D3DAE6",
|
||||
"radius": Object {
|
||||
"medium": "6px",
|
||||
"small": "4px",
|
||||
},
|
||||
"thick": "2px solid #D3DAE6",
|
||||
"thin": "1px solid #D3DAE6",
|
||||
"width": Object {
|
||||
"thick": "2px",
|
||||
"thin": "1px",
|
||||
},
|
||||
},
|
||||
"breakpoint": Object {
|
||||
"l": 992,
|
||||
"m": 768,
|
||||
"s": 575,
|
||||
"xl": 1200,
|
||||
"xs": 0,
|
||||
},
|
||||
"colors": Object {
|
||||
"accent": "#F04E98",
|
||||
"accentText": "#ba3d76",
|
||||
"body": "#f7f8fc",
|
||||
"danger": "#BD271E",
|
||||
"dangerText": "#bd271e",
|
||||
"darkShade": "#69707D",
|
||||
"darkestShade": "#343741",
|
||||
"disabled": "#ABB4C4",
|
||||
"disabledText": "#a2abba",
|
||||
"emptyShade": "#FFF",
|
||||
"fullShade": "#000",
|
||||
"ghost": "#FFF",
|
||||
"highlight": "#fff9e8",
|
||||
"ink": "#000",
|
||||
"lightShade": "#D3DAE6",
|
||||
"lightestShade": "#F1F4FA",
|
||||
"link": "#006bb8",
|
||||
"mediumShade": "#98A2B3",
|
||||
"primary": "#07C",
|
||||
"primaryText": "#006bb8",
|
||||
"shadow": "#000",
|
||||
"subduedText": "#646a77",
|
||||
"success": "#00BFB3",
|
||||
"successText": "#007871",
|
||||
"text": "#343741",
|
||||
"title": "#1a1c21",
|
||||
"warning": "#FEC514",
|
||||
"warningText": "#83650a",
|
||||
},
|
||||
"focus": Object {
|
||||
"color": "currentColor",
|
||||
"width": "2px",
|
||||
},
|
||||
"font": Object {
|
||||
"baseline": 4,
|
||||
"body": Object {
|
||||
"scale": "s",
|
||||
"weight": "regular",
|
||||
},
|
||||
"family": "'Inter', BlinkMacSystemFont, Helvetica, Arial, sans-serif",
|
||||
"familyCode": "'Roboto Mono', Menlo, Courier, monospace",
|
||||
"familySerif": "Georgia, Times, Times New Roman, serif",
|
||||
"featureSettings": "'calt' 1, 'kern' 1, 'liga' 1",
|
||||
"lineHeightMultiplier": 1.5,
|
||||
"scale": Object {
|
||||
"l": 1.375,
|
||||
"m": 1,
|
||||
"s": 0.875,
|
||||
"xl": 1.6875,
|
||||
"xs": 0.75,
|
||||
"xxl": 2.125,
|
||||
"xxs": 0.6875,
|
||||
"xxxs": 0.5625,
|
||||
},
|
||||
"title": Object {
|
||||
"weight": "bold",
|
||||
},
|
||||
"weight": Object {
|
||||
"bold": 700,
|
||||
"light": 300,
|
||||
"medium": 500,
|
||||
"regular": 400,
|
||||
"semiBold": 600,
|
||||
},
|
||||
},
|
||||
"levels": Object {
|
||||
"content": 0,
|
||||
"flyout": 1000,
|
||||
"header": 1000,
|
||||
"mask": 6000,
|
||||
"maskBelowHeader": 1000,
|
||||
"menu": 2000,
|
||||
"modal": 8000,
|
||||
"navigation": 6000,
|
||||
"toast": 9000,
|
||||
},
|
||||
"size": Object {
|
||||
"base": "16px",
|
||||
"l": "24px",
|
||||
"m": "12px",
|
||||
"s": "8px",
|
||||
"xl": "32px",
|
||||
"xs": "4px",
|
||||
"xxl": "40px",
|
||||
"xxs": "2px",
|
||||
"xxxl": "48px",
|
||||
"xxxxl": "64px",
|
||||
},
|
||||
"themeName": "EUI_THEME_AMSTERDAM",
|
||||
},
|
||||
"modifications": Object {},
|
||||
}
|
||||
}
|
||||
/>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -5,8 +5,13 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import type { PopoverAnchorPosition } from '@elastic/eui';
|
||||
import { EuiHeaderSectionItemButton, EuiLoadingSpinner, EuiPopover } from '@elastic/eui';
|
||||
import type { PopoverAnchorPosition, WithEuiThemeProps } from '@elastic/eui';
|
||||
import {
|
||||
EuiHeaderSectionItemButton,
|
||||
EuiLoadingSpinner,
|
||||
EuiPopover,
|
||||
withEuiTheme,
|
||||
} from '@elastic/eui';
|
||||
import React, { Component, lazy, Suspense } from 'react';
|
||||
import type { Subscription } from 'rxjs';
|
||||
|
||||
|
|
@ -31,6 +36,7 @@ interface Props {
|
|||
navigateToApp: ApplicationStart['navigateToApp'];
|
||||
navigateToUrl: ApplicationStart['navigateToUrl'];
|
||||
serverBasePath: string;
|
||||
theme: WithEuiThemeProps['theme'];
|
||||
}
|
||||
|
||||
interface State {
|
||||
|
|
@ -42,7 +48,7 @@ interface State {
|
|||
|
||||
const popoutContentId = 'headerSpacesMenuContent';
|
||||
|
||||
export class NavControlPopover extends Component<Props, State> {
|
||||
class NavControlPopoverUI extends Component<Props, State> {
|
||||
private activeSpace$?: Subscription;
|
||||
|
||||
constructor(props: Props) {
|
||||
|
|
@ -73,6 +79,7 @@ export class NavControlPopover extends Component<Props, State> {
|
|||
|
||||
public render() {
|
||||
const button = this.getActiveSpaceButton();
|
||||
const { theme } = this.props;
|
||||
|
||||
let element: React.ReactNode;
|
||||
if (this.state.loading || this.state.spaces.length < 2) {
|
||||
|
|
@ -110,6 +117,7 @@ export class NavControlPopover extends Component<Props, State> {
|
|||
panelPaddingSize="none"
|
||||
repositionOnScroll
|
||||
ownFocus
|
||||
zIndex={Number(theme.euiTheme.levels.navigation) + 1} // it needs to sit above the collapsible nav menu
|
||||
>
|
||||
{element}
|
||||
</EuiPopover>
|
||||
|
|
@ -199,3 +207,5 @@ export class NavControlPopover extends Component<Props, State> {
|
|||
});
|
||||
};
|
||||
}
|
||||
|
||||
export const NavControlPopover = withEuiTheme(NavControlPopoverUI);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue