DevTools: Introduce ARIAUtils

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 bc6b3bf67fed99799cbb31c02f16cc8a22eda873..aa89f36a6470c29902d07cd56f7f3c91d881f030 100644
--- a/third_party/WebKit/Source/devtools/front_end/ui/TabbedPane.js
+++ b/third_party/WebKit/Source/devtools/front_end/ui/TabbedPane.js
@@ -40,10 +40,10 @@ UI.TabbedPane = class extends UI.VBox {
     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');
@@ -752,7 +752,7 @@ UI.TabbedPane = class extends UI.VBox {
    */
   _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();
   }
@@ -1022,8 +1022,8 @@ UI.TabbedPaneTab = class {
     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');