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:
MokireddySampath 2023-11-22 00:02:05 +05:30 committed by GitHub
parent d305eb9f9b
commit b419bec5a3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 3 deletions

View File

@ -112,8 +112,9 @@
margin-top: 28px;
margin-left: 4px !important;
}
.addRemoveIcon [alt="editEntity"]:focus,.addRemoveIconLabel [alt="editEntity"]:focus{
border:1px dashed #605E5C
.addRemoveIcon [alt="editEntity"]:focus,
.addRemoveIconLabel [alt="editEntity"]:focus {
border: 1px dashed #605e5c;
}
.addNewParamStyle {
margin-top: 5px;
@ -153,6 +154,9 @@
.backImageIcon {
margin-top: 8px;
}
[alt="back"]:focus {
border: 1px solid #605e5c;
}
.addEntityDatePicker {
max-width: 145px;
}

View File

@ -213,12 +213,24 @@ export const AddTableEntityPanel: FunctionComponent<AddTableEntityPanelProps> =
setSelectedRow(rowEndex);
setIsEntityValuePanelTrue();
};
const handlePress = (event: React.KeyboardEvent<HTMLElement>): void => {
if (event.key === "Enter" || event.key === "Space") {
setIsEntityValuePanelFalse();
}
};
if (isEntityValuePanelOpen) {
return (
<Stack style={{ padding: "20px 34px" }}>
<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>
</Stack>
<TextField