IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Navigation: Add aria-label to top section links to improve a11y for screen readers (#36953)

Browse Source
This commit is contained in:
Maria Alexandra
2021-08-16 15:10:57 +02:00
committed by GitHub
parent 37b0c20984
commit 1735f9a56b
6 changed files with 17 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-e2e-selectors/src/selectors/pages.ts
View File

@@ -133,7 +133,7 @@ export const Pages = {
Explore: {
url: '/explore',
General: {
container: 'Explore',
container: 'data-testid Explore',
graph: 'Explore Graph',
table: 'Explore Table',
scrollBar: () => '.scrollbar-view',

2
public/app/core/components/sidemenu/SideMenu.tsx
View File

@@ -24,7 +24,7 @@ export const SideMenu: FC = React.memo(() => {
}
return (
<nav className="sidemenu" data-testid="sidemenu">
<nav className="sidemenu" data-testid="sidemenu" aria-label="Main menu">
<a href={homeUrl} className="sidemenu__logo" key="logo">
<Branding.MenuLogo />
</a>

9
public/app/core/components/sidemenu/TopSectionItem.test.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { mount } from 'enzyme';
import { render, screen } from '@testing-library/react';
import TopSectionItem from './TopSectionItem';
import { MemoryRouter } from 'react-router-dom';
@@ -15,7 +15,7 @@ const setup = (propOverrides?: object) => {
propOverrides
);
return mount(
return render(
<MemoryRouter initialEntries={[{ pathname: '/', key: 'testKey' }]}>
<TopSectionItem {...props} />
</MemoryRouter>
@@ -24,7 +24,8 @@ const setup = (propOverrides?: object) => {
describe('Render', () => {
it('should render component', () => {
const wrapper = setup();
expect(wrapper).toMatchSnapshot();
setup();
expect(screen.getByText('Hello')).toBeInTheDocument();
expect(screen.getByRole('menu')).toHaveTextContent('Hello');
});
});

11
public/app/core/components/sidemenu/TopSectionItem.tsx
View File

@@ -17,11 +17,18 @@ const TopSectionItem: FC<Props> = ({ link, onClick }) => {
);
const anchor = link.url ? (
<Link className="sidemenu-link" href={link.url} target={link.target} onClick={onClick}>
<Link
className="sidemenu-link"
href={link.url}
target={link.target}
aria-label={link.text}
onClick={onClick}
aria-haspopup="true"
>
{linkContent}
</Link>
) : (
<a className="sidemenu-link" onClick={onClick}>
<a className="sidemenu-link" onClick={onClick} aria-label={link.text}>
{linkContent}
</a>
);

151
public/app/core/components/sidemenu/__snapshots__/TopSectionItem.test.tsx.snap
View File

@@ -1,151 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Render should render component 1`] = `
<MemoryRouter
initialEntries={
Array [
Object {
"key": "testKey",
"pathname": "/",
},
]
}
>
<Router
history={
Object {
"action": "POP",
"block": [Function],
"canGo": [Function],
"createHref": [Function],
"entries": Array [
Object {
"hash": "",
"key": "testKey",
"pathname": "/",
"search": "",
},
],
"go": [Function],
"goBack": [Function],
"goForward": [Function],
"index": 0,
"length": 1,
"listen": [Function],
"location": Object {
"hash": "",
"key": "testKey",
"pathname": "/",
"search": "",
},
"push": [Function],
"replace": [Function],
}
}
>
<TopSectionItem
link={
Object {
"icon": "cloud",
"text": "Hello",
"url": "/asd",
}
}
>
<div
className="sidemenu-item dropdown"
>
<Link
className="sidemenu-link"
href="/asd"
>
<Link
className="sidemenu-link"
to="/asd"
>
<LinkAnchor
className="sidemenu-link"
href="/asd"
navigate={[Function]}
>
<a
className="sidemenu-link"
href="/asd"
onClick={[Function]}
>
<span
className="icon-circle sidemenu-icon"
>
<Icon
name="cloud"
size="xl"
>
<div
className="css-1vzus6i-Icon"
>
<InlineSVG
cacheRequests={true}
className="css-sr6nr"
height={24}
src="public/img/iconsunicons/cloud.svg"
uniquifyIDs={false}
width={24}
/>
</div>
</Icon>
</span>
</a>
</LinkAnchor>
</Link>
</Link>
<SideMenuDropDown
link={
Object {
"icon": "cloud",
"text": "Hello",
"url": "/asd",
}
}
>
<ul
className="dropdown-menu dropdown-menu--sidemenu"
role="menu"
>
<li
className="side-menu-header"
>
<Link
className="side-menu-header-link"
href="/asd"
>
<Link
className="side-menu-header-link"
to="/asd"
>
<LinkAnchor
className="side-menu-header-link"
href="/asd"
navigate={[Function]}
>
<a
className="side-menu-header-link"
href="/asd"
onClick={[Function]}
>
<span
className="sidemenu-item-text"
>
Hello
</span>
</a>
</LinkAnchor>
</Link>
</Link>
</li>
</ul>
</SideMenuDropDown>
</div>
</TopSectionItem>
</Router>
</MemoryRouter>
`;

2
public/app/features/explore/ExplorePaneContainer.tsx
View File

@@ -86,7 +86,7 @@ export class ExplorePaneContainerUnconnected extends React.PureComponent<Props>
render() {
const exploreClass = this.props.split ? 'explore explore-split' : 'explore';
return (
<div className={exploreClass} ref={this.getRef} aria-label={selectors.pages.Explore.General.container}>
<div className={exploreClass} ref={this.getRef} data-testid={selectors.pages.Explore.General.container}>
{this.props.initialized && <Explore exploreId={this.props.exploreId} />}
</div>
);