From e3503d2b9cf70c25c8670248bfe29c7575baa2ec Mon Sep 17 00:00:00 2001
From: Satyapriya Bai <v-satybai@microsoft.com>
Date: Mon, 12 Aug 2024 12:36:09 +0530
Subject: [PATCH] [accessibility-1217621]:[Usable - Azure Cosmos DB - Data
 Explorer]: Keyboard focus gets lost on the page which opens after activating
 "Data Explorer" menu item present under 'Overview' page.

---
 src/Explorer/Sidebar.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/Explorer/Sidebar.tsx b/src/Explorer/Sidebar.tsx
index 0a8d62247..55ae6e43a 100644
--- a/src/Explorer/Sidebar.tsx
+++ b/src/Explorer/Sidebar.tsx
@@ -208,7 +208,7 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
   const [expandedSize, setExpandedSize] = React.useState(300);
   const hasSidebar = userContext.apiType !== "Postgres" && userContext.apiType !== "VCoreMongo";
   const allotment = useRef<AllotmentHandle>(null);
-
+  const firstFocusableElementRef = useRef<HTMLButtonElement>(null);
   const expand = useCallback(() => {
     if (!expanded) {
       allotment.current.resize([expandedSize, Infinity]);
@@ -255,6 +255,12 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
     userContext.apiType === "VCoreMongo"
   );
 
+  useEffect(() => {
+    if (expanded && firstFocusableElementRef.current) {
+      firstFocusableElementRef.current.focus();
+    }
+  }, [expanded]);
+
   return (
     <Allotment ref={allotment} onChange={onChange} onDragEnd={onDragEnd} className="resourceTreeAndTabs">
       {/* Collections Tree - Start */}
@@ -278,6 +284,7 @@ export const SidebarContainer: React.FC<SidebarProps> = ({ explorer }) => {
                         disabled={loading}
                         title="Refresh"
                         onClick={onRefreshClick}
+                        ref={firstFocusableElementRef}
                       >
                         <ArrowSync12Regular />
                       </button>