Add ARIA markup for tabs & tab panels

third_party/WebKit/Source/devtools/front_end/ui/TabbedPane.js

Index: third_party/WebKit/Source/devtools/front_end/ui/TabbedPane.js
diff --git a/third_party/WebKit/Source/devtools/front_end/ui/TabbedPane.js b/third_party/WebKit/Source/devtools/front_end/ui/TabbedPane.js
index 6ae72638a847c6cbb7c83f58bfaf0805b213fd3d..e53ad5b980ee3b6fc76eedff6ea6958a5d7b5891 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/TabbedPane.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/TabbedPane.js
@@ -42,10 +42,13 @@ WebInspector.TabbedPane = function()
     this._headerElement = this.contentElement.createChild("div", "tabbed-pane-header");
     this._headerElement.createChild("content").select = ".tabbed-pane-header-before";
     this._headerContentsElement = this._headerElement.createChild("div", "tabbed-pane-header-contents");
+    this._headerContentsElement.setAttribute("aria-label", WebInspector.UIString("Panels"));
     this._tabSlider = createElementWithClass("div", "tabbed-pane-tab-slider");
     this._headerElement.createChild("content").select = ".tabbed-pane-header-after";
     this._tabsElement = this._headerContentsElement.createChild("div", "tabbed-pane-header-tabs");
+    this._tabsElement.setAttribute("role", "tablist");
     this._contentElement = this.contentElement.createChild("div", "tabbed-pane-content");
+    this._contentElement.setAttribute("role", "tabpanel");
     this._contentElement.createChild("content");
     /** @type {!Array.<!WebInspector.TabbedPaneTab>} */
     this._tabs = [];
@@ -767,6 +770,8 @@ WebInspector.TabbedPane.prototype = {
     _showTab: function(tab)
     {
         tab.tabElement.classList.add("selected");
+        tab.tabElement.setAttribute("aria-selected", "true");
+        tab.tabElement.tabIndex = 0;

[einbinder, 2016/09/12 23:21:25]

Let's move the tabIndex changes to the patch with the arrow key movement.

[hhillen, 2016/09/12 23:26:52]

Done.

         tab.view.showWidget(this.element);
         this._updateTabSlider();
     },
@@ -793,6 +798,8 @@ WebInspector.TabbedPane.prototype = {
     _hideTab: function(tab)
     {
         tab.tabElement.classList.remove("selected");
+        tab.tabElement.setAttribute("aria-expanded", "false");
+        tab.tabElement.tabIndex = -1;
         tab.view.hideWidget();
     },
 
@@ -1038,6 +1045,8 @@ WebInspector.TabbedPaneTab.prototype = {
         var tabElement = createElementWithClass("div", "tabbed-pane-header-tab");
         tabElement.id = "tab-" + this._id;
         tabElement.tabIndex = -1;
+        tabElement.setAttribute("role", "tab");
+        tabElement.setAttribute("aria-expanded", "false");
         tabElement.selectTabForTest = this._tabbedPane.selectTab.bind(this._tabbedPane, this.id, true);
 
         var titleElement = tabElement.createChild("span", "tabbed-pane-header-tab-title");