IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-09 15:43:23 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore: Low hanging a11y fruits (#37783)

Browse Source 
* aria-label disallowed on header element

* A11y issues for Getting Started and panel header

* Add unique identifier to search navigation

* Add dashboard header markup

* Fix news panel low hanging fruits
This commit is contained in:
Tobias Skarhed 2021-08-12 11:13:03 +02:00 committed by GitHub
parent 059ef4ee9a
commit b6ede8d96d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 15 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,7 +44,7 @@ export const Components = {
},
Panels: {
Panel: {
title: (title: string) => `Panel header ${title}`,
title: (title: string) => `data-testid Panel header ${title}`,
headerItems: (item: string) => `Panel header item ${item}`,
containerByTitle: (title: string) => `${title} panel`,
headerCornerInfo: (mode: string) => `Panel header ${mode}`,

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

@ -63,7 +63,7 @@ export const PageToolbar: FC<Props> = React.memo(
/>
</div>
)}
<nav className={styles.navElement}>
<nav aria-label="Search links" className={styles.navElement}>
{parent && parentHref && (
<>
<Link

2
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
View File

@ -44,7 +44,7 @@ export const PanelHeader: FC<Props> = ({ panel, error, isViewing, isEditing, dat
error={error}
/>
<div className={className}>
<PanelHeaderMenuTrigger aria-label={selectors.components.Panels.Panel.title(title)}>
<PanelHeaderMenuTrigger data-testid={selectors.components.Panels.Panel.title(title)}>
{({ closeMenu, panelMenuOpen }) => {
return (
<div className="panel-title">

6
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx
View File

@ -84,10 +84,10 @@ export class PanelHeaderCorner extends Component<Props> {
return (
<Tooltip content={content} placement="top-start" theme={theme}>
<div className={className} onClick={onClick} aria-label={ariaLabel}>
<i className="fa" />
<section className={className} onClick={onClick} aria-label={ariaLabel}>
<i aria-hidden className="fa" />
<span className="panel-info-corner-inner" />
</div>
</section>
</Tooltip>
);
}

4
public/app/plugins/panel/gettingstarted/GettingStarted.tsx
View File

@ -99,7 +99,7 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
</div>
{currentStep === steps.length - 1 && (
<div className={cx(styles.backForwardButtons, styles.previous)} onClick={this.onPreviousClick}>
<Button icon="angle-left" variant="secondary" />
<Button aria-label="To advanced tutorials" icon="angle-left" variant="secondary" />
</div>
)}
<div className={styles.content}>
@ -107,7 +107,7 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
</div>
{currentStep < steps.length - 1 && (
<div className={cx(styles.backForwardButtons, styles.forward)} onClick={this.onForwardClick}>
<Button icon="angle-right" variant="secondary" />
<Button aria-label="To basic tutorials" icon="angle-right" variant="secondary" />
</div>
)}
</>

7
public/app/plugins/panel/gettingstarted/components/DocsCard.tsx
View File

@ -16,7 +16,7 @@ export const DocsCard: FC<Props> = ({ card }) => {
return (
<div className={styles.card}>
<div className={cardContent}>
<a href={`${card.href}?utm_source=grafana_gettingstarted`}>
<a href={`${card.href}?utm_source=grafana_gettingstarted`} className={styles.url}>
<div className={styles.heading}>{card.done ? 'complete' : card.heading}</div>
<h4 className={styles.title}>{card.title}</h4>
<div>
@ -26,7 +26,7 @@ export const DocsCard: FC<Props> = ({ card }) => {
</div>
<a
href={`${card.learnHref}?utm_source=grafana_gettingstarted`}
className={styles.url}
className={styles.learnUrl}
target="_blank"
rel="noreferrer"
>
@ -56,6 +56,9 @@ const getStyles = stylesFactory((theme: GrafanaTheme, complete: boolean) => {
margin-bottom: ${theme.spacing.md};
`,
url: css`
display: inline-block;
`,
learnUrl: css`
border-top: 1px solid ${theme.colors.border1};
position: absolute;
bottom: 0;

2
public/app/plugins/panel/news/NewsPanel.tsx
View File

@ -83,6 +83,7 @@ export class NewsPanel extends PureComponent<Props, State> {
<article key={index} className={cx(styles.item, useWideLayout && styles.itemWide)}>
{showImage && item.ogImage && (
<a
tabIndex={-1}
href={textUtil.sanitizeUrl(item.link)}
target="_blank"
rel="noopener noreferrer"
@ -152,6 +153,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
`,
link: css`
color: ${theme.colors.text.link};
display: inline-block;
&:hover {
color: ${theme.colors.text.link};