ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-17 01:25:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

add accessibility for panel (#1138)

Browse Source
This commit is contained in:
Anthony Dresser
2018-04-13 12:09:36 -07:00
committed by GitHub
parent f739c47984
commit 8bc32e6371
3 changed files with 8 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/sql/base/browser/ui/panel/panel.component.ts
View File

@@ -49,7 +49,7 @@ let idPool = 0;
<div class="tabbedPanel fullsize" #tabbedPanel>
<div *ngIf="!options.showTabsWhenOne ? _tabs.length !== 1 : true" class="composite title" #titleContainer>
<div class="tabList" #tabList>
<div class="tabList" #tabList role="tablist">
<div *ngFor="let tab of _tabs">
<tab-header [tab]="tab" [showIcon]="options.showIcon" (onSelectTab)='selectTab($event)' (onCloseTab)='closeTab($event)'> </tab-header>
</div>

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

@@ -58,6 +58,7 @@ export class TabbedPanel extends Disposable implements IThemable {
this.$parent.appendTo(container);
this.$header = $('.composite.title');
this.$tabList = $('.tabList');
this.$tabList.attr('role', 'tablist');
this.$tabList.style('height', this.headersize + 'px');
this.$header.append(this.$tabList);
let actionbarcontainer = $('.title-actions');
@@ -89,6 +90,9 @@ export class TabbedPanel extends Disposable implements IThemable {
private _createTab(tab: IInternalPanelTab): void {
let tabHeaderElement = $('.tab-header');
tabHeaderElement.attr('tabindex', '0');
tabHeaderElement.attr('role', 'tab');
tabHeaderElement.attr('aria-selected', 'false');
tabHeaderElement.attr('aria-label', tab.title);
let tabElement = $('.tab');
tabHeaderElement.append(tabElement);
let tabLabel = $('a.tabLabel');
@@ -114,7 +118,7 @@ export class TabbedPanel extends Disposable implements IThemable {
if (this._shownTab) {
this._tabMap.get(this._shownTab).label.removeClass('active');
this._tabMap.get(this._shownTab).header.removeClass('active');
this._tabMap.get(this._shownTab).header.removeClass('active').attr('aria-selected', 'false');
}
this._shownTab = id;
@@ -122,6 +126,7 @@ export class TabbedPanel extends Disposable implements IThemable {
let tab = this._tabMap.get(this._shownTab);
tab.label.addClass('active');
tab.header.addClass('active');
tab.header.attr('aria-selected', 'true');
tab.view.render(this.$body.getHTMLElement());
this._onTabChange.fire(id);
if (this._currentDimensions) {

2
src/sql/base/browser/ui/panel/tabHeader.component.ts
View File

@@ -20,7 +20,7 @@ import { CloseTabAction } from './tabActions';
selector: 'tab-header',
template: `
<div #actionHeader class="tab-header" style="flex: 0 0; flex-direction: row;" [class.active]="tab.active" tabindex="0" (keyup)="onKey($event)">
<span class="tab" (click)="selectTab(tab)">
<span class="tab" (click)="selectTab(tab)" role="tab" [attr.aria-selected]="tab.active" [attr.aria-label]="tab.title">
<a class="tabLabel" [class.active]="tab.active" #tabLabel>
</a>
</span>