Annotations: Fix keyboard a11y in Annotation list (#57022)

* Fixed keyboard a11y in Annotation list

* prettier

* removed blue
This commit is contained in:
Yaelle Chaudy 2023-02-01 11:49:13 +01:00 committed by GitHub
parent b9bbb4e1fb
commit 414bcd0a78
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -2,7 +2,7 @@ import React, { useState } from 'react';
import { arrayUtils, AnnotationQuery } from '@grafana/data';
import { getDataSourceSrv } from '@grafana/runtime';
import { DeleteButton, Icon, IconButton, VerticalGroup } from '@grafana/ui';
import { Button, DeleteButton, IconButton, VerticalGroup } from '@grafana/ui';
import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
import { DashboardModel } from '../../state/DashboardModel';
@ -33,7 +33,7 @@ export const AnnotationSettingsList = ({ dashboard, onNew, onEdit }: Props) => {
if (anno.enable === false) {
return (
<>
<Icon name="times" /> &nbsp;<em className="muted">(Disabled) &nbsp; {anno.name}</em>
<em className="muted">(Disabled) &nbsp; {anno.name}</em>
</>
);
}
@ -41,16 +41,12 @@ export const AnnotationSettingsList = ({ dashboard, onNew, onEdit }: Props) => {
if (anno.builtIn) {
return (
<>
<Icon name="comment-alt" /> &nbsp;<em className="muted">{anno.name} (Built-in)</em>
<em className="muted">{anno.name} &nbsp; (Built-in)</em>
</>
);
}
return (
<>
<Icon name="comment-alt" /> &nbsp;{anno.name}
</>
);
return <>{anno.name}</>;
};
const dataSourceSrv = getDataSourceSrv();
@ -70,11 +66,15 @@ export const AnnotationSettingsList = ({ dashboard, onNew, onEdit }: Props) => {
<tr key={`${annotation.name}-${idx}`}>
{annotation.builtIn ? (
<td role="gridcell" style={{ width: '90%' }} className="pointer" onClick={() => onEdit(idx)}>
{getAnnotationName(annotation)}
<Button size="sm" fill="text" variant="secondary">
{getAnnotationName(annotation)}
</Button>
</td>
) : (
<td role="gridcell" className="pointer" onClick={() => onEdit(idx)}>
{getAnnotationName(annotation)}
<Button size="sm" fill="text" variant="secondary">
{getAnnotationName(annotation)}
</Button>
</td>
)}
<td role="gridcell" className="pointer" onClick={() => onEdit(idx)}>