DevTools: Introduce ARIAUtils

BUG=none

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

third_party/WebKit/Source/devtools/BUILD.gn

@@ -579,6 +579,7 @@ all_devtools_files = [
   "front_end/toolbox.js",
   "front_end/toolbox.json",
   "front_end/ui/ActionRegistry.js",
+  "front_end/ui/ARIAUtils.js",
   "front_end/ui/checkboxTextLabel.css",
   "front_end/ui/closeButton.css",
   "front_end/ui/confirmDialog.css",

third_party/WebKit/Source/devtools/front_end/elements/ComputedStyleWidget.js

@@ -51,6 +51,7 @@ Elements.ComputedStyleWidget = class extends UI.ThrottledWidget {
     var filterContainerElement = hbox.createChild('div', 'styles-sidebar-pane-filter-box');
     var filterInput = Elements.StylesSidebarPane.createPropertyFilterElement(
         Common.UIString('Filter'), hbox, filterCallback.bind(this));
+    UI.ARIAUtils.setAccessibleName(filterInput, Common.UIString('Filter Computed Styles'));
     filterContainerElement.appendChild(filterInput);
 
     var toolbar = new UI.Toolbar('styles-pane-toolbar', hbox);

third_party/WebKit/Source/devtools/front_end/elements/ElementsPanel.js

@@ -112,6 +112,7 @@ Elements.ElementsPanel = class extends UI.Panel {
     var filterContainerElement = hbox.createChild('div', 'styles-sidebar-pane-filter-box');
     var filterInput = Elements.StylesSidebarPane.createPropertyFilterElement(
         Common.UIString('Filter'), hbox, this._stylesWidget.onFilterChanged.bind(this._stylesWidget));
+    UI.ARIAUtils.setAccessibleName(filterInput, Common.UIString('Filter Styles'));
     filterContainerElement.appendChild(filterInput);
     var toolbar = new UI.Toolbar('styles-pane-toolbar', hbox);
     toolbar.makeToggledGray();

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

+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+UI.ARIAUtils = {};
+
+/**
+ * @param {!Element} element
+ */
+UI.ARIAUtils.markAsTab = function(element) {
+  element.setAttribute('role', 'tab');
+};
+
+/**
+ * @param {!Element} element
+ * @param {boolean} value
+ */
+UI.ARIAUtils.setSelected = function(element, value) {
+  // aria-selected behaves differently for false and undefined.
+  // Often times undefined values are unintentionally typed as booleans.
+  // Use !! to make sure this is true or false.
+  element.setAttribute('aria-selected', !!value);
+};
+
+/**
+ * @param {!Element} element
+ * @param {boolean} value
+ */
+UI.ARIAUtils.setPressed = function(element, value) {
+  // aria-pressed behaves differently for false and undefined.
+  // Often times undefined values are unintentionally typed as booleans.
+  // Use !! to make sure this is true or false.
+  element.setAttribute('aria-pressed', !!value);
+};
+
+/**
+ * @param {!Element} element
+ * @param {string} name
+ */
+UI.ARIAUtils.setAccessibleName = function(element, name) {
+  element.setAttribute('aria-label', name);
+};

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

@@ -65,6 +65,7 @@ UI.InspectorView = class extends UI.VBox {
     this._tabbedPane.registerRequiredCSS('ui/inspectorViewTabbedPane.css');
     this._tabbedPane.setTabSlider(true);
     this._tabbedPane.addEventListener(UI.TabbedPane.Events.TabSelected, this._tabSelected, this);
+    this._tabbedPane.setAccessibleName(Common.UIString('Panels'));
 
     if (Host.isUnderTest())
       this._tabbedPane.setAutoSelectFirstItemOnShow(false);

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

@@ -40,7 +40,6 @@ 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');
@@ -60,6 +59,13 @@ UI.TabbedPane = class extends UI.VBox {
     UI.zoomManager.addEventListener(UI.ZoomManager.Events.ZoomChanged, this._zoomChanged, this);
   }
 
+  /**
+   * @param {string} name
+   */
+  setAccessibleName(name) {
+    UI.ARIAUtils.setAccessibleName(this._tabsElement, name);
+  }
+
   /**
    * @param {boolean} locked
    */
@@ -753,7 +759,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, true);
     tab.view.show(this.element);
     this._updateTabSlider();
   }
@@ -1023,8 +1029,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');

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

@@ -607,6 +607,7 @@ UI.ToolbarToggle = class extends UI.ToolbarButton {
     this._untoggledGlyph = glyph;
     this._toggledGlyph = toggledGlyph;
     this.element.classList.add('toolbar-state-off');
+    UI.ARIAUtils.setPressed(this.element, false);
   }
 
   /**
@@ -625,6 +626,7 @@ UI.ToolbarToggle = class extends UI.ToolbarButton {
     this._toggled = toggled;
     this.element.classList.toggle('toolbar-state-on', toggled);
     this.element.classList.toggle('toolbar-state-off', !toggled);
+    UI.ARIAUtils.setPressed(this.element, toggled);
     if (this._toggledGlyph && this._untoggledGlyph)
       this.setGlyph(toggled ? this._toggledGlyph : this._untoggledGlyph);
   }

third_party/WebKit/Source/devtools/front_end/ui/module.json

@@ -48,6 +48,7 @@
         "SuggestBox.js",
         "TabbedPane.js",
         "UIUtils.js",
+        "ARIAUtils.js",
         "ZoomManager.js",
         "ShortcutsScreen.js",
         "Geometry.js"