From 414bcd0a78778b7c1614dfe943a0fdd14a6951ac Mon Sep 17 00:00:00 2001
From: Yaelle Chaudy <42030685+yaelleC@users.noreply.github.com>
Date: Wed, 1 Feb 2023 11:49:13 +0100
Subject: [PATCH] Annotations: Fix keyboard a11y in Annotation list (#57022)

* Fixed keyboard a11y in Annotation list

* prettier

* removed blue
---
 .../AnnotationSettingsList.tsx                | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.tsx b/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.tsx
index 4698576a747..33abef06a5c 100644
--- a/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.tsx
+++ b/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.tsx
@@ -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)}>