Bug 1664086: Use Fluent to set aria-label for credit card list options in preferences. r=zbraniecki,fluent-reviewers

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

browser/extensions/formautofill/content/manageDialog.js

@@ -426,11 +426,25 @@ class ManageCreditCards extends ManageRecords {
    * @returns {string}
    */
   getLabelInfo(creditCard) {
+    // The card type is displayed visually using an image. For a11y, we need
+    // to expose it as text. We do this using aria-label. However,
+    // aria-label overrides the text content, so we must include that also.
+    // Since the text content is generated by Fluent, aria-label must be
+    // generated by Fluent also.
+    let type;
+    try {
+      type = FormAutofillUtils.stringBundle.GetStringFromName(
+        `cardNetwork.${creditCard["cc-type"]}`
+      );
+    } catch (e) {
+      type = ""; // Unknown.
+    }
     return CreditCard.getLabelInfo({
       name: creditCard["cc-name"],
       number: creditCard["cc-number"],
       month: creditCard["cc-exp-month"],
       year: creditCard["cc-exp-year"],
+      type,
     });
   }
 
@@ -449,28 +463,6 @@ class ManageCreditCards extends ManageRecords {
       let record = option.record;
       if (record && record["cc-type"]) {
         option.setAttribute("cc-type", record["cc-type"]);
-        // The card type is displayed visually using an image. For a11y, we need
-        // to expose it as text. We do this using aria-label. However,
-        // aria-label overrides the text content, so we must include that also.
-        // XXX Bug 1664086: We should set aria-label using Fluent. The code
-        // below does not react to locale changes, so aria-label will be wrong
-        // if the locale is changed at runtime. This hack was necessary to get
-        // this uplifted to 81, but should be fixed sooner rather than later.
-        let ccTypeName;
-        try {
-          ccTypeName = FormAutofillUtils.stringBundle.GetStringFromName(
-            `cardNetwork.${record["cc-type"]}`
-          );
-        } catch (e) {
-          ccTypeName = null; // Unknown.
-        }
-        if (ccTypeName) {
-          await document.l10n.translateElements([option]);
-          option.setAttribute(
-            "aria-label",
-            `${ccTypeName} ${option.textContent}`
-          );
-        }
       } else {
         option.removeAttribute("cc-type");
       }

browser/extensions/formautofill/test/browser/creditCard/browser_manageCreditCardsDialog.js

@@ -60,33 +60,40 @@ add_task(async function test_removingSingleAndMultipleCreditCards() {
 
   const expectedLabels = [
     {
-      id: "credit-card-label-number-name",
-      args: { number: "**** 1881", name: "Chris P. Bacon" },
+      id: "credit-card-label-number-name-2",
+      args: { number: "**** 1881", name: "Chris P. Bacon", type: "Visa" },
     },
     {
-      id: "credit-card-label-number",
-      args: { number: "**** 5100" },
+      id: "credit-card-label-number-2",
+      args: { number: "**** 5100", type: "MasterCard" },
     },
     {
-      id: "credit-card-label-number-expiration",
-      args: { number: "**** 7870", month: "1", year: "2000" },
+      id: "credit-card-label-number-expiration-2",
+      args: {
+        number: "**** 7870",
+        month: "1",
+        year: "2000",
+        type: "MasterCard",
+      },
     },
     {
-      id: "credit-card-label-number-name-expiration",
+      id: "credit-card-label-number-name-expiration-2",
       args: {
         number: "**** 1045",
         name: "Timothy Berners-Lee",
         month: "12",
         year: (new Date().getFullYear() + 10).toString(),
+        type: "Visa",
       },
     },
     {
-      id: "credit-card-label-number-name-expiration",
+      id: "credit-card-label-number-name-expiration-2",
       args: {
         number: "**** 1111",
         name: "John Doe",
         month: "4",
         year: new Date().getFullYear().toString(),
+        type: "Visa",
       },
     },
   ];

toolkit/locales/en-US/toolkit/payments/payments.ftl

@@ -20,25 +20,33 @@ credit-card-expiration = Expires on { $month }/{ $year }
 #
 # Variables:
 #   $number (String): Partially-redacted credit card number
-credit-card-label-number = { $number }
+#   $type (String): Credit card type
+credit-card-label-number-2 = { $number }
+    .aria-label = { $type } { credit-card-label-number-2 }
 
 # Label for a credit card with a number and name
 #
 # Variables:
 #   $number (String): Partially-redacted credit card number
 #   $name (String): Cardholder name
-credit-card-label-number-name = { $number }, { $name }
+#   $type (String): Credit card type
+credit-card-label-number-name-2 = { $number }, { $name }
+    .aria-label = { $type } { credit-card-label-number-name-2 }
 
 # Label for a credit card with a number and expiration date
 #
 # Variables:
 #   $number (String): Partially-redacted credit card number
-credit-card-label-number-expiration = { $number }, { credit-card-expiration }
+#   $type (String): Credit card type
+credit-card-label-number-expiration-2 = { $number }, { credit-card-expiration }
+    .aria-label = { $type } { credit-card-label-number-expiration-2 }
 
 # Label for a credit card with a number, name, and expiration date
 #
 # Variables:
 #   $number (String): Partially-redacted credit card number
 #   $name (String): Cardholder name
-credit-card-label-number-name-expiration =
+#   $type (String): Credit card type
+credit-card-label-number-name-expiration-2 =
   { $number }, { $name }, { credit-card-expiration }
+    .aria-label = { $type } { credit-card-label-number-name-expiration-2 }

toolkit/modules/CreditCard.jsm

@@ -312,8 +312,9 @@ class CreditCard {
   /**
    * Get credit card display label. It should display masked numbers, the
    * cardholder's name, and the expiration date, separated by a commas.
+   * In addition, the card type is provided in the accessibility label.
    */
-  static getLabelInfo({ number, name, month, year }) {
+  static getLabelInfo({ number, name, month, year, type }) {
     let formatSelector = ["number"];
     if (name) {
       formatSelector.push("name");
@@ -321,7 +322,7 @@ class CreditCard {
     if (month && year) {
       formatSelector.push("expiration");
     }
-    let stringId = "credit-card-label-" + formatSelector.join("-");
+    let stringId = `credit-card-label-${formatSelector.join("-")}-2`;
     return {
       id: stringId,
       args: {
@@ -329,6 +330,7 @@ class CreditCard {
         name,
         month: month?.toString(),
         year: year?.toString(),
+        type,
       },
     };
   }