[accessibility-2280341]:[Keyboard Navigation - Azure Cosmos DB - Graph]: Keyboard focus order is not logical after selecting any tab control. (#1854)

* [accessibility-2280341]:[Keyboard Navigation - Azure Cosmos DB - Graph]: Keyboard focus order is not logical after selecting any tab control.

* updated module structure.

---------

Co-authored-by: Satyapriya Bai <v-satybai@microsoft.com>

src/Explorer/Controls/Tabs/TabComponent.less

@@ -1,28 +1,16 @@
 @import "../../../../less/Common/Constants";
 
 .tabComponentContainer {
-    height: 100%;
+  height: 100%;
-    .flex-display();
+  .flex-display();
-    .flex-direction();
+  .flex-direction();
 
-    .tabSwitch {
+  .tabSwitch {
-        margin-left: @LargeSpace;
+    margin-left: @LargeSpace;
-        margin-bottom: 20px;
+    margin-bottom: 20px;
 
-        .tab {
+    .tab {
-            margin-right: @MediumSpace;
+      margin-right: @MediumSpace;
-        }
+    }
-
+  }
-        .toggleSwitch {
-            .toggleSwitch();
-        }
-
-        .selectedToggle {
-            .selectedToggle();
-        }
-
-        .unselectedToggle {
-            .unselectedToggle();
-        }
-      }
 }

src/Explorer/Controls/Tabs/TabComponent.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { AccessibleElement } from "../../Controls/AccessibleElement/AccessibleElement";
+import { Pivot, PivotItem } from "@fluentui/react";
 import "./TabComponent.less";
 
 export interface TabContent {
@@ -35,58 +35,36 @@ export class TabComponent extends React.Component<TabComponentProps> {
   }
 
   private setActiveTab(index: number): void {
-    this.setState({ activeTabIndex: index });
     this.props.onTabIndexChange(index);
   }
 
-  private renderTabTitles(): JSX.Element[] {
-    return this.props.tabs.map((tab: Tab, index: number) => {
-      if (!tab.isVisible()) {
-        return <React.Fragment key={index} />;
-      }
-
-      let className = "toggleSwitch";
-      let ariaselected;
-      if (index === this.props.currentTabIndex) {
-        className += " selectedToggle";
-        ariaselected = true;
-      } else {
-        className += " unselectedToggle";
-        ariaselected = false;
-      }
-
-      return (
-        <div className="tab" key={index}>
-          <AccessibleElement
-            as="span"
-            className={className}
-            role="tab"
-            onActivated={() => this.setActiveTab(index)}
-            aria-label={`Select tab: ${tab.title}`}
-            aria-selected={ariaselected}
-          >
-            {tab.title}
-          </AccessibleElement>
-        </div>
-      );
-    });
-  }
-
   public render(): JSX.Element {
-    const currentTabContent = this.props.tabs[this.props.currentTabIndex].content;
+    const { tabs, currentTabIndex, hideHeader } = this.props;
+    const currentTabContent = tabs[currentTabIndex].content;
     let className = "tabComponentContent";
     if (currentTabContent.className) {
       className += ` ${currentTabContent.className}`;
     }
-
     return (
       <div className="tabComponentContainer">
-        {!this.props.hideHeader && (
+        <div className="tabs tabSwitch">
-          <div className="tabs tabSwitch" role="tablist">
+          {!hideHeader && (
-            {this.renderTabTitles()}
+            <Pivot
-          </div>
+              aria-label="Tab navigation"
-        )}
+              selectedKey={currentTabIndex.toString()}
-        <div className={className}>{currentTabContent.render()}</div>
+              linkSize="normal"
+              onLinkClick={(item) => this.setActiveTab(parseInt(item?.props.itemKey || ""))}
+            >
+              {tabs.map((tab: Tab, index: number) => {
+                if (!tab.isVisible()) {
+                  return null; // Skip rendering invisible tabs
+                }
+                return <PivotItem key={index} headerText={tab.title} itemKey={index.toString()} />;
+              })}
+            </Pivot>
+          )}
+        </div>
+        <div className={className}>{tabs[currentTabIndex].content.render()}</div>
       </div>
     );
   }

src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.test.tsx

@@ -632,24 +632,15 @@ describe("GraphExplorer", () => {
 
       it("should display RU consumption", () => {
         // Find link for query stats
-        const links = wrapper.find(".toggleSwitch");
+        const queryStatsTab = wrapper.find(`button[name="${GraphExplorer.QUERY_STATS_BUTTON_LABEL}"]`);
+        queryStatsTab.simulate("click");
+        const values = wrapper.find(".queryMetricsSummary td");
         let isRUDisplayed = false;
-        for (let i = 0; i < links.length; i++) {
+        values.forEach((value) => {
-          const link = links.at(i);
+          if (Number(value.text()) === gVRU) {
-          if (link.text() === GraphExplorer.QUERY_STATS_BUTTON_LABEL) {
+            isRUDisplayed = true;
-            link.simulate("click");
-
-            const values = wrapper.find(".queryMetricsSummary td");
-            for (let j = 0; j < values.length; j++) {
-              if (Number(values.at(j).text()) === gVRU) {
-                isRUDisplayed = true;
-                break;
-              }
-            }
-            break;
           }
-        }
+        });
-
         expect(isRUDisplayed).toBe(true);
       });
     });