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

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

Browse Source 
* 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
1 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.tsx
View File

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