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

adds tab accessibility (#1433)

Browse Source
This commit is contained in:
Anthony Dresser
2018-05-18 13:52:22 -07:00
committed by GitHub
parent fb4260d71c
commit 0225d6d9f9
4 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -50,8 +50,8 @@ let idPool = 0;
<div *ngIf="!options.showTabsWhenOne ? _tabs.length !== 1 : true" class="composite title">
<div class="tabContainer">
<div class="tabList" role="tablist" scrollable [horizontalScroll]="ScrollbarVisibility.Auto" [verticalScroll]="ScrollbarVisibility.Hidden" [scrollYToX]="true">
<div *ngFor="let tab of _tabs">
<tab-header [active]="_activeTab === tab" [tab]="tab" [showIcon]="options.showIcon" (onSelectTab)='selectTab($event)' (onCloseTab)='closeTab($event)'> </tab-header>
<div role="presentation" *ngFor="let tab of _tabs">
<tab-header role="presentation" [active]="_activeTab === tab" [tab]="tab" [showIcon]="options.showIcon" (onSelectTab)='selectTab($event)' (onCloseTab)='closeTab($event)'></tab-header>
</div>
</div>
</div>

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

@@ -66,6 +66,8 @@ export class TabbedPanel extends Disposable implements IThemable {
this.$header.append(actionbarcontainer);
this.$parent.append(this.$header);
this.$body = $('tabBody');
this.$body.attr('role', 'tabpanel');
this.$body.attr('tabindex', '0');
this.$parent.append(this.$body);
}
@@ -92,7 +94,7 @@ export class TabbedPanel extends Disposable implements IThemable {
tabHeaderElement.attr('tabindex', '0');
tabHeaderElement.attr('role', 'tab');
tabHeaderElement.attr('aria-selected', 'false');
tabHeaderElement.attr('aria-label', tab.title);
tabHeaderElement.attr('aria-controls', tab.identifier);
let tabElement = $('.tab');
tabHeaderElement.append(tabElement);
let tabLabel = $('a.tabLabel');
@@ -124,6 +126,7 @@ export class TabbedPanel extends Disposable implements IThemable {
this._shownTab = id;
this.$body.clearChildren();
let tab = this._tabMap.get(this._shownTab);
this.$body.attr('aria-labelledby', tab.identifier);
tab.label.addClass('active');
tab.header.addClass('active');
tab.header.attr('aria-selected', 'true');

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

@@ -13,7 +13,7 @@ export abstract class TabChild {
@Component({
selector: 'tab',
template: `
<div class="visibility" [class.hidden]="shouldBeHidden()" *ngIf="shouldBeIfed()" class="fullsize">
<div role="tabpanel" [attr.aria-labelledby]="identifier" tabindex="0" class="visibility" [class.hidden]="shouldBeHidden()" *ngIf="shouldBeIfed()" class="fullsize">
<ng-container *ngTemplateOutlet="templateRef"></ng-container>
</div>
`

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

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