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

fixed input parameter keyboard accessibility issue (#1071)

Browse Source 
* fixed input parameter keyboard accessibility issue

* Fixed autofocus and role issue

* make autofocus on close button
This commit is contained in:
Sunil Kumar Yadav 2021-09-17 02:53:43 +05:30 committed by GitHub
parent 3032f689b6
commit 38c3761260
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 646 additions and 624 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Explorer/Panes/ExecuteSprocParamsPane/ExecuteSprocParamsPane.tsx
View File

@ -153,7 +153,7 @@ export const ExecuteSprocParamsPane: FunctionComponent<ExecuteSprocParamsPanePro
selectedKey={paramKeyValue && paramKeyValue.key}
/>
))}
<Stack horizontal onClick={addNewParamAtLastIndex}>
<Stack horizontal onClick={addNewParamAtLastIndex} tabIndex={0}>
<Image {...imageProps} src={AddPropertyIcon} alt="Add param" />
<Text className="addNewParamStyle">Add New Param</Text>
</Stack>

8
src/Explorer/Panes/ExecuteSprocParamsPane/InputParameter.tsx
View File

@ -59,30 +59,36 @@ export const InputParameter: FunctionComponent<InputParameterProps> = ({
onChange={onParamKeyChange}
options={options}
styles={dropdownStyles}
tabIndex={0}
/>
<TextField
label={inputLabel && inputLabel}
id="confirmCollectionId"
autoFocus
value={paramValue}
onChange={onParamValueChange}
/>
{isAddRemoveVisible && (
<>
<div tabIndex={0}>
<Image
{...imageProps}
src={EntityCancelIcon}
alt="Delete param"
id="deleteparam"
role="button"
onClick={onDeleteParamKeyPress}
/>
</div>
<div tabIndex={0}>
<Image
{...imageProps}
src={AddPropertyIcon}
alt="Add param"
id="addparam"
role="button"
onClick={onAddNewParamKeyPress}
/>
</div>
</>
)}
</Stack>

28
src/Explorer/Panes/ExecuteSprocParamsPane/__snapshots__/ExecuteSprocParamsPane.test.tsx.snap
View File

@ -345,6 +345,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
},
}
}
tabIndex={0}
>
<DropdownBase
label="Key"
@ -363,6 +364,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
}
selectedKey="string"
styles={[Function]}
tabIndex={0}
theme={
Object {
"disableGlobalClassNames": false,
@ -664,6 +666,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
responsiveMode={3}
selectedKey="string"
styles={[Function]}
tabIndex={0}
theme={
Object {
"disableGlobalClassNames": false,
@ -1562,14 +1565,12 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
</DropdownBase>
</Dropdown>
<StyledTextFieldBase
autoFocus={true}
id="confirmCollectionId"
key=".0:$.1"
label="Value"
onChange={[Function]}
>
<TextFieldBase
autoFocus={true}
deferredValidationTime={200}
id="confirmCollectionId"
label="Value"
@ -2155,7 +2156,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
<input
aria-invalid={false}
aria-labelledby="TextFieldLabel3"
autoFocus={true}
className="ms-TextField-field field-77"
id="confirmCollectionId"
onBlur={[Function]}
@ -2500,6 +2500,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
},
}
}
tabIndex={0}
>
<DropdownBase
label="Key"
@ -2518,6 +2519,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
}
selectedKey="string"
styles={[Function]}
tabIndex={0}
theme={
Object {
"disableGlobalClassNames": false,
@ -2819,6 +2821,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
responsiveMode={3}
selectedKey="string"
styles={[Function]}
tabIndex={0}
theme={
Object {
"disableGlobalClassNames": false,
@ -3717,7 +3720,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
</DropdownBase>
</Dropdown>
<StyledTextFieldBase
autoFocus={true}
id="confirmCollectionId"
key=".0:$.1"
label="Param"
@ -3725,7 +3727,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
value=""
>
<TextFieldBase
autoFocus={true}
deferredValidationTime={200}
id="confirmCollectionId"
label="Param"
@ -4312,7 +4313,6 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
<input
aria-invalid={false}
aria-labelledby="TextFieldLabel7"
autoFocus={true}
className="ms-TextField-field field-77"
id="confirmCollectionId"
onBlur={[Function]}
@ -4327,12 +4327,16 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
</div>
</TextFieldBase>
</StyledTextFieldBase>
<div
tabIndex={0}
>
<StyledImageBase
alt="Delete param"
className="addRemoveIconLabel"
height={30}
id="deleteparam"
onClick={[Function]}
role="button"
src=""
width={20}
>
@ -4342,6 +4346,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
height={30}
id="deleteparam"
onClick={[Function]}
role="button"
src=""
styles={[Function]}
theme={
@ -4636,17 +4641,23 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
onClick={[Function]}
onError={[Function]}
onLoad={[Function]}
role="button"
src=""
/>
</div>
</ImageBase>
</StyledImageBase>
</div>
<div
tabIndex={0}
>
<StyledImageBase
alt="Add param"
className="addRemoveIconLabel"
height={30}
id="addparam"
onClick={[Function]}
role="button"
src=""
width={20}
>
@ -4656,6 +4667,7 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
height={30}
id="addparam"
onClick={[Function]}
role="button"
src=""
styles={[Function]}
theme={
@ -4950,21 +4962,25 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
onClick={[Function]}
onError={[Function]}
onLoad={[Function]}
role="button"
src=""
/>
</div>
</ImageBase>
</StyledImageBase>
</div>
</div>
</Stack>
</InputParameter>
<Stack
horizontal={true}
onClick={[Function]}
tabIndex={0}
>
<div
className="ms-Stack css-54"
onClick={[Function]}
tabIndex={0}
>
<StyledImageBase
alt="Add param"