From f387cff83631bf9f17b2f5dd6a5444797cd05add Mon Sep 17 00:00:00 2001
From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Date: Thu, 4 Apr 2024 12:07:50 +0200
Subject: [PATCH] Accessibility: Default Icon to aria-hidden (#84362)

* Icon: aria hide icon, unless a label is set

* Update doc

* Remove weird auto import

* Fix fialing tests

* Add recommendation for Tooltip

* Consider more aria attributes to support Tooltip

* Handle tabIndex and aria-hidden case

* Add comment about aria-label
---
 packages/grafana-ui/src/components/Icon/Icon.mdx       |  8 ++++++++
 packages/grafana-ui/src/components/Icon/Icon.tsx       | 10 ++++++++++
 .../alerting/unified/components/rules/RulesFilter.tsx  |  9 +++++++--
 .../__snapshots__/VariableQueryEditor.test.tsx.snap    |  1 +
 4 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/Icon/Icon.mdx b/packages/grafana-ui/src/components/Icon/Icon.mdx
index 3246e997427..ae41fea0926 100644
--- a/packages/grafana-ui/src/components/Icon/Icon.mdx
+++ b/packages/grafana-ui/src/components/Icon/Icon.mdx
@@ -7,6 +7,14 @@ import { Icon } from './Icon';
 
 Grafana's wrapper component over [Font Awesome](https://fontawesome.com/) and Unicons icons
 
+## Accessibility
+
+`Icon` is aria-hidden by default. If your icon has semantic meaning, please provide a `title` or wrap it in a `Tooltip`.
+
+### Usage with Tooltip
+
+If you decide to use a `Tooltip` to wrap `Icon`, you need to set a `title` or `aria-label` on the `Icon` component in order for it to appear in the accessibility tree. `Tooltip` only provides `aria-describedby` on interaction.
+
 ### Changing icon size
 
 By default `Icon` has width and height of `16px` and font-size of `14px`. Pass `className` to control icon's size:
diff --git a/packages/grafana-ui/src/components/Icon/Icon.tsx b/packages/grafana-ui/src/components/Icon/Icon.tsx
index 8e08714225c..d33ed422b4d 100644
--- a/packages/grafana-ui/src/components/Icon/Icon.tsx
+++ b/packages/grafana-ui/src/components/Icon/Icon.tsx
@@ -13,6 +13,9 @@ export interface IconProps extends Omit<React.SVGProps<SVGElement>, 'onLoad' | '
   name: IconName;
   size?: IconSize;
   type?: IconType;
+  /**
+   * Give your icon a semantic meaning. The icon will be hidden from screen readers, unless this prop or an aria-label is provided.
+   */
   title?: string;
 }
 
@@ -60,6 +63,13 @@ export const Icon = React.forwardRef<SVGElement, IconProps>(
 
     return (
       <SVG
+        aria-hidden={
+          rest.tabIndex === undefined &&
+          !title &&
+          !rest['aria-label'] &&
+          !rest['aria-labelledby'] &&
+          !rest['aria-describedby']
+        }
         innerRef={ref}
         src={svgPath}
         width={svgWid}
diff --git a/public/app/features/alerting/unified/components/rules/RulesFilter.tsx b/public/app/features/alerting/unified/components/rules/RulesFilter.tsx
index 2f77f19184a..a8ce422fd02 100644
--- a/public/app/features/alerting/unified/components/rules/RulesFilter.tsx
+++ b/public/app/features/alerting/unified/components/rules/RulesFilter.tsx
@@ -162,7 +162,12 @@ const RulesFilter = ({ onFilterCleared = () => undefined }: RulesFilerProps) =>
                       </div>
                     }
                   >
-                    <Icon id="data-source-picker-inline-help" name="info-circle" size="sm" />
+                    <Icon
+                      id="data-source-picker-inline-help"
+                      name="info-circle"
+                      size="sm"
+                      title="Search by data sources help"
+                    />
                   </Tooltip>
                 </Stack>
               </Label>
@@ -232,7 +237,7 @@ const RulesFilter = ({ onFilterCleared = () => undefined }: RulesFilerProps) =>
                     <Stack gap={0.5}>
                       <span>Search</span>
                       <HoverCard content={<SearchQueryHelp />}>
-                        <Icon name="info-circle" size="sm" tabIndex={0} />
+                        <Icon name="info-circle" size="sm" tabIndex={0} title="Search help" />
                       </HoverCard>
                     </Stack>
                   </Label>
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/__snapshots__/VariableQueryEditor.test.tsx.snap b/public/app/plugins/datasource/cloud-monitoring/components/__snapshots__/VariableQueryEditor.test.tsx.snap
index b52a8a3d64b..e16162d1e3d 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/__snapshots__/VariableQueryEditor.test.tsx.snap
+++ b/public/app/plugins/datasource/cloud-monitoring/components/__snapshots__/VariableQueryEditor.test.tsx.snap
@@ -91,6 +91,7 @@ exports[`VariableQueryEditor renders correctly 1`] = `
             className="css-zyjsuv-input-suffix"
           >
             <svg
+              aria-hidden={true}
               className="css-1d3xu67-Icon"
               height={16}
               id="public/img/icons/unicons/angle-down.svg"