Add ARIA markup for tabs & tab panels, make active tab part of the tab order

BUG=646099

Review-Url: https://codereview.chromium.org/2334693003
Cr-Commit-Position: refs/heads/master@{#418700}

AUTHORS

@@ -237,6 +237,7 @@ Habib Virji <habib.virji@samsung.com>
 Haitao Feng <haitao.feng@intel.com>
 Halley Zhao <halley.zhao@intel.com>
 Halton Huo <halton.huo@intel.com>
+Hans Hillen <hans.hillen@gmail.com>
 Haojian Wu <hokein.wu@gmail.com>
 Hari Singh <hari.singh1@samsung.com>
 Harpreet Singh Khurana <harpreet.sk@samsung.com>

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

@@ -35,6 +35,8 @@ WebInspector.Panel = function(name)
     WebInspector.VBox.call(this);
 
     this.element.classList.add("panel");
+    this.element.setAttribute("role", "tabpanel");
+    this.element.setAttribute("aria-label", name);
     this.element.classList.add(name);
     this._panelName = name;
 

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,7 @@ WebInspector.TabbedPane.prototype = {
     _showTab: function(tab)
     {
         tab.tabElement.classList.add("selected");
+        tab.tabElement.setAttribute("aria-selected", "true");
         tab.view.showWidget(this.element);
         this._updateTabSlider();
     },
@@ -793,6 +797,7 @@ WebInspector.TabbedPane.prototype = {
     _hideTab: function(tab)
     {
         tab.tabElement.classList.remove("selected");
+        tab.tabElement.setAttribute("aria-selected", "false");
         tab.view.hideWidget();
     },
 
@@ -1038,6 +1043,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-selected", "false");
         tabElement.selectTabForTest = this._tabbedPane.selectTab.bind(this._tabbedPane, this.id, true);
 
         var titleElement = tabElement.createChild("span", "tabbed-pane-header-tab-title");