From d6e734cc7c26f7e542828936c1ab139a1bc74b82 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Wed, 1 Dec 2021 11:27:45 -0500
Subject: [PATCH] Add missing aria labels (#42532) (#42556)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

(cherry picked from commit caf859f4980d81ef1917c506c587a3943dcc28fe)

Co-authored-by: Piotr Jamróz <pm.jamroz@gmail.com>
---
 .../datasource/graphite/components/AddGraphiteFunction.tsx      | 2 +-
 .../datasource/graphite/components/GraphiteQueryEditor.tsx      | 1 +
 .../app/plugins/datasource/graphite/components/PlayButton.tsx   | 2 +-
 .../app/plugins/datasource/graphite/components/TagsSection.tsx  | 2 +-
 4 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/public/app/plugins/datasource/graphite/components/AddGraphiteFunction.tsx b/public/app/plugins/datasource/graphite/components/AddGraphiteFunction.tsx
index c130bf0c5d9..938494d6f43 100644
--- a/public/app/plugins/datasource/graphite/components/AddGraphiteFunction.tsx
+++ b/public/app/plugins/datasource/graphite/components/AddGraphiteFunction.tsx
@@ -33,7 +33,7 @@ export function AddGraphiteFunction({ funcDefs }: Props) {
 
   return (
     <Segment
-      Component={<Button icon="plus" variant="secondary" className={cx(styles.button)} />}
+      Component={<Button icon="plus" variant="secondary" className={cx(styles.button)} aria-label="Add new function" />}
       options={options}
       onChange={setValue}
       inputMinWidth={150}
diff --git a/public/app/plugins/datasource/graphite/components/GraphiteQueryEditor.tsx b/public/app/plugins/datasource/graphite/components/GraphiteQueryEditor.tsx
index a06ee5f20b8..567e086d891 100644
--- a/public/app/plugins/datasource/graphite/components/GraphiteQueryEditor.tsx
+++ b/public/app/plugins/datasource/graphite/components/GraphiteQueryEditor.tsx
@@ -50,6 +50,7 @@ function GraphiteQueryEditorContent() {
         className={styles.toggleButton}
         icon="pen"
         variant="secondary"
+        aria-label="Toggle editor mode"
         onClick={() => {
           dispatch(actions.toggleEditorMode());
         }}
diff --git a/public/app/plugins/datasource/graphite/components/PlayButton.tsx b/public/app/plugins/datasource/graphite/components/PlayButton.tsx
index cc1084cc316..d17bf490632 100644
--- a/public/app/plugins/datasource/graphite/components/PlayButton.tsx
+++ b/public/app/plugins/datasource/graphite/components/PlayButton.tsx
@@ -8,5 +8,5 @@ export function PlayButton() {
   const onClick = useCallback(() => {
     dispatch(actions.unpause());
   }, [dispatch]);
-  return <Button icon="play" onClick={onClick} type="button" variant="secondary" />;
+  return <Button icon="play" onClick={onClick} type="button" variant="secondary" aria-label="Unpause query" />;
 }
diff --git a/public/app/plugins/datasource/graphite/components/TagsSection.tsx b/public/app/plugins/datasource/graphite/components/TagsSection.tsx
index c69e33378c2..11beee3172a 100644
--- a/public/app/plugins/datasource/graphite/components/TagsSection.tsx
+++ b/public/app/plugins/datasource/graphite/components/TagsSection.tsx
@@ -52,7 +52,7 @@ export function TagsSection({ tags, state }: Props) {
           }}
           loadOptions={debouncedGetTagsAsSegments}
           reloadOptionsOnChange={true}
-          Component={<Button icon="plus" variant="secondary" className={styles.button} />}
+          Component={<Button icon="plus" variant="secondary" className={styles.button} aria-label="Add new tag" />}
         />
       )}
       {state.paused && <PlayButton />}