random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-04-15 22:27:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sunil Kumar Yadav 2021-09-23 20:41:46 +05:30 committed by GitHub
parent 288e6410f3
commit acc095a482
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 50 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/Explorer/Controls/InputTypeahead/InputTypeahead.less
View File

@ -8,6 +8,9 @@
.input-type-head-text-field {
width: 100%;
}
.input-query-form {
width: 100%;
}
textarea {
width: 100%;
line-height: 1;

3
src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx
View File

@ -160,9 +160,11 @@ export class InputTypeaheadComponent extends React.Component<
return (
<div className="input-typeahead-container">
<Stack horizontal>
<form aria-labelledby="input" className="input-query-form">
<TextField
multiline={useTextarea}
rows={1}
id="input"
defaultValue={defaultValue}
ariaLabel="Input query"
placeholder={placeholder}
@ -172,6 +174,7 @@ export class InputTypeaheadComponent extends React.Component<
onFocus={() => this.setState({ isSuggestionVisible: true })}
onChange={(_event, newValue?: string) => this.handleChange(newValue)}
/>
</form>
{this.props.showCancelButton && (
<IconButton
styles={iconButtonStyles}

12
src/Explorer/Controls/InputTypeahead/__snapshots__/InputTypeaheadComponent.test.tsx.snap
View File

@ -6,10 +6,15 @@ exports[`inputTypeahead renders <input /> 1`] = `
>
<Stack
horizontal={true}
>
<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]}
@ -17,6 +22,7 @@ exports[`inputTypeahead renders <input /> 1`] = `
placeholder="placeholder"
rows={1}
/>
</form>
</Stack>
</div>
`;
@ -27,10 +33,15 @@ exports[`inputTypeahead renders <textarea /> 1`] = `
>
<Stack
horizontal={true}
>
<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]}
@ -38,6 +49,7 @@ exports[`inputTypeahead renders <textarea /> 1`] = `
placeholder="placeholder"
rows={1}
/>
</form>
</Stack>
</div>
`;