mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-06-05 15:12:04 +01:00
Bug 2748872: "Back" button is not keyboard accessible which is present under "Email" screen. (#1665)
* Keyboard navigation was not present to the back button on the add row table dialog which has been added through this commit * Update PanelComponent.less
This commit is contained in:
parent
d305eb9f9b
commit
b419bec5a3
@ -112,8 +112,9 @@
|
|||||||
margin-top: 28px;
|
margin-top: 28px;
|
||||||
margin-left: 4px !important;
|
margin-left: 4px !important;
|
||||||
}
|
}
|
||||||
.addRemoveIcon [alt="editEntity"]:focus,.addRemoveIconLabel [alt="editEntity"]:focus{
|
.addRemoveIcon [alt="editEntity"]:focus,
|
||||||
border:1px dashed #605E5C
|
.addRemoveIconLabel [alt="editEntity"]:focus {
|
||||||
|
border: 1px dashed #605e5c;
|
||||||
}
|
}
|
||||||
.addNewParamStyle {
|
.addNewParamStyle {
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
@ -153,6 +154,9 @@
|
|||||||
.backImageIcon {
|
.backImageIcon {
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
}
|
}
|
||||||
|
[alt="back"]:focus {
|
||||||
|
border: 1px solid #605e5c;
|
||||||
|
}
|
||||||
.addEntityDatePicker {
|
.addEntityDatePicker {
|
||||||
max-width: 145px;
|
max-width: 145px;
|
||||||
}
|
}
|
||||||
|
@ -213,12 +213,24 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
|
|||||||
setSelectedRow(rowEndex);
|
setSelectedRow(rowEndex);
|
||||||
setIsEntityValuePanelTrue();
|
setIsEntityValuePanelTrue();
|
||||||
};
|
};
|
||||||
|
const handlePress = (event: React.KeyboardEvent<HTMLElement>): void => {
|
||||||
|
if (event.key === "Enter" || event.key === "Space") {
|
||||||
|
setIsEntityValuePanelFalse();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
if (isEntityValuePanelOpen) {
|
if (isEntityValuePanelOpen) {
|
||||||
return (
|
return (
|
||||||
<Stack style={{ padding: "20px 34px" }}>
|
<Stack style={{ padding: "20px 34px" }}>
|
||||||
<Stack horizontal {...columnProps}>
|
<Stack horizontal {...columnProps}>
|
||||||
<Image {...backImageProps} src={RevertBackIcon} alt="back" onClick={() => setIsEntityValuePanelFalse()} />
|
<Image
|
||||||
|
{...backImageProps}
|
||||||
|
src={RevertBackIcon}
|
||||||
|
alt="back"
|
||||||
|
tabIndex={0}
|
||||||
|
onClick={setIsEntityValuePanelFalse}
|
||||||
|
onKeyPress={handlePress}
|
||||||
|
/>
|
||||||
<Label>{entityAttributeProperty}</Label>
|
<Label>{entityAttributeProperty}</Label>
|
||||||
</Stack>
|
</Stack>
|
||||||
<TextField
|
<TextField
|
||||||
|
Loading…
x
Reference in New Issue
Block a user