From d637d5d7461e77d13d0df6a7675340ad097369d9 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Wed, 24 Nov 2021 02:13:50 -0500
Subject: [PATCH] A11y/DashList: Make star button tab-navigable (#41479)
 (#42064)

(cherry picked from commit 47a7477cffa65a2b60c55738c96ff0befe1a240c)

Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>
---
 .../grafana-ui/src/components/Alert/Alert.tsx |  2 +-
 .../app/plugins/panel/dashlist/DashList.tsx   | 86 +++++++++++++++++--
 public/app/plugins/panel/dashlist/styles.ts   |  5 +-
 3 files changed, 82 insertions(+), 11 deletions(-)

diff --git a/packages/grafana-ui/src/components/Alert/Alert.tsx b/packages/grafana-ui/src/components/Alert/Alert.tsx
index 831d0519e86..e6fd97d17bb 100644
--- a/packages/grafana-ui/src/components/Alert/Alert.tsx
+++ b/packages/grafana-ui/src/components/Alert/Alert.tsx
@@ -53,7 +53,7 @@ export const Alert = React.forwardRef<HTMLDivElement, Props>(
         <div className={styles.icon}>
           <Icon size="xl" name={getIconFromSeverity(severity) as IconName} />
         </div>
-        <div className={styles.body}>
+        <div className={styles.body} role="alert">
           <div className={styles.title}>{title}</div>
           {children && <div className={styles.content}>{children}</div>}
         </div>
diff --git a/public/app/plugins/panel/dashlist/DashList.tsx b/public/app/plugins/panel/dashlist/DashList.tsx
index 098df52154b..97dff3fb932 100644
--- a/public/app/plugins/panel/dashlist/DashList.tsx
+++ b/public/app/plugins/panel/dashlist/DashList.tsx
@@ -1,9 +1,11 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { take } from 'lodash';
+import { css, cx } from '@emotion/css';
 
-import { InterpolateFunction, PanelProps } from '@grafana/data';
-import { CustomScrollbar, Icon, useStyles2 } from '@grafana/ui';
-
+import { GrafanaTheme2, InterpolateFunction, PanelProps } from '@grafana/data';
+import { CustomScrollbar, stylesFactory, useStyles2 } from '@grafana/ui';
+import { Icon, IconProps } from '@grafana/ui/src/components/Icon/Icon';
+import { getFocusStyles } from '@grafana/ui/src/themes/mixins';
 import { getBackendSrv } from 'app/core/services/backend_srv';
 import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
 import impressionSrv from 'app/core/services/impression_srv';
@@ -141,9 +143,14 @@ export function DashList(props: PanelProps<DashListOptions>) {
                         </a>
                         {dash.folderTitle && <div className={css.dashlistFolder}>{dash.folderTitle}</div>}
                       </div>
-                      <span className={css.dashlistStar} onClick={(e) => toggleDashboardStar(e, dash)}>
-                        <Icon name={dash.isStarred ? 'favorite' : 'star'} type={dash.isStarred ? 'mono' : 'default'} />
-                      </span>
+                      <IconToggle
+                        aria-label={`Star dashboard "${dash.title}".`}
+                        className={css.dashlistStar}
+                        enabled={{ name: 'favorite', type: 'mono' }}
+                        disabled={{ name: 'star', type: 'default' }}
+                        checked={dash.isStarred}
+                        onClick={(e) => toggleDashboardStar(e, dash)}
+                      />
                     </div>
                   </li>
                 ))}
@@ -154,3 +161,68 @@ export function DashList(props: PanelProps<DashListOptions>) {
     </CustomScrollbar>
   );
 }
+
+interface IconToggleProps extends Partial<IconProps> {
+  enabled: IconProps;
+  disabled: IconProps;
+  checked: boolean;
+}
+
+function IconToggle({
+  enabled,
+  disabled,
+  checked,
+  onClick,
+  className,
+  'aria-label': ariaLabel,
+  ...otherProps
+}: IconToggleProps) {
+  const toggleCheckbox = useCallback(
+    (e: React.MouseEvent<HTMLInputElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      onClick?.(e);
+    },
+    [onClick]
+  );
+
+  const iconPropsOverride = checked ? enabled : disabled;
+  const iconProps = { ...otherProps, ...iconPropsOverride };
+  const styles = useStyles2(getCheckboxStyles);
+  return (
+    <label className={styles.wrapper}>
+      <input
+        type="checkbox"
+        checked={checked}
+        onClick={toggleCheckbox}
+        className={styles.checkBox}
+        aria-label={ariaLabel}
+      />
+      <Icon className={cx(styles.icon, className)} {...iconProps} />
+    </label>
+  );
+}
+
+export const getCheckboxStyles = stylesFactory((theme: GrafanaTheme2) => {
+  return {
+    wrapper: css({
+      display: 'flex',
+      alignSelf: 'center',
+      cursor: 'pointer',
+      zIndex: 100,
+    }),
+    checkBox: css({
+      appearance: 'none',
+      '&:focus-visible + *': {
+        ...getFocusStyles(theme),
+        borderRadius: theme.shape.borderRadius(1),
+      },
+    }),
+    icon: css({
+      marginBottom: 0,
+      verticalAlign: 'baseline',
+      display: 'flex',
+    }),
+  };
+});
diff --git a/public/app/plugins/panel/dashlist/styles.ts b/public/app/plugins/panel/dashlist/styles.ts
index 8e4af44e766..525f79d0cd2 100644
--- a/public/app/plugins/panel/dashlist/styles.ts
+++ b/public/app/plugins/panel/dashlist/styles.ts
@@ -23,10 +23,9 @@ export const getStyles = (theme: GrafanaTheme2) => ({
   `,
 
   dashlistStar: css`
-    display: flex;
-    align-items: center;
+    align-self: center;
+    margin-right: 0px;
     color: ${theme.colors.secondary.text};
-    cursor: pointer;
     z-index: 1;
   `,