From 8a8c023d7be983e862f2b20e0e307a38bf45add0 Mon Sep 17 00:00:00 2001
From: vaidankarswapnil <81285216+vaidankarswapnil@users.noreply.github.com>
Date: Fri, 3 Dec 2021 09:43:45 +0530
Subject: [PATCH] Fix Keyboard focus New Database button (#1167)

* Fix a11y new database button focus issue

* Update test snapshot and other issues

* fix issue for the menu button

* Issue fixed in Splash screen
---
 src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx | 5 +++++
 src/Explorer/SplashScreen/SplashScreen.tsx               | 5 ++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx b/src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx
index 0c3568ecf..4b0535175 100644
--- a/src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx
+++ b/src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx
@@ -23,10 +23,12 @@ import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneFor
 
 export interface AddDatabasePaneProps {
   explorer: Explorer;
+  buttonElement?: HTMLElement;
 }
 
 export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
   explorer: container,
+  buttonElement,
 }: AddDatabasePaneProps) => {
   const closeSidePanel = useSidePanel((state) => state.closeSidePanel);
   let throughput: number;
@@ -78,6 +80,9 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
       dataExplorerArea: Constants.Areas.ContextualPane,
     };
     TelemetryProcessor.trace(Action.CreateDatabase, ActionModifiers.Open, addDatabasePaneOpenMessage);
+    if (buttonElement) {
+      buttonElement.focus();
+    }
   }, []);
 
   const onSubmit = () => {
diff --git a/src/Explorer/SplashScreen/SplashScreen.tsx b/src/Explorer/SplashScreen/SplashScreen.tsx
index d6afda063..031214867 100644
--- a/src/Explorer/SplashScreen/SplashScreen.tsx
+++ b/src/Explorer/SplashScreen/SplashScreen.tsx
@@ -314,7 +314,10 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
           }
           useSidePanel
             .getState()
-            .openSidePanel("New " + getDatabaseName(), <AddDatabasePanel explorer={this.container} />);
+            .openSidePanel(
+              "New " + getDatabaseName(),
+              <AddDatabasePanel explorer={this.container} buttonElement={document.activeElement as HTMLElement} />
+            );
         },
       });
     }