diff --git a/src/sql/base/browser/ui/panel/panel.component.ts b/src/sql/base/browser/ui/panel/panel.component.ts index cca5d7db9b..74a96d9a5d 100644 --- a/src/sql/base/browser/ui/panel/panel.component.ts +++ b/src/sql/base/browser/ui/panel/panel.component.ts @@ -50,8 +50,8 @@ let idPool = 0;
-
- +
+
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: ` -
- +