From 9570495af5306085aee3d233dae05fd73fb5ed9c Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Wed, 29 Sep 2021 11:46:03 -0400
Subject: [PATCH] A11y: Fix fastpass issues for /explore page (#39507) (#39796)

* Fix(A11y): add label to explore short url button

* Grafana-UI(A11y): Set Selects images alt attribute to their option label

* Update packages/grafana-ui/src/components/Select/SingleValue.tsx

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
(cherry picked from commit f61c8d3eedae937e90f3822d2c74b64189c7461d)

Co-authored-by: Giordano Ricci <me@giordanoricci.com>
---
 packages/grafana-ui/src/components/Select/SelectMenu.tsx  | 2 +-
 packages/grafana-ui/src/components/Select/SingleValue.tsx | 8 +++++---
 public/app/features/explore/ExploreToolbar.tsx            | 6 +++++-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-ui/src/components/Select/SelectMenu.tsx b/packages/grafana-ui/src/components/Select/SelectMenu.tsx
index 628c8660365..8032180e566 100644
--- a/packages/grafana-ui/src/components/Select/SelectMenu.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectMenu.tsx
@@ -52,7 +52,7 @@ export const SelectMenuOptions = React.forwardRef<HTMLDivElement, React.PropsWit
         aria-label="Select option"
       >
         {data.icon && <Icon name={data.icon as IconName} className={styles.optionIcon} />}
-        {data.imgUrl && <img className={styles.optionImage} src={data.imgUrl} />}
+        {data.imgUrl && <img className={styles.optionImage} src={data.imgUrl} alt={data.label || data.value} />}
         <div className={styles.optionBody}>
           <span>{renderOptionLabel ? renderOptionLabel(data) : children}</span>
           {data.description && <div className={styles.optionDescription}>{data.description}</div>}
diff --git a/packages/grafana-ui/src/components/Select/SingleValue.tsx b/packages/grafana-ui/src/components/Select/SingleValue.tsx
index eb19839bb30..9f371c5d960 100644
--- a/packages/grafana-ui/src/components/Select/SingleValue.tsx
+++ b/packages/grafana-ui/src/components/Select/SingleValue.tsx
@@ -46,6 +46,8 @@ type StylesType = ReturnType<typeof getStyles>;
 interface Props
   extends SingleValueProps<{
     imgUrl?: string;
+    label?: string;
+    value: string;
     loading?: boolean;
     hideText?: boolean;
   }> {
@@ -61,7 +63,7 @@ export const SingleValue = (props: Props) => {
     <components.SingleValue {...props}>
       <div className={cx(styles.singleValue, disabled && styles.disabled)}>
         {data.imgUrl ? (
-          <FadeWithImage loading={loading} imgUrl={data.imgUrl} styles={styles} />
+          <FadeWithImage loading={loading} imgUrl={data.imgUrl} styles={styles} alt={data.label || data.value} />
         ) : (
           <SlideOutTransition horizontal size={16} visible={loading} duration={150}>
             <div className={styles.container}>
@@ -75,14 +77,14 @@ export const SingleValue = (props: Props) => {
   );
 };
 
-const FadeWithImage = (props: { loading: boolean; imgUrl: string; styles: StylesType }) => {
+const FadeWithImage = (props: { loading: boolean; imgUrl: string; styles: StylesType; alt: string }) => {
   return (
     <div className={props.styles.container}>
       <FadeTransition duration={150} visible={props.loading}>
         <Spinner className={props.styles.item} inline />
       </FadeTransition>
       <FadeTransition duration={150} visible={!props.loading}>
-        <img className={props.styles.item} src={props.imgUrl} />
+        <img className={props.styles.item} src={props.imgUrl} alt={props.alt} />
       </FadeTransition>
     </div>
   );
diff --git a/public/app/features/explore/ExploreToolbar.tsx b/public/app/features/explore/ExploreToolbar.tsx
index d3e42087edb..623879fdad4 100644
--- a/public/app/features/explore/ExploreToolbar.tsx
+++ b/public/app/features/explore/ExploreToolbar.tsx
@@ -146,7 +146,11 @@ export class UnConnectedExploreToolbar extends PureComponent<Props> {
               ) : null}
 
               <Tooltip content={'Copy shortened link to the executed query'} placement="bottom">
-                <ToolbarButton icon="share-alt" onClick={() => createAndCopyShortLink(window.location.href)} />
+                <ToolbarButton
+                  icon="share-alt"
+                  onClick={() => createAndCopyShortLink(window.location.href)}
+                  aria-label="Copy shortened link to the executed query"
+                />
               </Tooltip>
 
               {!isLive && (