Bug 1461522 - Factor out a focusableSelector utility; r=jdescottes
authorBrian Birtles <birtles@gmail.com>
Thu, 28 Jun 2018 15:10:27 +0900
changeset 424946 dd9b63632e1982b37fcd4eff8cee95df9e064001
parent 424945 42d6ff34217176d4b38a4dfe6a1d1f3da0c545bb
child 424947 c4f83d8e4596b759c26072ee7959d90650b3ee50
push id65903
push userbbirtles@mozilla.com
push dateWed, 04 Jul 2018 07:23:06 +0000
treeherderautoland@cc6ec2789c9d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes
bugs1461522
milestone63.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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
devtools/client/shared/focus.js
devtools/client/shared/moz.build
devtools/client/shared/widgets/tooltip/HTMLTooltip.js
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;