From acc095a4820875990ecccade03d149c3a1b3861b Mon Sep 17 00:00:00 2001
From: Sunil Kumar Yadav <79906609+sunilyadav840@users.noreply.github.com>
Date: Thu, 23 Sep 2021 20:41:46 +0530
Subject: [PATCH] fixed graph input query JAWS screen reader issue (#1108)

---
 .../InputTypeahead/InputTypeahead.less        |  3 ++
 .../InputTypeaheadComponent.tsx               | 27 +++++-----
 .../InputTypeaheadComponent.test.tsx.snap     | 52 ++++++++++++-------
 3 files changed, 50 insertions(+), 32 deletions(-)

diff --git a/src/Explorer/Controls/InputTypeahead/InputTypeahead.less b/src/Explorer/Controls/InputTypeahead/InputTypeahead.less
index 1d68e3b7e..082fd937f 100644
--- a/src/Explorer/Controls/InputTypeahead/InputTypeahead.less
+++ b/src/Explorer/Controls/InputTypeahead/InputTypeahead.less
@@ -8,6 +8,9 @@
     .input-type-head-text-field {
         width: 100%;
     }
+    .input-query-form {
+        width: 100%;
+    }
     textarea {
         width: 100%;
         line-height: 1;
diff --git a/src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx b/src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx
index 2e9a2d104..13b91012a 100644
--- a/src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx
+++ b/src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx
@@ -160,18 +160,21 @@ export class InputTypeaheadComponent extends React.Component<
     return (
       <div className="input-typeahead-container">
         <Stack horizontal>
-          <TextField
-            multiline={useTextarea}
-            rows={1}
-            defaultValue={defaultValue}
-            ariaLabel="Input query"
-            placeholder={placeholder}
-            className="input-type-head-text-field"
-            value={defaultValue}
-            onKeyDown={this.onSubmit}
-            onFocus={() => this.setState({ isSuggestionVisible: true })}
-            onChange={(_event, newValue?: string) => this.handleChange(newValue)}
-          />
+          <form aria-labelledby="input" className="input-query-form">
+            <TextField
+              multiline={useTextarea}
+              rows={1}
+              id="input"
+              defaultValue={defaultValue}
+              ariaLabel="Input query"
+              placeholder={placeholder}
+              className="input-type-head-text-field"
+              value={defaultValue}
+              onKeyDown={this.onSubmit}
+              onFocus={() => this.setState({ isSuggestionVisible: true })}
+              onChange={(_event, newValue?: string) => this.handleChange(newValue)}
+            />
+          </form>
           {this.props.showCancelButton && (
             <IconButton
               styles={iconButtonStyles}
diff --git a/src/Explorer/Controls/InputTypeahead/__snapshots__/InputTypeaheadComponent.test.tsx.snap b/src/Explorer/Controls/InputTypeahead/__snapshots__/InputTypeaheadComponent.test.tsx.snap
index ca534c822..d25ab63ac 100644
--- a/src/Explorer/Controls/InputTypeahead/__snapshots__/InputTypeaheadComponent.test.tsx.snap
+++ b/src/Explorer/Controls/InputTypeahead/__snapshots__/InputTypeaheadComponent.test.tsx.snap
@@ -7,16 +7,22 @@ exports[`inputTypeahead renders <input /> 1`] = `
   <Stack
     horizontal={true}
   >
-    <StyledTextFieldBase
-      ariaLabel="Input query"
-      className="input-type-head-text-field"
-      multiline={false}
-      onChange={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      placeholder="placeholder"
-      rows={1}
-    />
+    <form
+      aria-labelledby="input"
+      className="input-query-form"
+    >
+      <StyledTextFieldBase
+        ariaLabel="Input query"
+        className="input-type-head-text-field"
+        id="input"
+        multiline={false}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        placeholder="placeholder"
+        rows={1}
+      />
+    </form>
   </Stack>
 </div>
 `;
@@ -28,16 +34,22 @@ exports[`inputTypeahead renders <textarea /> 1`] = `
   <Stack
     horizontal={true}
   >
-    <StyledTextFieldBase
-      ariaLabel="Input query"
-      className="input-type-head-text-field"
-      multiline={true}
-      onChange={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      placeholder="placeholder"
-      rows={1}
-    />
+    <form
+      aria-labelledby="input"
+      className="input-query-form"
+    >
+      <StyledTextFieldBase
+        ariaLabel="Input query"
+        className="input-type-head-text-field"
+        id="input"
+        multiline={true}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        placeholder="placeholder"
+        rows={1}
+      />
+    </form>
   </Stack>
 </div>
 `;