random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-04-22 17:44:58 +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 { .input-type-head-text-field {
width: 100%; width: 100%;
} }
.input-query-form {
width: 100%;
}
textarea { textarea {
width: 100%; width: 100%;
line-height: 1; line-height: 1;

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

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

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

@ -6,10 +6,15 @@ exports[`inputTypeahead renders <input /> 1`] = `
> >
<Stack <Stack
horizontal={true} horizontal={true}
>
<form
aria-labelledby="input"
className="input-query-form"
> >
<StyledTextFieldBase <StyledTextFieldBase
ariaLabel="Input query" ariaLabel="Input query"
className="input-type-head-text-field" className="input-type-head-text-field"
id="input"
multiline={false} multiline={false}
onChange={[Function]} onChange={[Function]}
onFocus={[Function]} onFocus={[Function]}
@ -17,6 +22,7 @@ exports[`inputTypeahead renders <input /> 1`] = `
placeholder="placeholder" placeholder="placeholder"
rows={1} rows={1}
/> />
</form>
</Stack> </Stack>
</div> </div>
`; `;
@ -27,10 +33,15 @@ exports[`inputTypeahead renders <textarea /> 1`] = `
> >
<Stack <Stack
horizontal={true} horizontal={true}
>
<form
aria-labelledby="input"
className="input-query-form"
> >
<StyledTextFieldBase <StyledTextFieldBase
ariaLabel="Input query" ariaLabel="Input query"
className="input-type-head-text-field" className="input-type-head-text-field"
id="input"
multiline={true} multiline={true}
onChange={[Function]} onChange={[Function]}
onFocus={[Function]} onFocus={[Function]}
@ -38,6 +49,7 @@ exports[`inputTypeahead renders <textarea /> 1`] = `
placeholder="placeholder" placeholder="placeholder"
rows={1} rows={1}
/> />
</form>
</Stack> </Stack>
</div> </div>
`; `;