mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2025-07-11 06:25:58 +01:00
Tabs have been changed to follow keyboard focus order
This commit is contained in:
parent
755b732532
commit
ce3a7debb3
@ -1,5 +1,4 @@
|
|||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import { AccessibleElement } from "../../Controls/AccessibleElement/AccessibleElement";
|
|
||||||
import "./TabComponent.less";
|
import "./TabComponent.less";
|
||||||
|
|
||||||
export interface TabContent {
|
export interface TabContent {
|
||||||
@ -24,6 +23,7 @@ interface TabComponentProps {
|
|||||||
* We assume there's at least one tab
|
* We assume there's at least one tab
|
||||||
*/
|
*/
|
||||||
export class TabComponent extends React.Component<TabComponentProps> {
|
export class TabComponent extends React.Component<TabComponentProps> {
|
||||||
|
tabRefs: any = {};
|
||||||
public constructor(props: TabComponentProps) {
|
public constructor(props: TabComponentProps) {
|
||||||
super(props);
|
super(props);
|
||||||
|
|
||||||
@ -33,11 +33,41 @@ export class TabComponent extends React.Component<TabComponentProps> {
|
|||||||
throw new Error(msg);
|
throw new Error(msg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
state = {
|
||||||
|
activeTabIndex: this.props.currentTabIndex,
|
||||||
|
};
|
||||||
|
|
||||||
private setActiveTab(index: number): void {
|
private setActiveTab(index: number): void {
|
||||||
this.setState({ activeTabIndex: index });
|
this.setState({ activeTabIndex: index });
|
||||||
this.props.onTabIndexChange(index);
|
this.props.onTabIndexChange(index);
|
||||||
}
|
}
|
||||||
|
private setIndex = (index: number) => {
|
||||||
|
const tab = this.tabRefs[index];
|
||||||
|
if (tab) {
|
||||||
|
tab.focus();
|
||||||
|
this.setState({ activeTabIndex: index });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
private handlekeypress = (event: React.KeyboardEvent<HTMLSpanElement>): void => {
|
||||||
|
const { tabs, onTabIndexChange } = this.props;
|
||||||
|
const { activeTabIndex } = this.state;
|
||||||
|
const count = tabs.length;
|
||||||
|
|
||||||
|
const prevTab = () => {
|
||||||
|
this.setIndex((activeTabIndex - 1 + count) % count);
|
||||||
|
onTabIndexChange((activeTabIndex - 1 + count) % count);
|
||||||
|
};
|
||||||
|
const nextTab = () => {
|
||||||
|
this.setIndex((activeTabIndex + 1) % count);
|
||||||
|
onTabIndexChange((activeTabIndex + 1) % count);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (event.key === "ArrowLeft") {
|
||||||
|
prevTab();
|
||||||
|
} else if (event.key === "ArrowRight") {
|
||||||
|
nextTab();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
private renderTabTitles(): JSX.Element[] {
|
private renderTabTitles(): JSX.Element[] {
|
||||||
return this.props.tabs.map((tab: Tab, index: number) => {
|
return this.props.tabs.map((tab: Tab, index: number) => {
|
||||||
@ -47,26 +77,32 @@ export class TabComponent extends React.Component<TabComponentProps> {
|
|||||||
|
|
||||||
let className = "toggleSwitch";
|
let className = "toggleSwitch";
|
||||||
let ariaselected;
|
let ariaselected;
|
||||||
|
let tabindex;
|
||||||
if (index === this.props.currentTabIndex) {
|
if (index === this.props.currentTabIndex) {
|
||||||
className += " selectedToggle";
|
className += " selectedToggle";
|
||||||
ariaselected = true;
|
ariaselected = true;
|
||||||
|
tabindex = 0;
|
||||||
} else {
|
} else {
|
||||||
className += " unselectedToggle";
|
className += " unselectedToggle";
|
||||||
ariaselected = false;
|
ariaselected = false;
|
||||||
|
tabindex = -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="tab" key={index}>
|
<div className="tab" key={index}>
|
||||||
<AccessibleElement
|
<span
|
||||||
as="span"
|
|
||||||
className={className}
|
className={className}
|
||||||
role="tab"
|
role="tab"
|
||||||
onActivated={() => this.setActiveTab(index)}
|
onClick={() => this.setActiveTab(index)}
|
||||||
|
onKeyDown={(event: React.KeyboardEvent<HTMLSpanElement>) => this.handlekeypress(event)}
|
||||||
|
onFocus={() => this.setState({ activeTabIndex: index })}
|
||||||
aria-label={`Select tab: ${tab.title}`}
|
aria-label={`Select tab: ${tab.title}`}
|
||||||
aria-selected={ariaselected}
|
aria-selected={ariaselected}
|
||||||
|
tabIndex={tabindex}
|
||||||
|
ref={(element) => (this.tabRefs[index] = element)}
|
||||||
>
|
>
|
||||||
{tab.title}
|
{tab.title}
|
||||||
</AccessibleElement>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
Loading…
x
Reference in New Issue
Block a user