random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-12-20 09:20:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* [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>
This commit is contained in:
SATYA SB
2024-08-12 11:06:35 +05:30
committed by GitHub
parent 99d95a4cec
commit 62c76cc264
3 changed files with 38 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/Explorer/Controls/Tabs/TabComponent.less
View File

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

64
src/Explorer/Controls/Tabs/TabComponent.tsx
View File

@@ -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" role="tablist">
{this.renderTabTitles()}
</div>
)}
<div className={className}>{currentTabContent.render()}</div>
<div className="tabs tabSwitch">
{!hideHeader && (
<Pivot
aria-label="Tab navigation"
selectedKey={currentTabIndex.toString()}
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>
);
}