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

@@ -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');
       });
   },
 });

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>
     );

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}

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}

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,
     });
 

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>
     );

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' && (
         <>

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>
           ))}