From ed7701c6b2e000cce44b13ce140eb9d5e7446b98 Mon Sep 17 00:00:00 2001
From: Yaelle Chaudy <42030685+yaelleC@users.noreply.github.com>
Date: Tue, 8 Mar 2022 12:42:03 +0100
Subject: [PATCH] Updated span for Button to be accessible (#46296)

---
 .../variables/editor/VariableEditorListRow.tsx   | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/public/app/features/variables/editor/VariableEditorListRow.tsx b/public/app/features/variables/editor/VariableEditorListRow.tsx
index 68b589cbdd9..272f29314ea 100644
--- a/public/app/features/variables/editor/VariableEditorListRow.tsx
+++ b/public/app/features/variables/editor/VariableEditorListRow.tsx
@@ -1,15 +1,15 @@
-import React, { ReactElement } from 'react';
 import { css } from '@emotion/css';
-import { Draggable } from 'react-beautiful-dnd';
 import { GrafanaTheme2 } from '@grafana/data';
-import { Icon, IconButton, useStyles2, useTheme2 } from '@grafana/ui';
 import { selectors } from '@grafana/e2e-selectors';
 import { reportInteraction } from '@grafana/runtime';
+import { Button, Icon, IconButton, useStyles2, useTheme2 } from '@grafana/ui';
+import React, { ReactElement } from 'react';
+import { Draggable } from 'react-beautiful-dnd';
 
-import { getVariableUsages, UsagesToNetwork, VariableUsageTree } from '../inspect/utils';
 import { hasOptions, isAdHoc, isQuery } from '../guard';
-import { KeyedVariableIdentifier } from '../state/types';
+import { getVariableUsages, UsagesToNetwork, VariableUsageTree } from '../inspect/utils';
 import { VariableUsagesButton } from '../inspect/VariableUsagesButton';
+import { KeyedVariableIdentifier } from '../state/types';
 import { VariableModel } from '../types';
 import { toKeyedVariableIdentifier } from '../utils';
 
@@ -52,7 +52,9 @@ export function VariableEditorListRow({
           }}
         >
           <td className={styles.column}>
-            <span
+            <Button
+              size="xs"
+              fill="text"
               onClick={(event) => {
                 event.preventDefault();
                 propsOnEdit(identifier);
@@ -61,7 +63,7 @@ export function VariableEditorListRow({
               aria-label={selectors.pages.Dashboard.Settings.Variables.List.tableRowNameFields(variable.name)}
             >
               {variable.name}
-            </span>
+            </Button>
           </td>
           <td
             className={styles.definitionColumn}