Bug 1461522 - Factor out a focusableSelector utility; r=jdescottes
authorBrian Birtles <birtles@gmail.com>
Thu, 28 Jun 2018 15:10:27 +0900
changeset 814150 dd9b63632e1982b37fcd4eff8cee95df9e064001
parent 814149 42d6ff34217176d4b38a4dfe6a1d1f3da0c545bb
child 814151 c4f83d8e4596b759c26072ee7959d90650b3ee50
push id115123
push userjdescottes@mozilla.com
push dateWed, 04 Jul 2018 17:42:29 +0000
reviewersjdescottes
bugs1461522
milestone63.0a1
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;