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 555095 9b189b93fb77d4a6dae3ef49826c780b59618269
parent 555094 e0bea141177c54a8321e2f77f1073c470e189723
child 555096 31b64d9a0e7b38c191f1e50008209da2eb236f1e
push id2165
push userffxbld-merge
push dateMon, 14 Oct 2019 16:30:58 +0000
treeherdermozilla-release@0eae18af659f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN
bugs1576175
milestone70.0
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
@@ -87,16 +87,31 @@ export default class LoginItem extends H
     this._originInput.addEventListener("auxclick", this);
     this._breachAlertLink.addEventListener("click", 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);
       this._breachAlertLink.href = breachDetails.breachAlertURL;
       document.l10n.setAttributes(
--- a/browser/components/aboutlogins/content/components/login-list.js
+++ b/browser/components/aboutlogins/content/components/login-list.js
@@ -429,25 +429,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");