opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-08-01 18:44:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

A11y: Fix fastpass issues for /explore page (#39507)

Browse Source 
* Fix(A11y): add label to explore short url button

* Grafana-UI(A11y): Set Selects images alt attribute to their option label

* Update packages/grafana-ui/src/components/Select/SingleValue.tsx

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
This commit is contained in:
Giordano Ricci
2021-09-29 16:14:30 +01:00
committed by GitHub
parent df81676d9e
commit f61c8d3eed
3 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-ui/src/components/Select/SelectMenu.tsx
View File

@ -52,7 +52,7 @@ export const SelectMenuOptions = React.forwardRef<HTMLDivElement, React.PropsWit
aria-label="Select option"
>
{data.icon && <Icon name={data.icon as IconName} className={styles.optionIcon} />}
{data.imgUrl && <img className={styles.optionImage} src={data.imgUrl} />}
{data.imgUrl && <img className={styles.optionImage} src={data.imgUrl} alt={data.label || data.value} />}
<div className={styles.optionBody}>
<span>{renderOptionLabel ? renderOptionLabel(data) : children}</span>
{data.description && <div className={styles.optionDescription}>{data.description}</div>}

8
packages/grafana-ui/src/components/Select/SingleValue.tsx
View File

@ -46,6 +46,8 @@ type StylesType = ReturnType<typeof getStyles>;
interface Props
extends SingleValueProps<{
imgUrl?: string;
label?: string;
value: string;
loading?: boolean;
hideText?: boolean;
}> {
@ -61,7 +63,7 @@ export const SingleValue = (props: Props) => {
<components.SingleValue {...props}>
<div className={cx(styles.singleValue, disabled && styles.disabled)}>
{data.imgUrl ? (
<FadeWithImage loading={loading} imgUrl={data.imgUrl} styles={styles} />
<FadeWithImage loading={loading} imgUrl={data.imgUrl} styles={styles} alt={data.label || data.value} />
) : (
<SlideOutTransition horizontal size={16} visible={loading} duration={150}>
<div className={styles.container}>
@ -75,14 +77,14 @@ export const SingleValue = (props: Props) => {
);
};
const FadeWithImage = (props: { loading: boolean; imgUrl: string; styles: StylesType }) => {
const FadeWithImage = (props: { loading: boolean; imgUrl: string; styles: StylesType; alt: string }) => {
return (
<div className={props.styles.container}>
<FadeTransition duration={150} visible={props.loading}>
<Spinner className={props.styles.item} inline />
</FadeTransition>
<FadeTransition duration={150} visible={!props.loading}>
<img className={props.styles.item} src={props.imgUrl} />
<img className={props.styles.item} src={props.imgUrl} alt={props.alt} />
</FadeTransition>
</div>
);

6
public/app/features/explore/ExploreToolbar.tsx
View File

@ -146,7 +146,11 @@ export class UnConnectedExploreToolbar extends PureComponent<Props> {
) : null}
<Tooltip content={'Copy shortened link to the executed query'} placement="bottom">
<ToolbarButton icon="share-alt" onClick={() => createAndCopyShortLink(window.location.href)} />
<ToolbarButton
icon="share-alt"
onClick={() => createAndCopyShortLink(window.location.href)}
aria-label="Copy shortened link to the executed query"
/>
</Tooltip>
{!isLive && (