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-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;
} }

View File

@ -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