From e3e8a7965abcda355c99d7b223f4bc748feb7d15 Mon Sep 17 00:00:00 2001
From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Date: Tue, 23 May 2023 17:19:10 +0200
Subject: [PATCH] A11y: Make list type picker display tooltip on hover (#68798)

* Change ariaLabel to description

* Description fallback for aria-label

* Add ariaLabel ass fallback for description
---
 .../src/components/Forms/RadioButtonGroup/RadioButton.tsx | 4 ++--
 public/app/features/search/page/components/ActionRow.tsx  | 8 ++++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
index 7c1d0768e10..e5394ae1263 100644
--- a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
+++ b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
@@ -55,10 +55,10 @@ export const RadioButton = React.forwardRef<HTMLInputElement, RadioButtonProps>(
           id={id}
           checked={active}
           name={name}
-          aria-label={ariaLabel}
+          aria-label={ariaLabel || description}
           ref={ref}
         />
-        <label className={styles.radioLabel} htmlFor={id} title={description}>
+        <label className={styles.radioLabel} htmlFor={id} title={description || ariaLabel}>
           {children}
         </label>
       </>
diff --git a/public/app/features/search/page/components/ActionRow.tsx b/public/app/features/search/page/components/ActionRow.tsx
index 57fcc7a4b0b..378908270bc 100644
--- a/public/app/features/search/page/components/ActionRow.tsx
+++ b/public/app/features/search/page/components/ActionRow.tsx
@@ -12,8 +12,12 @@ import { SearchLayout, SearchState } from '../../types';
 
 function getLayoutOptions() {
   return [
-    { value: SearchLayout.Folders, icon: 'folder', ariaLabel: t('search.actions.view-as-folders', 'View by folders') },
-    { value: SearchLayout.List, icon: 'list-ul', ariaLabel: t('search.actions.view-as-list', 'View as list') },
+    {
+      value: SearchLayout.Folders,
+      icon: 'folder',
+      description: t('search.actions.view-as-folders', 'View by folders'),
+    },
+    { value: SearchLayout.List, icon: 'list-ul', description: t('search.actions.view-as-list', 'View as list') },
   ];
 }