Bug 1576175 - Move focus handling to login-item and forward focus to the breach alert when it is visible during tabbing. r=MattN
authorJared Wein <jwein@mozilla.com>
Wed, 04 Sep 2019 21:36:13 +0000
changeset 491816 7e64bc498809e01f7ac9149438895e5b30922242
parent 491815 e698fd77a0939128f64c4e87b02ddf22753046b6
child 491817 31b7f250c9295de8a3d23d844c21a767d49b4be6
push id94527
push userjwein@mozilla.com
push dateThu, 05 Sep 2019 07:58:44 +0000
treeherderautoland@31b7f250c929 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN
bugs1576175
milestone71.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 1576175 - Move focus handling to login-item and forward focus to the breach alert when it is visible during tabbing. r=MattN Differential Revision: https://phabricator.services.mozilla.com/D44709
browser/components/aboutlogins/content/components/login-item.js
browser/components/aboutlogins/content/components/login-list.js
--- a/browser/components/aboutlogins/content/components/login-item.js
+++ b/browser/components/aboutlogins/content/components/login-item.js
@@ -83,16 +83,31 @@ export default class LoginItem extends H
     this._revealCheckbox.addEventListener("click", this);
     this._originInput.addEventListener("auxclick", this);
     window.addEventListener("AboutLoginsInitialLoginSelected", this);
     window.addEventListener("AboutLoginsLoadInitialFavicon", this);
     window.addEventListener("AboutLoginsLoginSelected", this);
     window.addEventListener("AboutLoginsShowBlankLogin", this);
   }
 
+  focus() {
+    if (!this._breachAlert.hidden) {
+      const breachAlertLink = this._breachAlert.querySelector(
+        ".breach-alert-link"
+      );
+      breachAlertLink.focus();
+      return;
+    }
+    if (!this._editButton.disabled) {
+      this._editButton.focus();
+      return;
+    }
+    this._deleteButton.focus();
+  }
+
   async render() {
     [this._errorMessage, this._breachAlert].forEach(el => {
       el.hidden = true;
     });
     if (this._breachesMap && this._breachesMap.has(this._login.guid)) {
       const breachDetails = this._breachesMap.get(this._login.guid);
       const breachAlertLink = this._breachAlert.querySelector(
         ".breach-alert-link"
--- a/browser/components/aboutlogins/content/components/login-list.js
+++ b/browser/components/aboutlogins/content/components/login-list.js
@@ -422,25 +422,17 @@ export default class LoginList extends H
       // CSS property set. Explicitly forward focus here until
       // this keyboard trap is fixed.
       if (event.shiftKey) {
         return;
       }
       let loginItem = document.querySelector("login-item");
       if (loginItem) {
         event.preventDefault();
-        let editButton = loginItem.shadowRoot.querySelector(".edit-button");
-        if (editButton && !editButton.disabled) {
-          editButton.focus();
-          return;
-        }
-        let deleteButton = loginItem.shadowRoot.querySelector(
-          "button.delete-button"
-        );
-        deleteButton.focus();
+        loginItem.focus();
       }
       return;
     } else if (this._list != this.shadowRoot.activeElement) {
       return;
     }
 
     let isLTR = document.dir == "ltr";
     let activeDescendantId = this._list.getAttribute("aria-activedescendant");