Bug 1461522 - Factor out a focusableSelector utility; r?jdescottes
We will use this later when we introduce a MenuList class since it will want to
manage focus for its menu items.
This patch also extends the definition of focusable elements somewhat.
MozReview-Commit-ID: 3shnC0t79rF
new file mode 100644
--- /dev/null
+++ b/devtools/client/shared/focus.js
@@ -0,0 +1,19 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+// Simplied selector targetting elements that can receive the focus, full
+// version at
+// http://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus
+// .
+exports.focusableSelector = [
+ "a[href]:not([tabindex='-1'])",
+ "button:not([disabled]):not([tabindex='-1'])",
+ "iframe:not([tabindex='-1'])",
+ "input:not([disabled]):not([tabindex='-1'])",
+ "select:not([disabled]):not([tabindex='-1'])",
+ "textarea:not([disabled]):not([tabindex='-1'])",
+ "[tabindex]:not([tabindex='-1'])",
+].join(", ");
--- a/devtools/client/shared/moz.build
+++ b/devtools/client/shared/moz.build
@@ -25,16 +25,17 @@ DevToolsModules(
'css-angle.js',
'curl.js',
'demangle.js',
'developer-toolbar.js',
'devices.js',
'DOMHelpers.jsm',
'enum.js',
'file-saver.js',
+ 'focus.js',
'getjson.js',
'inplace-editor.js',
'key-shortcuts.js',
'keycodes.js',
'link.js',
'natural-sort.js',
'node-attribute-parser.js',
'options-view.js',
--- a/devtools/client/shared/widgets/tooltip/HTMLTooltip.js
+++ b/devtools/client/shared/widgets/tooltip/HTMLTooltip.js
@@ -3,16 +3,17 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
const EventEmitter = require("devtools/shared/event-emitter");
const {TooltipToggle} = require("devtools/client/shared/widgets/tooltip/TooltipToggle");
+const {focusableSelector} = require("devtools/client/shared/focus");
const {getCurrentZoom} = require("devtools/shared/layout/utils");
const {listenOnce} = require("devtools/shared/async-utils");
const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
const XHTML_NS = "http://www.w3.org/1999/xhtml";
const POSITION = {
TOP: "top",
@@ -754,23 +755,20 @@ HTMLTooltip.prototype = {
_onXulPanelHidden: function() {
if (this.isVisible()) {
this.hide();
}
},
/**
- * If the tootlip is configured to autofocus and a focusable element can be found,
- * focus it.
+ * If the tooltip is configured to autofocus and a focusable element can be
+ * found, focus it.
*/
_maybeFocusTooltip: function() {
- // Simplied selector targetting elements that can receive the focus, full version at
- // http://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus .
- const focusableSelector = "a, button, iframe, input, select, textarea";
const focusableElement = this.panel.querySelector(focusableSelector);
if (this.autofocus && focusableElement) {
focusableElement.focus();
}
},
_getTopWindow: function() {
return this.doc.defaultView.top;