Bug 1576047: Make breach indicators accessible. r=jaws,fluent-reviewers,flod
authorlesley <lnorton@mozilla.com>
Mon, 09 Sep 2019 16:37:05 +0000
changeset 555192 00f88085fc8b162ed0dd8e0b040007537f97b027
parent 555191 efec108c1441c20db478d4ebbc1c45b80cde2c96
child 555193 23b2c24e9c80bc0ea77657504919b181a8b6da6d
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)
reviewersjaws, fluent-reviewers, flod
bugs1576047
milestone70.0
Bug 1576047: Make breach indicators accessible. r=jaws,fluent-reviewers,flod Differential Revision: https://phabricator.services.mozilla.com/D44913
browser/components/aboutlogins/content/aboutLogins.html
browser/components/aboutlogins/content/components/login-list.css
browser/components/aboutlogins/tests/chrome/test_login_list.html
browser/locales/en-US/browser/aboutLogins.ftl
--- a/browser/components/aboutlogins/content/aboutLogins.html
+++ b/browser/components/aboutlogins/content/aboutLogins.html
@@ -112,16 +112,17 @@
       <li class="login-list-item" role="option">
         <div class="favicon-wrapper">
           <img class="favicon" src="" alt=""/>
         </div>
         <div class="labels">
           <span class="title" dir="auto"></span>
           <span class="username" dir="ltr"></span>
         </div>
+        <img data-l10n-id="about-logins-list-item-warning-icon" class="list-item-warning-icon" alt="" title="" src="chrome://global/skin/icons/warning.svg"/>
       </li>
     </template>
 
     <template id="login-intro-template">
       <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
       <link rel="stylesheet" href="chrome://browser/content/aboutlogins/common.css">
       <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/login-intro.css">
 
--- a/browser/components/aboutlogins/content/components/login-list.css
+++ b/browser/components/aboutlogins/content/components/login-list.css
@@ -159,28 +159,26 @@ ol {
   width: 16px;
 }
 
 .username {
   font-size: 0.85em;
   color: var(--in-content-deemphasized-text);
 }
 
-.login-list-item.breached {
-  padding-inline-end: 48px;
-  background-image: url("chrome://global/skin/icons/warning.svg");
-  background-position: right 24px center;
-  background-repeat: no-repeat;
+:not(.breached) > .list-item-warning-icon {
+  display: none;
+}
+
+.breached > .list-item-warning-icon {
   -moz-context-properties: fill;
   fill: var(--red-90);
-}
-
-.login-list-item.breached:dir(rtl) {
-  background-position: left 24px center;
+  min-width: 16px;
+  margin-inline-start: 12px;
 }
 
 @supports -moz-bool-pref("browser.in-content.dark-mode") {
   @media (prefers-color-scheme: dark) {
-    .login-list-item.breached {
+    .breached > .list-item-warning-icon {
       fill: var(--red-60);
     }
   }
 }
--- a/browser/components/aboutlogins/tests/chrome/test_login_list.html
+++ b/browser/components/aboutlogins/tests/chrome/test_login_list.html
@@ -208,18 +208,22 @@ add_task(async function test_populated_l
   is(loginListItems.length, 2, "After selecting one, only the two stored logins should be displayed");
   ok(loginListItems[0].classList.contains("selected"), "The first item should be selected");
   ok(!loginListItems[1].classList.contains("selected"), "The second item should still not be selected");
 });
 
 add_task(async function test_breach_indicator() {
   gLoginList.updateBreaches(TEST_BREACHES_MAP);
   let loginListItems = gLoginList.shadowRoot.querySelectorAll(".login-list-item:not(#new-login-list-item):not([hidden])");
+  let warningIcon = loginListItems[0].querySelector(".list-item-warning-icon");
+  let hiddenWarningIcon = loginListItems[1].querySelector(".list-item-warning-icon");
   ok(loginListItems[0].classList.contains("breached"), "The first login should have the .breached class.");
+  ok(!isHidden(warningIcon), "The warning icon for a breached login should not be hidden.");
   ok(!loginListItems[1].classList.contains("breached"), "The second login should not have the .breached class");
+  ok(isHidden(hiddenWarningIcon), "The warning icon for a login without an associated breach should be hidden.");
 });
 
 add_task(async function test_filtered_list() {
   let emptySearchText = gLoginList.shadowRoot.querySelector(".empty-search-message");
   ok(isHidden(emptySearchText), "The empty search text should be hidden when there are results in the list");
   is(gLoginList.shadowRoot.querySelectorAll(".login-list-item:not(#new-login-list-item):not([hidden])").length, 2, "Both logins should be visible");
   let countSpan = gLoginList.shadowRoot.querySelector(".count");
   is(JSON.parse(countSpan.getAttribute("data-l10n-args")).count, 2, "Count should match full list length");
--- a/browser/locales/en-US/browser/aboutLogins.ftl
+++ b/browser/locales/en-US/browser/aboutLogins.ftl
@@ -60,16 +60,19 @@ login-list-last-changed-option = Last Mo
 login-list-last-used-option = Last Used
 login-list-intro-title = No logins found
 login-list-intro-description = When you save a password in { -brand-product-name }, it will show up here.
 about-logins-login-list-empty-search-title = No logins found
 about-logins-login-list-empty-search-description = There are no results matching your search.
 login-list-item-title-new-login = New Login
 login-list-item-subtitle-new-login = Enter your login credentials
 login-list-item-subtitle-missing-username = (no username)
+about-logins-list-item-warning-icon = 
+  .alt = Warning icon
+  .title = Breached website
 
 ## Introduction screen
 
 login-intro-heading = Looking for your saved logins? Set up { -sync-brand-short-name }.
 login-intro-description = If you saved your logins to { -brand-product-name } on a different device, here’s how to get them here:
 login-intro-instruction-fxa = Create or sign in to your { -fxaccount-brand-name } on the device where your logins are saved
 login-intro-instruction-fxa-settings = Make sure you’ve selected the Logins checkbox in { -sync-brand-short-name } Settings
 about-logins-intro-instruction-help = Visit <a data-l10n-name="help-link">{ -lockwise-brand-short-name } Support</a> for more help