From db62ce477d33ddd0e214fb7691f446edf3c1155e Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Mon, 18 Oct 2021 13:51:26 +0100
Subject: [PATCH] A11y/Dashboard: Fix various fastpass issues for dashboard
 settings (#40335)

* A11y/Dashboard: Fix various fastpass issue for dashboard settings
See #39429
---
 e2e/suite1/specs/select-focus.spec.ts                     | 6 +++---
 public/app/core/components/Select/FolderPicker.tsx        | 2 +-
 .../components/DashboardSettings/AutoRefreshIntervals.tsx | 1 +
 .../components/DashboardSettings/GeneralSettings.tsx      | 5 +++--
 .../components/DashboardSettings/LinksSettings.test.tsx   | 2 +-
 .../components/DashboardSettings/TimePickerSettings.tsx   | 8 ++++++--
 .../components/LinksSettings/LinkSettingsEdit.tsx         | 8 +++++++-
 .../components/LinksSettings/LinkSettingsList.tsx         | 6 +++++-
 8 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/e2e/suite1/specs/select-focus.spec.ts b/e2e/suite1/specs/select-focus.spec.ts
index 26bb0f3e879..1a6f2e9ae25 100644
--- a/e2e/suite1/specs/select-focus.spec.ts
+++ b/e2e/suite1/specs/select-focus.spec.ts
@@ -13,7 +13,7 @@ e2e.scenario({
     e2e.components.FolderPicker.container()
       .should('be.visible')
       .within(() => {
-        e2e.components.Select.input().should('be.visible').click();
+        e2e().get('#dashboard-folder-input').should('be.visible').click();
       });
 
     e2e.components.Select.option().should('be.visible').first().click();
@@ -21,7 +21,7 @@ e2e.scenario({
     e2e.components.FolderPicker.container()
       .should('be.visible')
       .within(() => {
-        e2e.components.Select.input().should('exist').should('have.focus');
+        e2e().get('#dashboard-folder-input').should('exist').should('have.focus');
       });
 
     e2e.pages.Dashboard.Settings.General.title().click();
@@ -29,7 +29,7 @@ e2e.scenario({
     e2e.components.FolderPicker.container()
       .should('be.visible')
       .within(() => {
-        e2e.components.Select.input().should('exist').should('not.have.focus');
+        e2e().get('#dashboard-folder-input').should('exist').should('not.have.focus');
       });
   },
 });
diff --git a/public/app/core/components/Select/FolderPicker.tsx b/public/app/core/components/Select/FolderPicker.tsx
index 35aad433894..fac62a8b3cf 100644
--- a/public/app/core/components/Select/FolderPicker.tsx
+++ b/public/app/core/components/Select/FolderPicker.tsx
@@ -178,7 +178,6 @@ export class FolderPicker extends PureComponent<Props, State> {
         <AsyncSelect
           inputId={inputId}
           aria-label={selectors.components.FolderPicker.input}
-          menuShouldPortal
           loadingMessage="Loading folders..."
           defaultOptions
           defaultValue={folder}
@@ -187,6 +186,7 @@ export class FolderPicker extends PureComponent<Props, State> {
           loadOptions={this.debouncedSearch}
           onChange={this.onFolderChange}
           onCreateOption={this.createNewFolder}
+          menuShouldPortal
         />
       </div>
     );
diff --git a/public/app/features/dashboard/components/DashboardSettings/AutoRefreshIntervals.tsx b/public/app/features/dashboard/components/DashboardSettings/AutoRefreshIntervals.tsx
index 891c5607ee9..5554971c657 100644
--- a/public/app/features/dashboard/components/DashboardSettings/AutoRefreshIntervals.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/AutoRefreshIntervals.tsx
@@ -63,6 +63,7 @@ export const AutoRefreshIntervals: FC<Props> = ({
       invalid={!!invalidIntervalsMessage}
     >
       <Input
+        id="auto-refresh-input"
         invalid={!!invalidIntervalsMessage}
         value={intervalsString}
         onChange={onIntervalsChange}
diff --git a/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx
index d2a604c094d..0d6e41f6219 100644
--- a/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/GeneralSettings.tsx
@@ -86,16 +86,17 @@ export function GeneralSettingsUnconnected({ dashboard, updateTimeZone }: Props)
       </h3>
       <div className="gf-form-group">
         <Field label="Name">
-          <Input name="title" onBlur={onBlur} defaultValue={dashboard.title} />
+          <Input id="title-input" name="title" onBlur={onBlur} defaultValue={dashboard.title} />
         </Field>
         <Field label="Description">
-          <Input name="description" onBlur={onBlur} defaultValue={dashboard.description} />
+          <Input id="description-input" name="description" onBlur={onBlur} defaultValue={dashboard.description} />
         </Field>
         <Field label="Tags">
           <TagsInput tags={dashboard.tags} onChange={onTagsChange} />
         </Field>
         <Field label="Folder">
           <FolderPicker
+            inputId="dashboard-folder-input"
             initialTitle={dashboard.meta.folderTitle}
             initialFolderId={dashboard.meta.folderId}
             onChange={onFolderChange}
diff --git a/public/app/features/dashboard/components/DashboardSettings/LinksSettings.test.tsx b/public/app/features/dashboard/components/DashboardSettings/LinksSettings.test.tsx
index e9a33aa1d64..3ce382c8ce9 100644
--- a/public/app/features/dashboard/components/DashboardSettings/LinksSettings.test.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/LinksSettings.test.tsx
@@ -132,7 +132,7 @@ describe('LinksSettings', () => {
     expect(getTableBodyRows().length).toBe(links.length);
 
     // TODO remove skipPointerEventsCheck once https://github.com/jsdom/jsdom/issues/3232 is fixed
-    userEvent.click(within(getTableBody()).getAllByRole('button', { name: /delete/i })[0], undefined, {
+    userEvent.click(within(getTableBody()).getAllByRole('button', { name: 'Delete' })[0], undefined, {
       skipPointerEventsCheck: true,
     });
 
diff --git a/public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx
index 65a0b5a8fa1..122b4a201e3 100644
--- a/public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/TimePickerSettings.tsx
@@ -83,13 +83,17 @@ export class TimePickerSettings extends PureComponent<Props, State> {
           />
         </Field>
         <Field label="Hide time picker">
-          <Switch value={!!this.props.timePickerHidden} onChange={this.onHideTimePickerChange} />
+          <Switch
+            id="hide-time-picker-toggle"
+            value={!!this.props.timePickerHidden}
+            onChange={this.onHideTimePickerChange}
+          />
         </Field>
         <Field
           label="Refresh live dashboards"
           description="Continuously re-draw panels where the time range references 'now'"
         >
-          <Switch value={!!this.props.liveNow} onChange={this.onLiveNowChange} />
+          <Switch id="refresh-live-dashboards-toggle" value={!!this.props.liveNow} onChange={this.onLiveNowChange} />
         </Field>
       </CollapsableSection>
     );
diff --git a/public/app/features/dashboard/components/LinksSettings/LinkSettingsEdit.tsx b/public/app/features/dashboard/components/LinksSettings/LinkSettingsEdit.tsx
index 02348d9ad11..ac99dca1faf 100644
--- a/public/app/features/dashboard/components/LinksSettings/LinkSettingsEdit.tsx
+++ b/public/app/features/dashboard/components/LinksSettings/LinkSettingsEdit.tsx
@@ -87,7 +87,13 @@ export const LinkSettingsEdit: React.FC<LinkSettingsEditProps> = ({ editLinkIdx,
         <Input name="title" id="title" value={linkSettings.title} onChange={onChange} autoFocus={isNew} />
       </Field>
       <Field label="Type">
-        <Select menuShouldPortal value={linkSettings.type} options={linkTypeOptions} onChange={onTypeChange} />
+        <Select
+          inputId="link-type-input"
+          value={linkSettings.type}
+          options={linkTypeOptions}
+          onChange={onTypeChange}
+          menuShouldPortal
+        />
       </Field>
       {linkSettings.type === 'dashboards' && (
         <>
diff --git a/public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx b/public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx
index f3e1c69d929..f23cedc728b 100644
--- a/public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx
+++ b/public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx
@@ -94,7 +94,11 @@ export const LinkSettingsList: React.FC<LinkSettingsListProps> = ({ dashboard, o
                 <IconButton surface="header" aria-label="copy" name="copy" onClick={() => duplicateLink(link, idx)} />
               </td>
               <td style={{ width: '1%' }}>
-                <DeleteButton size="sm" onConfirm={() => deleteLink(idx)} />
+                <DeleteButton
+                  aria-label={`Delete link with title "${link.title}"`}
+                  size="sm"
+                  onConfirm={() => deleteLink(idx)}
+                />
               </td>
             </tr>
           ))}