From 52c2cfe419959a708e45def21d528e3403910165 Mon Sep 17 00:00:00 2001
From: SATYA SB <107645008+satya07sb@users.noreply.github.com>
Date: Wed, 5 Jun 2024 20:42:48 +0530
Subject: [PATCH] [Accessibility-3100036]: Close button is nested under 'Home'
 tab control under 'Data Explorer' pane. (#1818)

* [3100036]: [Programmatic Access - Azure Cosmos DB - Data Explorer]: Close button is nested under 'Home' tab control under 'Data Explorer' pane.

* Fabric-Less updated.

* Added specific width for contentWrapper.

* less update.

* Fixed out-scope space issue

---------

Co-authored-by: Satyapriya Bai <v-satybai@microsoft.com>
---
 less/Common/Constants.less |   1 +
 less/documentDB.less       | 120 +++++++++++++++++++------------------
 less/documentDBFabric.less |  10 ++--
 src/Explorer/Tabs/Tabs.tsx |  76 ++++++++++++-----------
 4 files changed, 109 insertions(+), 98 deletions(-)

diff --git a/less/Common/Constants.less b/less/Common/Constants.less
index 5b80d67f8..d79c3e4e0 100644
--- a/less/Common/Constants.less
+++ b/less/Common/Constants.less
@@ -130,6 +130,7 @@
 @ActiveTabWidth: 141px;
 @TabsHeight: 30px;
 @TabsWidth: 140px;
+@ContentWrapper: 111px;
 @StatusIconContainerSize: 18px;
 @LoadingErrorIconSize: 14px;
 @ErrorIconContainer: 16px;
diff --git a/less/documentDB.less b/less/documentDB.less
index 05ad22760..00ffe2b0c 100644
--- a/less/documentDB.less
+++ b/less/documentDB.less
@@ -2671,7 +2671,7 @@ a:link {
   width: @ActiveTabWidth;
 }
 
-.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .tabNavText {
+.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper> .tabNavText {
   font-weight: bolder;
   border-bottom: 2px solid rgba(0, 120, 212, 1);
 }
@@ -2707,67 +2707,71 @@ a:link {
     width: @TabsWidth;
     border-right: @ButtonBorderWidth solid @BaseMedium;
     white-space: nowrap;
-
-    .statusIconContainer {
-      width: @StatusIconContainerSize;
-      height: @StatusIconContainerSize;
-      margin-left: @SmallSpace;
-      display: inline-flex;
-
-      .errorIconContainer {
-        width: @ErrorIconContainer;
-        height: @ErrorIconContainer;
-        margin-top: 1px;
-
-        .errorIcon {
-          width: @ErrorIconWidth;
-          height: @LoadingErrorIconSize;
-          background-image: url(../images/error_no_outline.svg);
-          background-repeat: no-repeat;
-          background-position: center;
-          background-size: 3px;
-          display: block;
-          margin: 1px 0px 0px 6px;
+    .contentWrapper {
+        .flex-display();
+        width: @ContentWrapper;
+    
+        .statusIconContainer {
+          width: @StatusIconContainerSize;
+          height: @StatusIconContainerSize;
+          margin-left: @SmallSpace;
+          display: inline-flex;
+    
+          .errorIconContainer {
+            width: @ErrorIconContainer;
+            height: @ErrorIconContainer;
+            margin-top: 1px;
+    
+            .errorIcon {
+              width: @ErrorIconWidth;
+              height: @LoadingErrorIconSize;
+              background-image: url(../images/error_no_outline.svg);
+              background-repeat: no-repeat;
+              background-position: center;
+              background-size: 3px;
+              display: block;
+              margin: 1px 0px 0px 6px;
+            }
+          }
+    
+          .errorIconContainer.actionsEnabled {
+            &:hover {
+              .hover();
+            }
+    
+            &:focus {
+              .focus();
+            }
+    
+            &:active {
+              .active();
+            }
+          }
+    
+          .errorIconContainer[tabindex]:active {
+            outline: none;
+          }
+    
+          .loadingIcon {
+            width: @LoadingErrorIconSize;
+            height: @LoadingErrorIconSize;
+            margin: 0px 0px @SmallSpace @SmallSpace;
+          }
+        }
+    
+        .tabNavText {
+          margin-left: @SmallSpace;
+          margin-right: 2px;
+          color: @BaseDark;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          flex-grow: 1;
         }
       }
 
-      .errorIconContainer.actionsEnabled {
-        &:hover {
-          .hover();
-        }
-
-        &:focus {
-          .focus();
-        }
-
-        &:active {
-          .active();
-        }
-      }
-
-      .errorIconContainer[tabindex]:active {
-        outline: none;
-      }
-
-      .loadingIcon {
-        width: @LoadingErrorIconSize;
-        height: @LoadingErrorIconSize;
-        margin: 0px 0px @SmallSpace @SmallSpace;
-      }
-    }
-
-    .tabNavText {
-      margin-left: @SmallSpace;
-      margin-right: 2px;
-      color: @BaseDark;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      flex-grow: 1;
-    }
-
     .tabIconSection {
-      width: 30px;
+      width: 29px;
       position: relative;
       padding-top: 2px;
 
diff --git a/less/documentDBFabric.less b/less/documentDBFabric.less
index be4e5c17e..ea4001780 100644
--- a/less/documentDBFabric.less
+++ b/less/documentDBFabric.less
@@ -75,7 +75,7 @@ a:focus {
   border-bottom: 2px solid @FabricAccentMedium;
 }
 
-.nav-tabs>li.active>.tabNavContentContainer>.tab_Content>.tabNavText {
+.nav-tabs>li.active>.tabNavContentContainer>.tab_Content>.contentWrapper>.tabNavText {
   border-bottom: 0px none transparent;
 }
 
@@ -93,9 +93,11 @@ a:focus {
     width: calc(@TabsWidth - (@SmallSpace * 2));
     padding-bottom: @SmallSpace;
 
-    .statusIconContainer {
-      margin-left: 0px;
-    }
+    .contentWrapper {
+        .statusIconContainer {
+          margin-left: 0px;
+        }
+      }
 
     .tabIconSection {
       .cancelButton {
diff --git a/src/Explorer/Tabs/Tabs.tsx b/src/Explorer/Tabs/Tabs.tsx
index b33f3d4af..64636f077 100644
--- a/src/Explorer/Tabs/Tabs.tsx
+++ b/src/Explorer/Tabs/Tabs.tsx
@@ -153,47 +153,51 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
     <li
       onMouseOver={() => setHovering(true)}
       onMouseLeave={() => setHovering(false)}
-      onClick={() => {
-        if (tab) {
-          tab.onTabClick();
-        } else if (tabKind !== undefined) {
-          useTabs.getState().activateReactTab(tabKind);
-        }
-      }}
-      onKeyPress={({ nativeEvent: e }) => {
-        if (tab) {
-          tab.onKeyPressActivate(undefined, e);
-        } else if (tabKind !== undefined) {
-          onKeyPressReactTab(e, tabKind);
-        }
-      }}
       className={active ? "active tabList" : "tabList"}
       style={active ? { fontWeight: "bolder" } : {}}
-      title={useObservable(tab?.tabPath || ko.observable(""))}
-      aria-selected={active}
-      aria-expanded={active}
-      aria-controls={tabId}
-      tabIndex={0}
-      role="tab"
-      ref={focusTab}
     >
       <span className="tabNavContentContainer">
         <div className="tab_Content">
-          <span className="statusIconContainer" style={{ width: tabKind === ReactTabKind.Home ? 0 : 18 }}>
-            {useObservable(tab?.isExecutionError || ko.observable(false)) && <ErrorIcon tab={tab} active={active} />}
-            {isTabExecuting(tab, tabKind) && (
-              <img className="loadingIcon" title="Loading" src={loadingIcon} alt="Loading" />
-            )}
-            {isQueryErrorThrown(tab, tabKind) && (
-              <img
-                src={errorQuery}
-                title="Error"
-                alt="Error"
-                style={{ marginTop: 4, marginLeft: 4, width: 10, height: 11 }}
-              />
-            )}
+          <span
+            className="contentWrapper"
+            onClick={() => {
+              if (tab) {
+                tab.onTabClick();
+              } else if (tabKind !== undefined) {
+                useTabs.getState().activateReactTab(tabKind);
+              }
+            }}
+            onKeyPress={({ nativeEvent: e }) => {
+              if (tab) {
+                tab.onKeyPressActivate(undefined, e);
+              } else if (tabKind !== undefined) {
+                onKeyPressReactTab(e, tabKind);
+              }
+            }}
+            title={useObservable(tab?.tabPath || ko.observable(""))}
+            aria-selected={active}
+            aria-expanded={active}
+            aria-controls={tabId}
+            tabIndex={0}
+            role="tab"
+            ref={focusTab}
+          >
+            <span className="statusIconContainer" style={{ width: tabKind === ReactTabKind.Home ? 0 : 18 }}>
+              {useObservable(tab?.isExecutionError || ko.observable(false)) && <ErrorIcon tab={tab} active={active} />}
+              {isTabExecuting(tab, tabKind) && (
+                <img className="loadingIcon" title="Loading" src={loadingIcon} alt="Loading" />
+              )}
+              {isQueryErrorThrown(tab, tabKind) && (
+                <img
+                  src={errorQuery}
+                  title="Error"
+                  alt="Error"
+                  style={{ marginTop: 4, marginLeft: 4, width: 10, height: 11 }}
+                />
+              )}
+            </span>
+            <span className="tabNavText">{useObservable(tab?.tabTitle || getReactTabTitle())}</span>
           </span>
-          <span className="tabNavText">{useObservable(tab?.tabTitle || getReactTabTitle())}</span>
           <span className="tabIconSection">
             <CloseButton tab={tab} active={active} hovering={hovering} tabKind={tabKind} />
           </span>
@@ -280,7 +284,7 @@ function TabPane({ tab, active }: { tab: Tab; active: boolean }) {
 }
 
 const onKeyPressReactTab = (e: KeyboardEvent, tabKind: ReactTabKind): void => {
-  if (e.key === "Enter" || e.key === "Space") {
+  if (e.key === "Enter" || e.code === "Space") {
     useTabs.getState().activateReactTab(tabKind);
     e.stopPropagation();
   }