Bug 1826824 - Enable <a> and <html:a> to be tab navigable in <panelview> elements. r=Gijs,Jamie

Since moz-support-link elements can be declared in markup or created
in JS, we needed to add a localName check to the
_makeNavigableTreeWalker function. This localName check allows the
moz-support-link, or any anchor element, to be tab navigable when
used within a <panelview> element.

Differential Revision: https://phabricator.services.mozilla.com/D174981

browser/components/customizableui/PanelMultiView.jsm

@@ -1543,10 +1543,12 @@ var PanelView = class extends AssociatedToNode {
       if (arrowKey && isNavigableWithTabOnly) {
         return NodeFilter.FILTER_REJECT;
       }
+      let localName = node.localName.toLowerCase();
       if (
-        node.tagName == "button" ||
-        node.tagName == "toolbarbutton" ||
-        node.tagName == "checkbox" ||
+        localName == "button" ||
+        localName == "toolbarbutton" ||
+        localName == "checkbox" ||
+        localName == "a" ||
         node.classList.contains("text-link") ||
         (!arrowKey && isNavigableWithTabOnly)
       ) {
@@ -1554,8 +1556,8 @@ var PanelView = class extends AssociatedToNode {
         // Don't do this for browser and iframe elements because this breaks
         // tabbing behavior. They're already focusable anyway.
         if (
-          node.tagName != "browser" &&
-          node.tagName != "iframe" &&
+          localName != "browser" &&
+          localName != "iframe" &&
           !node.hasAttribute("tabindex")
         ) {
           node.setAttribute("tabindex", "-1");

browser/components/customizableui/test/browser_PanelMultiView_keyboard.js

@@ -22,6 +22,8 @@ let gMainTextbox;
 let gMainButton2;
 let gMainButton3;
 let gCheckbox;
+let gNamespacedLink;
+let gLink;
 let gMainTabOrder;
 let gMainArrowOrder;
 let gSubView;
@@ -130,6 +132,24 @@ add_setup(async function() {
   gCheckbox = document.createXULElement("checkbox");
   gCheckbox.id = "gCheckbox";
   gMainView.appendChild(gCheckbox);
+
+  // moz-support-links in XUL documents are created with the
+  // <html:a> tag and so we need to test this separately from
+  // <a> tags.
+  gNamespacedLink = document.createElementNS(
+    "http://www.w3.org/1999/xhtml",
+    "html:a"
+  );
+  gNamespacedLink.href = "www.mozilla.org";
+  gNamespacedLink.innerText = "gNamespacedLink";
+  gNamespacedLink.id = "gNamespacedLink";
+  gMainView.appendChild(gNamespacedLink);
+  gLink = document.createElement("a");
+  gLink.href = "www.mozilla.org";
+  gLink.innerText = "gLink";
+  gLink.id = "gLink";
+  gMainView.appendChild(gLink);
+
   gMainTabOrder = [
     gMainButton1,
     gMainMenulist,
@@ -138,8 +158,17 @@ add_setup(async function() {
     gMainButton2,
     gMainButton3,
     gCheckbox,
+    gNamespacedLink,
+    gLink,
+  ];
+  gMainArrowOrder = [
+    gMainButton1,
+    gMainButton2,
+    gMainButton3,
+    gCheckbox,
+    gNamespacedLink,
+    gLink,
   ];
-  gMainArrowOrder = [gMainButton1, gMainButton2, gMainButton3, gCheckbox];
 
   gSubView = document.createXULElement("panelview");
   gSubView.id = "testSubView";