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>
This commit is contained in:
parent
641c67091f
commit
ea4a1ac12c
|
@ -5,7 +5,7 @@ exports[`NavControlPopover renders without crashing 1`] = `
|
|||
anchorPosition="downRight"
|
||||
button={
|
||||
<EuiHeaderSectionItemButton
|
||||
aria-controls="headerSpacesMenuList"
|
||||
aria-controls="headerSpacesMenuContent"
|
||||
aria-expanded={false}
|
||||
aria-haspopup="true"
|
||||
aria-label="loading"
|
||||
|
@ -39,6 +39,7 @@ exports[`NavControlPopover renders without crashing 1`] = `
|
|||
},
|
||||
}
|
||||
}
|
||||
id="headerSpacesMenuContent"
|
||||
onManageSpacesClick={[Function]}
|
||||
/>
|
||||
</EuiPopover>
|
||||
|
|
|
@ -4,6 +4,7 @@ exports[`SpacesDescription renders without crashing 1`] = `
|
|||
<EuiContextMenuPanel
|
||||
className="spcDescription"
|
||||
hasFocus={true}
|
||||
id="foo"
|
||||
items={Array []}
|
||||
title="Spaces"
|
||||
>
|
||||
|
|
|
@ -13,6 +13,7 @@ describe('SpacesDescription', () => {
|
|||
expect(
|
||||
shallow(
|
||||
<SpacesDescription
|
||||
id={'foo'}
|
||||
capabilities={{
|
||||
navLinks: {},
|
||||
management: {},
|
||||
|
|
|
@ -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',
|
||||
};
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -32,6 +32,8 @@ interface State {
|
|||
spaces: Space[];
|
||||
}
|
||||
|
||||
const popoutContentId = 'headerSpacesMenuContent';
|
||||
|
||||
export class NavControlPopover extends Component<Props, State> {
|
||||
private activeSpace$?: Subscription;
|
||||
|
||||
|
@ -71,6 +73,7 @@ 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}
|
||||
/>
|
||||
|
@ -78,6 +81,7 @@ export class NavControlPopover extends Component<Props, State> {
|
|||
} 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}
|
||||
|
|
Loading…
Reference in a new issue