From 8bc32e6371dcdc2a8d7dd7e6fae0c03a390d7ffd Mon Sep 17 00:00:00 2001
From: Anthony Dresser <andresse@microsoft.com>
Date: Fri, 13 Apr 2018 12:09:36 -0700
Subject: [PATCH] add accessibility for panel (#1138)

---
 src/sql/base/browser/ui/panel/panel.component.ts     | 2 +-
 src/sql/base/browser/ui/panel/panel.ts               | 7 ++++++-
 src/sql/base/browser/ui/panel/tabHeader.component.ts | 2 +-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/sql/base/browser/ui/panel/panel.component.ts b/src/sql/base/browser/ui/panel/panel.component.ts
index 1da36104c6..a5ccf28049 100644
--- a/src/sql/base/browser/ui/panel/panel.component.ts
+++ b/src/sql/base/browser/ui/panel/panel.component.ts
@@ -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>
diff --git a/src/sql/base/browser/ui/panel/panel.ts b/src/sql/base/browser/ui/panel/panel.ts
index 390a76dc0c..45e56ef369 100644
--- a/src/sql/base/browser/ui/panel/panel.ts
+++ b/src/sql/base/browser/ui/panel/panel.ts
@@ -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) {
diff --git a/src/sql/base/browser/ui/panel/tabHeader.component.ts b/src/sql/base/browser/ui/panel/tabHeader.component.ts
index 295fcdf1da..55599442d2 100644
--- a/src/sql/base/browser/ui/panel/tabHeader.component.ts
+++ b/src/sql/base/browser/ui/panel/tabHeader.component.ts
@@ -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>