github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

fix management side nav accessibility (#51507)

Browse source
This commit is contained in:
Matthew Kime 2019-11-22 17:17:48 -06:00 • committed by GitHub
parent bcd0c09899
commit 762c6760f2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/legacy/ui/public/management/components/sidebar_nav.tsx
View file

@ -17,7 +17,7 @@
* under the License.
*/
import { EuiIcon, EuiSideNav, IconType } from '@elastic/eui';
import { EuiIcon, EuiSideNav, IconType, EuiScreenReaderOnly } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
import React from 'react';
@ -72,17 +72,26 @@ export class SidebarNav extends React.Component<SidebarNavProps, SidebarNavState
}
public render() {
const HEADER_ID = 'management-nav-header';
return (
<EuiSideNav
aria-label={i18n.translate('common.ui.management.nav.label', {
defaultMessage: 'Management',
})}
mobileTitle={this.renderMobileTitle()}
isOpenOnMobile={this.state.isSideNavOpenOnMobile}
toggleOpenOnMobile={this.toggleOpenOnMobile}
items={sideNavItems(this.props.sections, this.props.selectedId)}
className="mgtSideBarNav"
/>
<>
<EuiScreenReaderOnly>
<h2 id={HEADER_ID}>
{i18n.translate('common.ui.management.nav.label', {
defaultMessage: 'Management',
})}
</h2>
</EuiScreenReaderOnly>
<EuiSideNav
aria-labelledby={HEADER_ID}
mobileTitle={this.renderMobileTitle()}
isOpenOnMobile={this.state.isSideNavOpenOnMobile}
toggleOpenOnMobile={this.toggleOpenOnMobile}
items={sideNavItems(this.props.sections, this.props.selectedId)}
className="mgtSideBarNav"
/>
</>
);
}