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

Dashboard: Add accessible landmark markup (#36753)

Browse Source 
* Add landmark markup

* Make panel titles h2

* Descibe panel landmarks

* Add nav elements and heading 1

* Reset line height and remove margin

* Make focus styles visible

* Change nav to section

* Add desc

* Fix focus styles cutoff
This commit is contained in:
Tobias Skarhed
2021-07-16 21:48:47 +02:00
committed by GitHub
parent 2172920095
commit cfd06775c0
10 changed files with 80 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/grafana-e2e-selectors/src/selectors/components.ts
View File

@@ -37,9 +37,9 @@ export const Components = {
},
Panels: {
Panel: {
title: (title: string) => `Panel header title item ${title}`,
title: (title: string) => `Panel header ${title}`,
headerItems: (item: string) => `Panel header item ${item}`,
containerByTitle: (title: string) => `Panel container title ${title}`,
containerByTitle: (title: string) => `${title} panel`,
headerCornerInfo: (mode: string) => `Panel header ${mode}`,
},
Visualization: {
@@ -157,13 +157,13 @@ export const Components = {
},
PageToolbar: {
container: () => '.page-toolbar',
item: (tooltip: string) => `Page toolbar button ${tooltip}`,
item: (tooltip: string) => `${tooltip}`,
},
QueryEditorToolbarItem: {
button: (title: string) => `QueryEditor toolbar item button ${title}`,
},
BackButton: {
backArrow: 'Go Back button',
backArrow: 'Go Back',
},
OptionsGroup: {
group: (title?: string) => (title ? `Options group ${title}` : 'Options group'),

48
packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
View File

@@ -63,24 +63,28 @@ export const PageToolbar: FC<Props> = React.memo(
/>
</div>
)}
{parent && parentHref && (
<>
<Link className={cx(styles.titleText, styles.parentLink, styles.titleLink)} href={parentHref}>
{parent} <span className={styles.parentIcon}></span>
</Link>
{titleHref && (
<span className={cx(styles.titleText, styles.titleDivider, styles.parentLink)} aria-hidden>
/
</span>
)}
</>
)}
{titleHref && (
<Link className={cx(styles.titleText, styles.titleLink)} href={titleHref}>
{title}
</Link>
)}
{!titleHref && <div className={styles.titleText}>{title}</div>}
<nav className={styles.navElement}>
{parent && parentHref && (
<>
<Link className={cx(styles.titleText, styles.parentLink, styles.titleLink)} href={parentHref}>
{parent} <span className={styles.parentIcon}></span>
</Link>
{titleHref && (
<span className={cx(styles.titleText, styles.titleDivider, styles.parentLink)} aria-hidden>
/
</span>
)}
</>
)}
{titleHref && (
<h1 className={styles.h1Styles}>
<Link className={cx(styles.titleText, styles.titleLink)} href={titleHref}>
{title}
</Link>
</h1>
)}
{!titleHref && <h1 className={styles.titleText}>{title}</h1>}
</nav>
{leftItems?.map((child, index) => (
<div className={styles.leftActionItem} key={index}>
{child}
@@ -147,6 +151,14 @@ const getStyles = (theme: GrafanaTheme2) => {
min-width: 0;
overflow: hidden;
`,
navElement: css`
display: flex;
`,
h1Styles: css`
margin: 0;
line-height: inherit;
display: flex;
`,
parentIcon: css`
margin-left: ${theme.spacing(0.5)};
`,