diff --git a/src/sql/base/browser/ui/panel/panel.ts b/src/sql/base/browser/ui/panel/panel.ts
index 45e56ef369..b4b858adb4 100644
--- a/src/sql/base/browser/ui/panel/panel.ts
+++ b/src/sql/base/browser/ui/panel/panel.ts
@@ -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');
diff --git a/src/sql/base/browser/ui/panel/tab.component.ts b/src/sql/base/browser/ui/panel/tab.component.ts
index 0ab41ee8e5..04473ed2d3 100644
--- a/src/sql/base/browser/ui/panel/tab.component.ts
+++ b/src/sql/base/browser/ui/panel/tab.component.ts
@@ -13,7 +13,7 @@ export abstract class TabChild {
@Component({
selector: 'tab',
template: `
-
+
`
diff --git a/src/sql/base/browser/ui/panel/tabHeader.component.ts b/src/sql/base/browser/ui/panel/tabHeader.component.ts
index dd594126b7..5dc59c10f5 100644
--- a/src/sql/base/browser/ui/panel/tabHeader.component.ts
+++ b/src/sql/base/browser/ui/panel/tabHeader.component.ts
@@ -19,8 +19,8 @@ import { CloseTabAction } from './tabActions';
@Component({
selector: 'tab-header',
template: `
-