Bug 1619651: Fix focusing of create login button r=jaws

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

--HG--
extra : moz-landing-system : lando

browser/components/aboutlogins/content/components/login-list.js

@@ -264,24 +264,23 @@ export default class LoginList extends HTMLElement {
       }
       case "keyup":
       case "keydown": {
-        this._handleTabbingToExternalElements(event);
+        if (event.type == "keydown") {
+          this._handleTabbingToExternalElements(event);
 
-        if (
-          this.shadowRoot.activeElement &&
-          this.shadowRoot.activeElement.closest("ol")
-        ) {
-          // Since Space, ArrowUp and ArrowDown will perform actions, prevent
-          // them from also scrolling the list.
           if (
-            event.type == "keydown" &&
+            this.shadowRoot.activeElement &&
+            this.shadowRoot.activeElement.closest("ol") &&
             (event.key == " " ||
               event.key == "ArrowUp" ||
               event.key == "ArrowDown")
           ) {
+            // Since Space, ArrowUp and ArrowDown will perform actions, prevent
+            // them from also scrolling the list.
             event.preventDefault();
           }
-          this._handleKeyboardNavWithinList(event);
         }
+
+        this._handleKeyboardNavWithinList(event);
         break;
       }
     }

browser/components/aboutlogins/tests/browser/browser_tabKeyNav.js

@@ -83,3 +83,42 @@ add_task(async function test_tab_key_nav() {
     );
   });
 });
+
+add_task(async function testTabToCreateButton() {
+  let browser = gBrowser.selectedBrowser;
+  await SpecialPowers.spawn(browser, [], async () => {
+    const EventUtils = ContentTaskUtils.getEventUtils(content);
+
+    function waitForAnimationFrame() {
+      return new Promise(resolve => content.requestAnimationFrame(resolve));
+    }
+
+    async function tab() {
+      EventUtils.synthesizeKey("KEY_Tab", {}, content);
+      await waitForAnimationFrame();
+    }
+
+    let loginList = content.document.querySelector("login-list");
+    let loginSort = loginList.shadowRoot.getElementById("login-sort");
+    let loginListbox = loginList.shadowRoot.querySelector("ol");
+    let createButton = loginList.shadowRoot.querySelector(
+      ".create-login-button"
+    );
+    let getFocusedEl = () => loginList.shadowRoot.activeElement;
+
+    is(getFocusedEl(), null, "login-list isn't focused");
+
+    loginSort.focus();
+    await waitForAnimationFrame();
+    is(getFocusedEl(), loginSort, "login sort is focused");
+
+    await tab();
+    is(getFocusedEl(), loginListbox, "listbox is focused next");
+
+    await tab();
+    is(getFocusedEl(), createButton, "create button is after");
+
+    await tab();
+    is(getFocusedEl(), null, "login-list isn't focused again");
+  });
+});

browser/components/aboutlogins/tests/chrome/test_login_list.html

@@ -193,6 +193,11 @@ add_task(async function test_keyboard_navigation() {
   ok(ol.querySelectorAll(".login-list-item[data-guid]:not([hidden])")[1].classList.contains("keyboard-selected"), `second item should be marked as keyboard-selected (DOWN)`);
   selectedGuid = ol.querySelectorAll(".login-list-item[data-guid]:not([hidden])")[1].dataset.guid;
 
+  synthesizeKey("VK_DOWN", { repeat: 5 });
+  ok(ol.querySelectorAll(".login-list-item[data-guid]:not([hidden])")[6].classList.contains("keyboard-selected"), `sixth item should be marked as keyboard-selected after 5 DOWN repeats`);
+  synthesizeKey("VK_UP", { repeat: 5 });
+  ok(ol.querySelectorAll(".login-list-item[data-guid]:not([hidden])")[1].classList.contains("keyboard-selected"), `second item should be marked as keyboard-selected again after 5 UP repeats`);
+
   loginSelectedEvent = null;
   gLoginList.addEventListener("AboutLoginsLoginSelected", event => loginSelectedEvent = event, {once: true});
   sendKey("RETURN");