corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1608554: Initialize toolbartabstops in dynamically added widgets. r=Gijs

Browse Source 
When ToolbarKeyboardNavigator initializes, it sets aria-hidden and adds a focus listener on toolbartabstop elements.
This is necessary for proper functionality of toolbar keyboard navigation.
However, widgets can be dynamically added by CustomizableUI after ToolbarKeyboardNavigator initializes.
The search bar is one such widget and it does contain toolbartabstop elements.
We now watch for this and initialize any toolbartabstop elements inside added widgets.

Differential Revision: https://phabricator.services.mozilla.com/D62178
This commit is contained in:
James Teh
2020-02-12 01:03:18 +00:00
parent dbc9166c22
commit 70c723135b
3 changed files with 38 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
browser/base/content/browser-toolbarKeyNav.js
View File

@@ -86,6 +86,16 @@ ToolbarKeyboardNavigator = {
return aRoot._toolbarKeyNavWalker;
},
_initTabStops(aRoot) {
for (let stop of aRoot.getElementsByTagName("toolbartabstop")) {
// These are invisible, but because they need to be in the tab order,
// they can't get display: none or similar. They must therefore be
// explicitly hidden for accessibility.
stop.setAttribute("aria-hidden", "true");
stop.addEventListener("focus", this);
}
},
init() {
for (let id of this.kToolbars) {
let toolbar = document.getElementById(id);
@@ -93,16 +103,11 @@ ToolbarKeyboardNavigator = {
// We manage toolbar focus completely. This attribute ensures that CSS
// doesn't set -moz-user-focus: normal.
toolbar.setAttribute("keyNav", "true");
for (let stop of toolbar.getElementsByTagName("toolbartabstop")) {
// These are invisible, but because they need to be in the tab order,
// they can't get display: none or similar. They must therefore be
// explicitly hidden for accessibility.
stop.setAttribute("aria-hidden", "true");
stop.addEventListener("focus", this);
}
this._initTabStops(toolbar);
toolbar.addEventListener("keydown", this);
toolbar.addEventListener("keypress", this);
}
CustomizableUI.addListener(this);
},
uninit() {
@@ -115,6 +120,19 @@ ToolbarKeyboardNavigator = {
toolbar.removeEventListener("keypress", this);
toolbar.removeAttribute("keyNav");
}
CustomizableUI.removeListener(this);
},
// CustomizableUI event handler
onWidgetAdded(aWidgetId, aArea, aPosition) {
if (!this.kToolbars.includes(aArea)) {
return;
}
let widget = document.getElementById(aWidgetId);
if (!widget) {
return;
}
this._initTabStops(widget);
},
_focusButton(aButton) {