From 5e62bddd1da60ec02b913ca5585db96de9df91f1 Mon Sep 17 00:00:00 2001
From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Date: Mon, 12 Jul 2021 16:15:40 +0200
Subject: [PATCH]  BottomNavLinks: Accessible text for image and icon (#36650)

---
 packages/grafana-ui/src/components/Icon/Icon.mdx       | 4 +---
 public/app/core/components/sidemenu/BottomNavLinks.tsx | 4 ++--
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-ui/src/components/Icon/Icon.mdx b/packages/grafana-ui/src/components/Icon/Icon.mdx
index 8f664d2e870..ea3e936ca70 100644
--- a/packages/grafana-ui/src/components/Icon/Icon.mdx
+++ b/packages/grafana-ui/src/components/Icon/Icon.mdx
@@ -7,7 +7,6 @@ import { Icon } from './Icon';
 
 Grafana's wrapper component over [Font Awesome](https://fontawesome.com/) and Unicons icons
 
-
 ### Changing icon size
 
 By default `Icon` has width and height of `16px` and font-size of `14px`. Pass `className` to control icon's size:
@@ -15,8 +14,7 @@ By default `Icon` has width and height of `16px` and font-size of `14px`. Pass `
 ```jsx
 import { css } from 'emotion';
 
-<Icon name="check" />
+<Icon name="check" />;
 ```
 
-
 <Props of={Icon} />
diff --git a/public/app/core/components/sidemenu/BottomNavLinks.tsx b/public/app/core/components/sidemenu/BottomNavLinks.tsx
index 48531b75ad9..f750328e7bb 100644
--- a/public/app/core/components/sidemenu/BottomNavLinks.tsx
+++ b/public/app/core/components/sidemenu/BottomNavLinks.tsx
@@ -50,8 +50,8 @@ export default class BottomNavLinks extends PureComponent<Props, State> {
       <div className="sidemenu-item dropdown dropup">
         <Link href={link.url} className="sidemenu-link" target={link.target}>
           <span className="icon-circle sidemenu-icon">
-            {link.icon && <Icon name={link.icon as IconName} size="xl" />}
-            {link.img && <img src={link.img} />}
+            {link.icon && <Icon name={link.icon as IconName} size="xl" title="Help icon" />}
+            {link.img && <img src={link.img} alt="Profile picture" />}
           </span>
         </Link>
         <ul className="dropdown-menu dropdown-menu--sidemenu" role="menu">