Bug 1576047: Make breach indicators accessible. r=jaws,fluent-reviewers,flod

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

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

browser/components/aboutlogins/content/aboutLogins.html

@@ -117,6 +117,7 @@
           <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>
 

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

@@ -158,22 +158,20 @@ ol {
   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;
-  -moz-context-properties: fill;
-  fill: var(--red-90);
+:not(.breached) > .list-item-warning-icon {
+  display: none;
 }
 
-.login-list-item.breached:dir(rtl) {
-  background-position: left 24px center;
+.breached > .list-item-warning-icon {
+  -moz-context-properties: fill;
+  fill: var(--red-90);
+  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);
     }
   }

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

@@ -213,8 +213,12 @@ add_task(async function test_populated_list() {
 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() {

browser/locales/en-US/browser/aboutLogins.ftl

@@ -65,6 +65,9 @@ about-logins-login-list-empty-search-description = There are no results matching
 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