From b419bec5a35db621fc2b7c5d2effbf892cdd08eb Mon Sep 17 00:00:00 2001
From: MokireddySampath <120497218+MokireddySampath@users.noreply.github.com>
Date: Wed, 22 Nov 2023 00:02:05 +0530
Subject: [PATCH] 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
---
 src/Explorer/Panes/PanelComponent.less            |  8 ++++++--
 src/Explorer/Panes/Tables/AddTableEntityPanel.tsx | 14 +++++++++++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/Explorer/Panes/PanelComponent.less b/src/Explorer/Panes/PanelComponent.less
index becdc49d8..481c6ee64 100644
--- a/src/Explorer/Panes/PanelComponent.less
+++ b/src/Explorer/Panes/PanelComponent.less
@@ -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;
 }
diff --git a/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx b/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx
index cee17de72..c9d9bda10 100644
--- a/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx
+++ b/src/Explorer/Panes/Tables/AddTableEntityPanel.tsx
@@ -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