From 6504358580d8fc6dc3426f447be5ddef7e3824c5 Mon Sep 17 00:00:00 2001
From: SATYA SB <107645008+satya07sb@users.noreply.github.com>
Date: Fri, 31 Jan 2025 10:53:18 +0530
Subject: [PATCH] [Programmatic Access - Azure Cosmos DB- Data Explorer]:
 Keyboard focus indicator is not visible on controls inside the settings.
 (#2016)

* [accessibility-3556824] : [Programmatic Access - Azure Cosmos DB- Data Explorer]: Keyboard focus indicator is not visible on controls inside the settings.

* Snapshots updated.

---------

Co-authored-by: Satyapriya Bai <v-satybai@microsoft.com>
---
 less/documentDB.less                                      | 8 ++++++++
 src/Explorer/Panes/SettingsPane/SettingsPane.tsx          | 2 +-
 .../SettingsPane/__snapshots__/SettingsPane.test.tsx.snap | 4 ++--
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/less/documentDB.less b/less/documentDB.less
index acce65d6a..b397b6ef5 100644
--- a/less/documentDB.less
+++ b/less/documentDB.less
@@ -1830,6 +1830,14 @@ input::-webkit-calendar-picker-indicator::after {
   transform: rotate(90deg);
 }
 
+.customAccordion button:focus {
+  .focus();
+}
+
+.customAccordion {
+  margin-top: 1px;
+}
+
 .datalist-arrow:after:hover {
   content: "\276F";
   position: absolute;
diff --git a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx b/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
index aedf517eb..b5f1e1efd 100644
--- a/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
+++ b/src/Explorer/Panes/SettingsPane/SettingsPane.tsx
@@ -491,7 +491,7 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
   return (
     <RightPaneForm {...genericPaneProps}>
       <div className={`paneMainContent ${styles.container}`}>
-        <Accordion className={styles.firstItem}>
+        <Accordion className={`customAccordion ${styles.firstItem}`}>
           {shouldShowQueryPageOptions && (
             <AccordionItem value="1">
               <AccordionHeader>
diff --git a/src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap b/src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap
index 8e7ffa387..e89ee345b 100644
--- a/src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap
+++ b/src/Explorer/Panes/SettingsPane/__snapshots__/SettingsPane.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`Settings Pane should render Default properly 1`] = `
     className="paneMainContent ___133e6fg_0000000 f22iagw f1vx9l62 f1l02sjl"
   >
     <Accordion
-      className="___1uf6361_0000000 fz7g6wx"
+      className="customAccordion ___1uf6361_0000000 fz7g6wx"
     >
       <AccordionItem
         value="1"
@@ -572,7 +572,7 @@ exports[`Settings Pane should render Gremlin properly 1`] = `
     className="paneMainContent ___133e6fg_0000000 f22iagw f1vx9l62 f1l02sjl"
   >
     <Accordion
-      className="___1uf6361_0000000 fz7g6wx"
+      className="customAccordion ___1uf6361_0000000 fz7g6wx"
     >
       <AccordionItem
         value="6"