From a981ea22fb83849255d240e82a5a2ecbc01e036b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@grafana.com>
Date: Thu, 14 Oct 2021 07:13:15 +0200
Subject: [PATCH] A11y: Fix fastpass issues for share modal (#40386)

---
 .../src/selectors/components.ts                     |  1 +
 public/app/core/components/Select/FolderPicker.tsx  |  6 +++++-
 .../Select/__snapshots__/FolderPicker.test.tsx.snap |  1 +
 .../dashboard/components/ShareModal/ShareEmbed.tsx  | 13 +++++++++----
 .../AddLibraryPanelModal/AddLibraryPanelModal.tsx   | 13 +++++++++++--
 5 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/packages/grafana-e2e-selectors/src/selectors/components.ts b/packages/grafana-e2e-selectors/src/selectors/components.ts
index ae23016feea..7267d46db99 100644
--- a/packages/grafana-e2e-selectors/src/selectors/components.ts
+++ b/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',
diff --git a/public/app/core/components/Select/FolderPicker.tsx b/public/app/core/components/Select/FolderPicker.tsx
index 9ee045e4b12..35aad433894 100644
--- a/public/app/core/components/Select/FolderPicker.tsx
+++ b/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
diff --git a/public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap b/public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap
index a316880bbc5..66b068f7bf0 100644
--- a/public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap
+++ b/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]}
diff --git a/public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx b/public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx
index f24a060b91b..cbbd35b11c7 100644
--- a/public/app/features/dashboard/components/ShareModal/ShareEmbed.tsx
+++ b/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}>
diff --git a/public/app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal.tsx b/public/app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal.tsx
index 06aa19ce23a..e8c12b97c3d 100644
--- a/public/app/features/library-panels/components/AddLibraryPanelModal/AddLibraryPanelModal.tsx
+++ b/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>