fixed graph input query JAWS screen reader issue (#1108)

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;

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
+          <form aria-labelledby="input" className="input-query-form">
-            multiline={useTextarea}
+            <TextField
-            rows={1}
+              multiline={useTextarea}
-            defaultValue={defaultValue}
+              rows={1}
-            ariaLabel="Input query"
+              id="input"
-            placeholder={placeholder}
+              defaultValue={defaultValue}
-            className="input-type-head-text-field"
+              ariaLabel="Input query"
-            value={defaultValue}
+              placeholder={placeholder}
-            onKeyDown={this.onSubmit}
+              className="input-type-head-text-field"
-            onFocus={() => this.setState({ isSuggestionVisible: true })}
+              value={defaultValue}
-            onChange={(_event, newValue?: string) => this.handleChange(newValue)}
+              onKeyDown={this.onSubmit}
-          />
+              onFocus={() => this.setState({ isSuggestionVisible: true })}
+              onChange={(_event, newValue?: string) => this.handleChange(newValue)}
+            />
+          </form>
           {this.props.showCancelButton && (
             <IconButton
               styles={iconButtonStyles}

src/Explorer/Controls/InputTypeahead/__snapshots__/InputTypeaheadComponent.test.tsx.snap

@@ -7,16 +7,22 @@ exports[`inputTypeahead renders <input /> 1`] = `
   <Stack
     horizontal={true}
   >
-    <StyledTextFieldBase
+    <form
-      ariaLabel="Input query"
+      aria-labelledby="input"
-      className="input-type-head-text-field"
+      className="input-query-form"
-      multiline={false}
+    >
-      onChange={[Function]}
+      <StyledTextFieldBase
-      onFocus={[Function]}
+        ariaLabel="Input query"
-      onKeyDown={[Function]}
+        className="input-type-head-text-field"
-      placeholder="placeholder"
+        id="input"
-      rows={1}
+        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
+    <form
-      ariaLabel="Input query"
+      aria-labelledby="input"
-      className="input-type-head-text-field"
+      className="input-query-form"
-      multiline={true}
+    >
-      onChange={[Function]}
+      <StyledTextFieldBase
-      onFocus={[Function]}
+        ariaLabel="Input query"
-      onKeyDown={[Function]}
+        className="input-type-head-text-field"
-      placeholder="placeholder"
+        id="input"
-      rows={1}
+        multiline={true}
-    />
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        placeholder="placeholder"
+        rows={1}
+      />
+    </form>
   </Stack>
 </div>
 `;