From 6db0af22238b45b7aef4cc340d022a37e8ca566a Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Wed, 6 Oct 2021 13:02:54 -0400
Subject: [PATCH] A11y: Fix fastpass issues for dashboard management pages
 (#39940) (#40065)

* A11y: Fix fastpass issues for dashboard pages
See #39429

(cherry picked from commit 1ce750471f257982847d3e9899dd9721bf97c6e3)

Co-authored-by: kay delaney <45561153+kaydelaney@users.noreply.github.com>
---
 packages/grafana-data/src/types/select.ts     |  1 +
 .../Forms/RadioButtonGroup/RadioButton.tsx    |  4 +++
 .../RadioButtonGroup/RadioButtonGroup.tsx     |  1 +
 .../app/core/components/Select/SortPicker.tsx |  1 +
 .../editors/DashboardPickerByID.tsx           | 12 +++++++-
 .../VizTypePicker/PanelTypeCard.tsx           |  2 +-
 .../components/NewDashboardsFolder.tsx        |  1 +
 .../LibraryPanelCard/LibraryPanelCard.tsx     |  2 +-
 .../manage-dashboards/DashboardImportPage.tsx | 29 +++++++++----------
 public/app/features/playlist/PlaylistForm.tsx |  2 +-
 public/app/features/playlist/PlaylistPage.tsx |  2 +-
 .../features/search/components/ActionRow.tsx  |  4 +--
 .../search/components/SearchCheckbox.tsx      | 17 ++++++-----
 .../features/search/components/SearchItem.tsx |  7 ++++-
 .../search/components/SearchResults.tsx       |  4 +--
 .../search/components/SearchResultsFilter.tsx | 17 +++++++++--
 .../search/components/SectionHeader.tsx       |  1 +
 17 files changed, 71 insertions(+), 36 deletions(-)

diff --git a/packages/grafana-data/src/types/select.ts b/packages/grafana-data/src/types/select.ts
index db659062543..1243b2d0483 100644
--- a/packages/grafana-data/src/types/select.ts
+++ b/packages/grafana-data/src/types/select.ts
@@ -3,6 +3,7 @@
  */
 export interface SelectableValue<T = any> {
   label?: string;
+  ariaLabel?: string;
   value?: T;
   imgUrl?: string;
   icon?: string;
diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
index 38f98307e47..257255ebdb6 100644
--- a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
+++ b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
@@ -4,6 +4,7 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { css } from '@emotion/css';
 import { getPropertiesForButtonSize } from '../commonStyles';
 import { getFocusStyles, getMouseFocusStyles } from '../../../themes/mixins';
+import { StringSelector } from '@grafana/e2e-selectors';
 
 export type RadioButtonSize = 'sm' | 'md';
 
@@ -16,6 +17,7 @@ export interface RadioButtonProps {
   id: string;
   onChange: () => void;
   fullWidth?: boolean;
+  'aria-label'?: StringSelector;
 }
 
 export const RadioButton: React.FC<RadioButtonProps> = ({
@@ -28,6 +30,7 @@ export const RadioButton: React.FC<RadioButtonProps> = ({
   name = undefined,
   description,
   fullWidth,
+  'aria-label': ariaLabel,
 }) => {
   const theme = useTheme2();
   const styles = getRadioButtonStyles(theme, size, fullWidth);
@@ -42,6 +45,7 @@ export const RadioButton: React.FC<RadioButtonProps> = ({
         id={id}
         checked={active}
         name={name}
+        aria-label={ariaLabel}
       />
       <label className={styles.radioLabel} htmlFor={id} title={description}>
         {children}
diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx
index 55f4ce42b69..c8bc83deff4 100644
--- a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx
+++ b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx
@@ -52,6 +52,7 @@ export function RadioButtonGroup<T>({
             disabled={isItemDisabled || disabled}
             active={value === o.value}
             key={`o.label-${i}`}
+            aria-label={o.ariaLabel}
             onChange={handleOnChange(o)}
             id={`option-${o.value}-${id}`}
             name={groupName.current}
diff --git a/public/app/core/components/Select/SortPicker.tsx b/public/app/core/components/Select/SortPicker.tsx
index 8488db7f38c..9ecdc6b6c60 100644
--- a/public/app/core/components/Select/SortPicker.tsx
+++ b/public/app/core/components/Select/SortPicker.tsx
@@ -34,6 +34,7 @@ export const SortPicker: FC<Props> = ({ onChange, value, placeholder, filter })
       onChange={onChange}
       value={selected ?? null}
       options={options}
+      aria-label="Sort"
       placeholder={placeholder ?? `Sort (Default ${DEFAULT_SORT.label})`}
       prefix={<Icon name={(value?.includes('asc') ? 'sort-amount-up' : 'sort-amount-down') as IconName} />}
     />
diff --git a/public/app/core/components/editors/DashboardPickerByID.tsx b/public/app/core/components/editors/DashboardPickerByID.tsx
index 33084541da9..100b1be6547 100644
--- a/public/app/core/components/editors/DashboardPickerByID.tsx
+++ b/public/app/core/components/editors/DashboardPickerByID.tsx
@@ -22,6 +22,7 @@ interface Props {
   isClearable?: boolean;
   invalid?: boolean;
   disabled?: boolean;
+  id?: string;
 }
 
 const getDashboards = (query = '') => {
@@ -38,11 +39,20 @@ const getDashboards = (query = '') => {
 /**
  * @deprecated prefer using dashboard uid rather than id
  */
-export const DashboardPickerByID: FC<Props> = ({ onChange, value, width, isClearable = false, invalid, disabled }) => {
+export const DashboardPickerByID: FC<Props> = ({
+  onChange,
+  value,
+  width,
+  isClearable = false,
+  invalid,
+  disabled,
+  id,
+}) => {
   const debouncedSearch = debounce(getDashboards, 300);
 
   return (
     <AsyncSelect
+      inputId={id}
       menuShouldPortal
       width={width}
       isClearable={isClearable}
diff --git a/public/app/features/dashboard/components/VizTypePicker/PanelTypeCard.tsx b/public/app/features/dashboard/components/VizTypePicker/PanelTypeCard.tsx
index f9560d02fda..b2fcb17c660 100644
--- a/public/app/features/dashboard/components/VizTypePicker/PanelTypeCard.tsx
+++ b/public/app/features/dashboard/components/VizTypePicker/PanelTypeCard.tsx
@@ -41,7 +41,7 @@ export const PanelTypeCard: React.FC<Props> = ({
       onClick={disabled ? undefined : onClick}
       title={isCurrent ? 'Click again to close this section' : plugin.name}
     >
-      <img className={styles.img} src={plugin.info.logos.small} />
+      <img className={styles.img} src={plugin.info.logos.small} alt={`${plugin.name} logo`} />
 
       <div className={styles.itemContent}>
         <div className={styles.name}>{title}</div>
diff --git a/public/app/features/folders/components/NewDashboardsFolder.tsx b/public/app/features/folders/components/NewDashboardsFolder.tsx
index bce9eda3468..80ff2c2a10a 100644
--- a/public/app/features/folders/components/NewDashboardsFolder.tsx
+++ b/public/app/features/folders/components/NewDashboardsFolder.tsx
@@ -57,6 +57,7 @@ export class NewDashboardsFolder extends PureComponent<Props> {
                   error={errors.folderName && errors.folderName.message}
                 >
                   <Input
+                    id="folder-name-input"
                     {...register('folderName', {
                       required: 'Folder name is required.',
                       validate: async (v) => await this.validateFolderName(v),
diff --git a/public/app/features/library-panels/components/LibraryPanelCard/LibraryPanelCard.tsx b/public/app/features/library-panels/components/LibraryPanelCard/LibraryPanelCard.tsx
index 7295c880dd6..406c2b990d4 100644
--- a/public/app/features/library-panels/components/LibraryPanelCard/LibraryPanelCard.tsx
+++ b/public/app/features/library-panels/components/LibraryPanelCard/LibraryPanelCard.tsx
@@ -84,7 +84,7 @@ function getStyles(theme: GrafanaTheme2) {
     metaContainer: css`
       display: flex;
       align-items: center;
-      color: ${theme.colors.text.disabled};
+      color: ${theme.colors.text.secondary};
       font-size: ${theme.typography.bodySmall.fontSize};
       padding-top: ${theme.spacing(0.5)};
 
diff --git a/public/app/features/manage-dashboards/DashboardImportPage.tsx b/public/app/features/manage-dashboards/DashboardImportPage.tsx
index b251556628d..5d2facd20d0 100644
--- a/public/app/features/manage-dashboards/DashboardImportPage.tsx
+++ b/public/app/features/manage-dashboards/DashboardImportPage.tsx
@@ -3,18 +3,7 @@ import { MapDispatchToProps, MapStateToProps } from 'react-redux';
 import { css } from '@emotion/css';
 import { AppEvents, GrafanaTheme2, NavModel } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import {
-  Button,
-  stylesFactory,
-  withTheme2,
-  Input,
-  TextArea,
-  Field,
-  Form,
-  Legend,
-  FileUpload,
-  Themeable2,
-} from '@grafana/ui';
+import { Button, stylesFactory, withTheme2, Input, TextArea, Field, Form, FileUpload, Themeable2 } from '@grafana/ui';
 import Page from 'app/core/components/Page/Page';
 import { connectWithCleanUp } from 'app/core/components/connectWithCleanUp';
 import { ImportDashboardOverview } from './components/ImportDashboardOverview';
@@ -94,11 +83,15 @@ class UnthemedDashboardImport extends PureComponent<Props> {
           </FileUpload>
         </div>
         <div className={styles.option}>
-          <Legend>Import via grafana.com</Legend>
           <Form onSubmit={this.getGcomDashboard} defaultValues={{ gcomDashboard: '' }}>
             {({ register, errors }) => (
-              <Field invalid={!!errors.gcomDashboard} error={errors.gcomDashboard && errors.gcomDashboard.message}>
+              <Field
+                label="Import via grafana.com"
+                invalid={!!errors.gcomDashboard}
+                error={errors.gcomDashboard && errors.gcomDashboard.message}
+              >
                 <Input
+                  id="url-input"
                   placeholder="Grafana.com dashboard URL or ID"
                   type="text"
                   {...register('gcomDashboard', {
@@ -112,17 +105,21 @@ class UnthemedDashboardImport extends PureComponent<Props> {
           </Form>
         </div>
         <div className={styles.option}>
-          <Legend>Import via panel json</Legend>
           <Form onSubmit={this.getDashboardFromJson} defaultValues={{ dashboardJson: '' }}>
             {({ register, errors }) => (
               <>
-                <Field invalid={!!errors.dashboardJson} error={errors.dashboardJson && errors.dashboardJson.message}>
+                <Field
+                  label="Import via panel json"
+                  invalid={!!errors.dashboardJson}
+                  error={errors.dashboardJson && errors.dashboardJson.message}
+                >
                   <TextArea
                     {...register('dashboardJson', {
                       required: 'Need a dashboard JSON model',
                       validate: validateDashboardJson,
                     })}
                     data-testid={selectors.components.DashboardImportPage.textarea}
+                    id="dashboard-json-textarea"
                     rows={10}
                   />
                 </Field>
diff --git a/public/app/features/playlist/PlaylistForm.tsx b/public/app/features/playlist/PlaylistForm.tsx
index 644cad2db40..6e5b6662c99 100644
--- a/public/app/features/playlist/PlaylistForm.tsx
+++ b/public/app/features/playlist/PlaylistForm.tsx
@@ -52,7 +52,7 @@ export const PlaylistForm: FC<PlaylistFormProps> = ({ onSubmit, playlist }) => {
                 <h3 className="page-headering">Add dashboards</h3>
 
                 <Field label="Add by title">
-                  <DashboardPickerByID onChange={addById} isClearable />
+                  <DashboardPickerByID onChange={addById} id="dashboard-picker" isClearable />
                 </Field>
 
                 <Field label="Add by tag">
diff --git a/public/app/features/playlist/PlaylistPage.tsx b/public/app/features/playlist/PlaylistPage.tsx
index 69a11f8321f..15d2f9652fc 100644
--- a/public/app/features/playlist/PlaylistPage.tsx
+++ b/public/app/features/playlist/PlaylistPage.tsx
@@ -98,7 +98,7 @@ export const PlaylistPage: FC<PlaylistPageProps> = ({ navModel }) => {
         {playlistToDelete && (
           <ConfirmModal
             title={playlistToDelete.name}
-            confirmText="delete"
+            confirmText="Delete"
             body={`Are you sure you want to delete '${playlistToDelete.name}' playlist?`}
             onConfirm={onDeletePlaylist}
             isOpen={Boolean(playlistToDelete)}
diff --git a/public/app/features/search/components/ActionRow.tsx b/public/app/features/search/components/ActionRow.tsx
index 141a42bcba0..e85a1573e32 100644
--- a/public/app/features/search/components/ActionRow.tsx
+++ b/public/app/features/search/components/ActionRow.tsx
@@ -8,8 +8,8 @@ import { SearchSrv } from 'app/core/services/search_srv';
 import { DashboardQuery, SearchLayout } from '../types';
 
 export const layoutOptions = [
-  { value: SearchLayout.Folders, icon: 'folder' },
-  { value: SearchLayout.List, icon: 'list-ul' },
+  { value: SearchLayout.Folders, icon: 'folder', ariaLabel: 'View by folders' },
+  { value: SearchLayout.List, icon: 'list-ul', ariaLabel: 'View as list' },
 ];
 
 const searchSrv = new SearchSrv();
diff --git a/public/app/features/search/components/SearchCheckbox.tsx b/public/app/features/search/components/SearchCheckbox.tsx
index 152090b8dec..a06703bfa28 100644
--- a/public/app/features/search/components/SearchCheckbox.tsx
+++ b/public/app/features/search/components/SearchCheckbox.tsx
@@ -6,14 +6,17 @@ interface Props {
   onClick?: React.MouseEventHandler<HTMLInputElement>;
   className?: string;
   editable?: boolean;
+  'aria-label'?: string;
 }
 
-export const SearchCheckbox: FC<Props> = memo(({ onClick, className, checked = false, editable = false }) => {
-  return editable ? (
-    <div onClick={onClick} className={className}>
-      <Checkbox value={checked} />
-    </div>
-  ) : null;
-});
+export const SearchCheckbox: FC<Props> = memo(
+  ({ onClick, className, checked = false, editable = false, 'aria-label': ariaLabel }) => {
+    return editable ? (
+      <div onClick={onClick} className={className}>
+        <Checkbox value={checked} aria-label={ariaLabel} />
+      </div>
+    ) : null;
+  }
+);
 
 SearchCheckbox.displayName = 'SearchCheckbox';
diff --git a/public/app/features/search/components/SearchItem.tsx b/public/app/features/search/components/SearchItem.tsx
index fc9783a9126..88c0b3b074b 100644
--- a/public/app/features/search/components/SearchItem.tsx
+++ b/public/app/features/search/components/SearchItem.tsx
@@ -56,7 +56,12 @@ export const SearchItem: FC<Props> = ({ item, editable, onToggleChecked, onTagSe
       className={styles.container}
     >
       <Card.Figure align={'center'} className={styles.checkbox}>
-        <SearchCheckbox editable={editable} checked={item.checked} onClick={handleCheckboxClick} />
+        <SearchCheckbox
+          aria-label="Select dashboard"
+          editable={editable}
+          checked={item.checked}
+          onClick={handleCheckboxClick}
+        />
       </Card.Figure>
       <Card.Meta separator={''}>
         <span className={styles.metaContainer}>
diff --git a/public/app/features/search/components/SearchResults.tsx b/public/app/features/search/components/SearchResults.tsx
index 078f56d3ce8..6c0e06e7602 100644
--- a/public/app/features/search/components/SearchResults.tsx
+++ b/public/app/features/search/components/SearchResults.tsx
@@ -67,9 +67,9 @@ export const SearchResults: FC<Props> = memo(
                   // The wrapper div is needed as the inner SearchItem has margin-bottom spacing
                   // And without this wrapper there is no room for that margin
                   return (
-                    <div style={style}>
+                    <li style={style}>
                       <SearchItem key={item.id} {...itemProps} item={item} />
-                    </div>
+                    </li>
                   );
                 }}
               </FixedSizeList>
diff --git a/public/app/features/search/components/SearchResultsFilter.tsx b/public/app/features/search/components/SearchResultsFilter.tsx
index 50f64b8e087..d1ea6ed9b62 100644
--- a/public/app/features/search/components/SearchResultsFilter.tsx
+++ b/public/app/features/search/components/SearchResultsFilter.tsx
@@ -42,7 +42,11 @@ export const SearchResultsFilter: FC<Props> = ({
 
   return (
     <div className={styles.wrapper}>
-      {editable && <Checkbox value={allChecked} onChange={onToggleAllChecked} />}
+      {editable && (
+        <div className={styles.checkboxWrapper}>
+          <Checkbox aria-label="Select all" value={allChecked} onChange={onToggleAllChecked} />
+        </div>
+      )}
       {showActions ? (
         <HorizontalGroup spacing="md">
           <Button disabled={!canMove} onClick={moveTo} icon="exchange-alt" variant="secondary">
@@ -73,9 +77,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
   const { sm, md } = theme.spacing;
   return {
     wrapper: css`
-      height: 35px;
+      height: ${theme.height.md}px;
       display: flex;
-      justify-content: space-between;
+      justify-content: flex-start;
+      gap: ${theme.spacing.md};
       align-items: center;
       margin-bottom: ${sm};
 
@@ -84,5 +89,11 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
         margin: 0 ${md} 0 ${sm};
       }
     `,
+    checkboxWrapper: css`
+      label {
+        line-height: 1.2;
+        width: max-content;
+      }
+    `,
   };
 });
diff --git a/public/app/features/search/components/SectionHeader.tsx b/public/app/features/search/components/SectionHeader.tsx
index a0704c7fee1..ede46263d54 100644
--- a/public/app/features/search/components/SectionHeader.tsx
+++ b/public/app/features/search/components/SectionHeader.tsx
@@ -53,6 +53,7 @@ export const SectionHeader: FC<SectionHeaderProps> = ({
         editable={editable}
         checked={section.checked}
         onClick={handleCheckboxClick}
+        aria-label="Select folder"
       />
 
       <div className={styles.icon}>