ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-24 09:35:37 -05:00
Code Issues Packages Projects Releases Wiki Activity

Bug/accessibility 1 (#6774)

Browse Source 
* fixing simple name changes

* Fixing button color and tabbing on tabs

* removing some extra lines of code

* Adding some null checks

* Updating as per PR comments
This commit is contained in:
Udeesha Gautam
2019-08-20 10:11:34 -07:00
committed by GitHub
parent 23ed1e9123
commit c513204501
6 changed files with 61 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/sql/base/browser/ui/panel/panel.ts
View File

@@ -10,7 +10,7 @@ import * as DOM from 'vs/base/browser/dom';
import { IAction } from 'vs/base/common/actions';
import { IActionOptions, ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { KeyCode } from 'vs/base/common/keyCodes';
import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
import { Disposable, IDisposable, dispose } from 'vs/base/common/lifecycle';
import { Color } from 'vs/base/common/color';
import { isUndefinedOrNull } from 'vs/base/common/types';
@@ -77,6 +77,7 @@ export class TabbedPanel extends Disposable {
public onTabChange: Event<PanelTabIdentifier> = this._onTabChange.event;
private tabHistory: string[] = [];
private _tabOrder: PanelTabIdentifier[] = [];
constructor(container: HTMLElement, private options: IPanelOptions = defaultOptions) {
super();
@@ -84,9 +85,9 @@ export class TabbedPanel extends Disposable {
this._styleElement = DOM.createStyleSheet(this.parent);
container.appendChild(this.parent);
this.header = DOM.$('.composite.title');
this.header.setAttribute('tabindex', '0');
this.tabList = DOM.$('.tabList');
this.tabList.setAttribute('role', 'tablist');
this.tabList.setAttribute('tabindex', '0');
this.tabList.style.height = this.headersize + 'px';
this.header.appendChild(this.tabList);
let actionbarcontainer = DOM.$('.title-actions');
@@ -101,6 +102,7 @@ export class TabbedPanel extends Disposable {
this.body = DOM.$('.tabBody');
this.body.setAttribute('role', 'tabpanel');
this.parent.appendChild(this.body);
this._register(DOM.addDisposableListener(this.header, DOM.EventType.FOCUS, e => this.focusCurrentTab()));
}
public dispose() {
@@ -142,7 +144,7 @@ export class TabbedPanel extends Disposable {
private _createTab(tab: IInternalPanelTab, index?: number): void {
let tabHeaderElement = DOM.$('.tab-header');
tabHeaderElement.setAttribute('tabindex', '0');
tabHeaderElement.setAttribute('tabindex', '-1');
tabHeaderElement.setAttribute('role', 'tab');
tabHeaderElement.setAttribute('aria-selected', 'false');
tabHeaderElement.setAttribute('aria-controls', tab.tab.identifier);
@@ -161,19 +163,40 @@ export class TabbedPanel extends Disposable {
invokeTabSelectedHandler();
}));
tab.disposables.push(DOM.addDisposableListener(tabHeaderElement, DOM.EventType.KEY_UP, (e: KeyboardEvent) => {
tab.disposables.push(DOM.addDisposableListener(tabHeaderElement, DOM.EventType.KEY_DOWN, (e: KeyboardEvent) => {
let event = new StandardKeyboardEvent(e);
if (event.equals(KeyCode.Enter)) {
this.showTab(tab.tab.identifier);
invokeTabSelectedHandler();
e.stopImmediatePropagation();
}
if (event.equals(KeyCode.RightArrow)) {
let currentIndex = this._tabOrder.findIndex(x => x === tab.tab.identifier);
this.focusNextTab(currentIndex + 1);
}
if (event.equals(KeyCode.LeftArrow)) {
let currentIndex = this._tabOrder.findIndex(x => x === tab.tab.identifier);
this.focusNextTab(currentIndex - 1);
}
if (event.equals(KeyCode.Tab)) {
e.preventDefault();
if (this._shownTabId) {
const shownTab = this._tabMap.get(this._shownTabId);
if (shownTab) {
shownTab.tab.view.focus();
}
}
}
}));
const insertBefore = !isUndefinedOrNull(index) ? this.tabList.children.item(index) : undefined;
if (insertBefore) {
if (insertBefore && index) {
this._tabOrder.copyWithin(index + 1, index);
this._tabOrder[index] = tab.tab.identifier;
this.tabList.insertBefore(tabHeaderElement, insertBefore);
} else {
this.tabList.append(tabHeaderElement);
this._tabOrder.push(tab.tab.identifier);
}
tab.header = tabHeaderElement;
tab.label = tabLabel;
@@ -244,6 +267,8 @@ export class TabbedPanel extends Disposable {
}
dispose(actualTab.disposables);
this._tabMap.delete(tab);
let index = this._tabOrder.findIndex(t => t === tab);
this._tabOrder.splice(index, 1);
if (this._shownTabId === tab) {
this._shownTabId = undefined;
while (this._shownTabId === undefined && this.tabHistory.length > 0) {
@@ -266,6 +291,25 @@ export class TabbedPanel extends Disposable {
}
}
private focusNextTab(index: number): void {
if (index < 0 || index > this.tabList.children.length) {
return;
}
let tab = (<HTMLElement>this.tabList.children[index]);
if (tab) {
tab.focus();
}
}
private focusCurrentTab(): void {
if (this._shownTabId) {
const tab = this._tabMap.get(this._shownTabId);
if (tab) {
tab.header.focus();
}
}
}
public style(styles: ITabbedPanelStyles): void {
const content: string[] = [];