A11y: Fix fastpass issues for share modal (#40386)

packages/grafana-e2e-selectors/src/selectors/components.ts

@@ -203,6 +203,7 @@ export const Components = {
   },
   FolderPicker: {
     container: 'Folder picker select container',
+    input: 'Select a folder',
   },
   ReadonlyFolderPicker: {
     container: 'data-testid Readonly folder picker select container',

public/app/core/components/Select/FolderPicker.tsx

@@ -27,6 +27,8 @@ export interface Props {
    * initialFolderId needs to have an value > -1 or an error will be thrown.
    */
   skipInitialLoad?: boolean;
+  /** The id of the search input. Use this to set a matching label with htmlFor */
+  inputId?: string;
 }
 
 interface State {
@@ -169,11 +171,13 @@ export class FolderPicker extends PureComponent<Props, State> {
 
   render() {
     const { folder } = this.state;
-    const { enableCreateNew } = this.props;
+    const { enableCreateNew, inputId } = this.props;
 
     return (
       <div aria-label={selectors.components.FolderPicker.container}>
         <AsyncSelect
+          inputId={inputId}
+          aria-label={selectors.components.FolderPicker.input}
           menuShouldPortal
           loadingMessage="Loading folders..."
           defaultOptions

public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap

@@ -6,6 +6,7 @@ exports[`FolderPicker should render 1`] = `
 >
   <AsyncSelect
     allowCustomValue={false}
+    aria-label="Select a folder"
     defaultOptions={true}
     defaultValue={null}
     loadOptions={[Function]}

public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx

@@ -1,6 +1,6 @@
 import React, { FormEvent, PureComponent } from 'react';
-import { RadioButtonGroup, Switch, Field, TextArea, ClipboardButton, Modal } from '@grafana/ui';
-import { SelectableValue, AppEvents } from '@grafana/data';
+import { ClipboardButton, Field, Modal, RadioButtonGroup, Switch, TextArea } from '@grafana/ui';
+import { AppEvents, SelectableValue } from '@grafana/data';
 import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
 import { appEvents } from 'app/core/core';
 import { buildIframeHtml } from './utils';
@@ -91,10 +91,15 @@ export class ShareEmbed extends PureComponent<Props, State> {
         </Field>
         <Field
           label="Embed HTML"
-          description="The HTML code below can be pasted and included in another web page. Unless anonymous access is enabled, 
+          description="The HTML code below can be pasted and included in another web page. Unless anonymous access is enabled,
                 the user viewing that page need to be signed into Grafana for the graph to load."
         >
-          <TextArea rows={5} value={iframeHtml} onChange={this.onIframeHtmlChange}></TextArea>
+          <TextArea
+            id="share-panel-embed-embed-html-textarea"
+            rows={5}
+            value={iframeHtml}
+            onChange={this.onIframeHtmlChange}
+          />
         </Field>
         <Modal.ButtonRow>
           <ClipboardButton variant="primary" getText={this.getIframeHtml} onClipboardCopy={this.onIframeHtmlCopy}>

public/app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal.tsx

@@ -51,10 +51,19 @@ export const AddLibraryPanelContents = ({ panel, initialFolderId, onDismiss }: A
         invalid={invalidInput}
         error={invalidInput ? 'Library panel with this name already exists' : ''}
       >
-        <Input name="name" value={panelName} onChange={(e) => setPanelName(e.currentTarget.value)} />
+        <Input
+          id="share-panel-library-panel-name-input"
+          name="name"
+          value={panelName}
+          onChange={(e) => setPanelName(e.currentTarget.value)}
+        />
       </Field>
       <Field label="Save in folder" description="Library panel permissions are derived from the folder permissions">
-        <FolderPicker onChange={({ id }) => setFolderId(id)} initialFolderId={initialFolderId} />
+        <FolderPicker
+          onChange={({ id }) => setFolderId(id)}
+          initialFolderId={initialFolderId}
+          inputId="share-panel-library-panel-folder-picker"
+        />
       </Field>
 
       <Modal.ButtonRow>