DevTools: Introduce ARIAUtils

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 22 matching lines @@
  */
 UI.TabbedPane = class extends UI.VBox {
   constructor() {
     super(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._headerContentsElement = this._headerElement.createChild('div', 'tabbed-pane-header-contents');
-    this._headerContentsElement.setAttribute('aria-label', Common.UIString('Panels'));
     this._tabSlider = createElementWithClass('div', 'tabbed-pane-tab-slider');
     this._tabsElement = this._headerContentsElement.createChild('div', 'tabbed-pane-header-tabs');
     this._tabsElement.setAttribute('role', 'tablist');
+    UI.ARIAUtils.setAccessibleName(this._tabsElement, Common.UIString('Panels'));

[dgozman, 2017/01/27 23:12:59]

This should be in InspectorView.

[einbinder, 2017/02/02 22:53:32]

Done.

     this._contentElement = this.contentElement.createChild('div', 'tabbed-pane-content');
     this._contentElement.setAttribute('role', 'tabpanel');
     this._contentElement.createChild('content');
     /** @type {!Array.<!UI.TabbedPaneTab>} */
     this._tabs = [];
     /** @type {!Array.<!UI.TabbedPaneTab>} */
     this._tabsHistory = [];
     /** @type {!Map<string, !UI.TabbedPaneTab>} */
     this._tabsById = new Map();
     this._currentTabLocked = false;
@@ skipping 688 matching lines @@
 
     this._hideTab(this._currentTab);
     delete this._currentTab;
   }
 
   /**
    * @param {!UI.TabbedPaneTab} tab
    */
   _showTab(tab) {
     tab.tabElement.classList.add('selected');
-    tab.tabElement.setAttribute('aria-selected', 'true');
+    UI.ARIAUtils.setSelected(tab.tabElement, false);

[dgozman, 2017/01/27 23:12:59]

true

[einbinder, 2017/02/02 22:53:32]

Done.

     tab.view.show(this.element);
     this._updateTabSlider();
   }
 
   _updateTabSlider() {
     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;
@@ skipping 249 matching lines @@
   }
 
   /**
    * @param {boolean} measuring
    * @return {!Element}
    */
   _createTabElement(measuring) {
     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');
+    UI.ARIAUtils.markAsTab(tabElement);
+    UI.ARIAUtils.setSelected(tabElement, 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, measuring);
     if (!measuring)
       this._titleElement = titleElement;
 
     if (this._closeable)
@@ skipping 178 matching lines @@
    * @param {!Array.<string>} ids
    */
   closeTabs(tabbedPane, ids) {},
 
   /**
    * @param {string} tabId
    * @param {!UI.ContextMenu} contextMenu
    */
   onContextMenu(tabId, contextMenu) {}
 };