Add ARIA markup for tabs & tab panels

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

 /*
  * Copyright (C) 2010 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 16 matching lines @@
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 /**
  * @extends {WebInspector.VBox}
  * @constructor
  */
 WebInspector.TabbedPane = function()
 {
+    // change

[aboxhall, 2016/09/12 20:41:11]

This probably isn't needed any more?

[hhillen, 2016/09/12 21:11:17]

Done.

     WebInspector.VBox.call(this, true);
     this.registerRequiredCSS("ui/tabbedPane.css");
     this.element.classList.add("tabbed-pane");
     this.contentElement.classList.add("tabbed-pane-shadow");
     this.contentElement.tabIndex = -1;
     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("role", "tablist");
+    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", "presentation");

[aboxhall, 2016/09/12 20:41:11]

Is this so that the tabs end up being "direct" children of the tablist? If so,
why not apply the tablist role/aria-label here?

[hhillen, 2016/09/12 21:11:17]

Good point, made the change

     this._contentElement = this.contentElement.createChild("div", "tabbed-pane-content");
+    this._contentElement.setAttribute("role", "tabpanel");
     this._contentElement.createChild("content");
     /** @type {!Array.<!WebInspector.TabbedPaneTab>} */
     this._tabs = [];
     /** @type {!Array.<!WebInspector.TabbedPaneTab>} */
     this._tabsHistory = [];
     /** @type {!Object.<string, !WebInspector.TabbedPaneTab>} */
     this._tabsById = {};
     this._currentTabLocked = false;
 
     this._dropDownButton = this._createDropDownButton();
@@ skipping 701 matching lines @@
         this._hideTab(this._currentTab);
         delete this._currentTab;
     },
 
     /**
      * @param {!WebInspector.TabbedPaneTab} tab
      */
     _showTab: function(tab)
     {
         tab.tabElement.classList.add("selected");
+        tab.tabElement.setAttribute("aria-expanded", "true");

[aboxhall, 2016/09/12 20:41:11]

Should this be aria-selected per
https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel ?

[hhillen, 2016/09/12 21:11:17]

Done.

+        tab.tabElement.tabIndex = 0;
         tab.view.showWidget(this.element);
         this._updateTabSlider();
     },
 
     _updateTabSlider: function()
     {
         if (!this._currentTab || !this._sliderEnabled)
             return;
         var left = 0;
         for (var i = 0; i < this._tabs.length && this._currentTab !== this._tabs[i] && this._tabs[i]._shown; i++)
             left += this._tabs[i]._measuredWidth;
         var sliderWidth = this._currentTab._shown ? this._currentTab._measuredWidth : this._dropDownButton.offsetWidth;
         var scaleFactor = window.devicePixelRatio >= 1.5 ? " scaleY(0.75)" : "";
         this._tabSlider.style.transform = "translateX(" + left + "px)" + scaleFactor;
         this._tabSlider.style.width = sliderWidth + "px";
 
         if (this._tabSlider.parentElement !== this._headerContentsElement)
             this._headerContentsElement.appendChild(this._tabSlider);
     },
 
     /**
      * @param {!WebInspector.TabbedPaneTab} tab
      */
     _hideTab: function(tab)
     {
         tab.tabElement.classList.remove("selected");
+        tab.tabElement.setAttribute("aria-expanded", "false");
+        tab.tabElement.tabIndex = -1;
         tab.view.hideWidget();
     },
 
     /**
      * @override
      * @return {!Array.<!Element>}
      */
     elementsToRestoreScrollPositionsFor: function()
     {
         return [ this._contentElement ];
@@ skipping 225 matching lines @@
 
     /**
      * @param {boolean} measuring
      * @return {!Element}
      */
     _createTabElement: function(measuring)
     {
         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");
         titleElement.textContent = this.title;
         titleElement.title = this.tooltip || "";
         this._createIconElement(tabElement, titleElement);
         if (!measuring)
             this._titleElement = titleElement;
 
         if (this._closeable)
@@ skipping 189 matching lines @@
      * @param {!Array.<string>} ids
      */
     closeTabs: function(tabbedPane, ids) { },
 
     /**
      * @param {string} tabId
      * @param {!WebInspector.ContextMenu} contextMenu
      */
     onContextMenu: function(tabId, contextMenu) { }
 }