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

@@ -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:

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}