Commit 652129ce authored by einbinder's avatar einbinder Committed by Commit bot

DevTools: Introduce ARIAUtils

BUG=none

Review-Url: https://codereview.chromium.org/2655393003
Cr-Commit-Position: refs/heads/master@{#447901}
parent 90149a48
......@@ -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",
......
......@@ -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);
......
......@@ -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();
......
// 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);
};
......@@ -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);
......
......@@ -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');
......
......@@ -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);
}
......
......@@ -48,6 +48,7 @@
"SuggestBox.js",
"TabbedPane.js",
"UIUtils.js",
"ARIAUtils.js",
"ZoomManager.js",
"ShortcutsScreen.js",
"Geometry.js"
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment