[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

@@ -130,6 +130,7 @@
 @ActiveTabWidth: 141px;
 @TabsHeight: 30px;
 @TabsWidth: 140px;
+@ContentWrapper: 111px;
 @StatusIconContainerSize: 18px;
 @LoadingErrorIconSize: 14px;
 @ErrorIconContainer: 16px;

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,6 +2707,9 @@ a:link {
     width: @TabsWidth;
     border-right: @ButtonBorderWidth solid @BaseMedium;
     white-space: nowrap;
+    .contentWrapper {
+        .flex-display();
+        width: @ContentWrapper;
     
         .statusIconContainer {
           width: @StatusIconContainerSize;
@@ -2765,9 +2768,10 @@ a:link {
           white-space: nowrap;
           flex-grow: 1;
         }
+      }
 
     .tabIconSection {
-      width: 30px;
+      width: 29px;
       position: relative;
       padding-top: 2px;
 

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;
 
+    .contentWrapper {
         .statusIconContainer {
           margin-left: 0px;
         }
+      }
 
     .tabIconSection {
       .cancelButton {

src/Explorer/Tabs/Tabs.tsx

@@ -153,6 +153,13 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
     <li
       onMouseOver={() => setHovering(true)}
       onMouseLeave={() => setHovering(false)}
+      className={active ? "active tabList" : "tabList"}
+      style={active ? { fontWeight: "bolder" } : {}}
+    >
+      <span className="tabNavContentContainer">
+        <div className="tab_Content">
+          <span
+            className="contentWrapper"
             onClick={() => {
               if (tab) {
                 tab.onTabClick();
@@ -167,8 +174,6 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
                 onKeyPressReactTab(e, tabKind);
               }
             }}
-      className={active ? "active tabList" : "tabList"}
-      style={active ? { fontWeight: "bolder" } : {}}
             title={useObservable(tab?.tabPath || ko.observable(""))}
             aria-selected={active}
             aria-expanded={active}
@@ -177,8 +182,6 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
             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) && (
@@ -194,6 +197,7 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
               )}
             </span>
             <span className="tabNavText">{useObservable(tab?.tabTitle || getReactTabTitle())}</span>
+          </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();
   }