A11y labels for credit cards in Settings.

https://screenshot.googleplex.com/965FrectVQzUKWC.png

Bug: 1344533
Change-Id: Ic91a8a1095ee1f6f6f5ba54d1dd9aad2efa52822
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4517878
Reviewed-by: Viktor Semeniuk <vsemeniuk@google.com>
Commit-Queue: Dmitry Vykochko <vykochko@google.com>
Reviewed-by: Denis Kuznetsov <antrim@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1147762}

chrome/app/settings_strings.grdp

@@ -390,15 +390,21 @@
   <message name="IDS_SETTINGS_AUTOFILL_DETAIL" desc="Description of what toggling the 'Autofill' setting does. Immediately underneath IDS_SETTINGS_AUTOFILL">
     Enable Autofill to fill out forms in a single click
   </message>
+  <message name="IDS_SETTINGS_AUTOFILL_CARD_DESCRIPTION" desc="The (accessibility) credit card description from the network of the card and last 4 digits of the card number.">
+    <ph name="NETWORK_NAME">$1<ex>Visa</ex></ph> ending in <ph name="LAST_FOUR_DIGITS">$2<ex>1234</ex></ph>
+  </message>
+  <message name="IDS_SETTINGS_AUTOFILL_CARD_A11Y_LABELED" desc="The credit/debit card summary labeled for a11y">
+    Card: <ph name="CARD">$1<ex>Visa ending in 1111</ex></ph>
+  </message>
+  <message name="IDS_SETTINGS_AUTOFILL_CARD_EXP_DATE_A11Y_LABELED" desc="The credit/debit card expiration data labeled for a11y">
+    Expiration date: <ph name="CARD">$1<ex>11/2028</ex></ph>
+  </message>
   <message name="IDS_SETTINGS_AUTOFILL_MORE_ACTIONS_FOR_ADDRESS" desc="The (accessibility) title of a button, which brings up a menu of actions that can be taken on a stored autofill address. The address is described by the name of the recipient and usually the beginning of the address (i.e. street name and building number). The name and the address are separated by comma.">
     More actions for <ph name="ADDRESS_SUMMARY">$1<ex>John Doe, 123 Main Street</ex></ph>
   </message>
   <message name="IDS_SETTINGS_AUTOFILL_MORE_ACTIONS_FOR_CREDIT_CARD" desc="The (accessibility) title of a button, which brings up a menu of actions that can be taken on a stored credit card. The credit card is described by the credit card nickname or the credit card network and last 4 digits of the card number.">
     More actions for <ph name="CARD_DESCRIPTION">$1<ex>My main card</ex></ph>
   </message>
-  <message name="IDS_SETTINGS_AUTOFILL_MORE_ACTIONS_CARD_DESCRIPTION" desc="The (accessibility) credit card description from the network of the card and last 4 digits of the card number.">
-    <ph name="NETWORK_NAME">$1<ex>Visa</ex></ph> ending in <ph name="LAST_FOUR_DIGITS">$2<ex>1234</ex></ph>
-  </message>
   <message name="IDS_AUTOFILL_ADD_VIRTUAL_CARD" desc="The text shown in the secondary action menu button to enroll a card in the virtual card feature. Virtual cards are credit cards generated from the actual cards and provide extra security.">
     Turn on virtual card
   </message>

chrome/app/settings_strings_grdp/IDS_SETTINGS_AUTOFILL_CARD_A11Y_LABELED.png.sha1

@@ -0,0 +1 @@
+a05aead8d8553cadcb17ce7719719e4dd2d61cee

chrome/app/settings_strings_grdp/IDS_SETTINGS_AUTOFILL_CARD_EXP_DATE_A11Y_LABELED.png.sha1

@@ -0,0 +1 @@
+a05aead8d8553cadcb17ce7719719e4dd2d61cee

chrome/browser/resources/settings/autofill_page/credit_card_list_entry.html

@@ -39,19 +39,33 @@
         margin-inline-end: 16px;
         vertical-align: middle;
       }
+
+      .screen-reader-only-substituted-parent {
+        position: relative;
+      }
+      .screen-reader-only-visually-hidden {
+        clip-path: inset(100%);
+        height: 100%;
+        position: absolute;
+        width: 100%;
+      }
     </style>
     <div class="list-item" role="row">
       <div class="type-column" role="cell">
         <template is="dom-if" if="[[showExpirationAsSecondaryLabelEnabled_]]">
           <img id="cardImage" src="[[creditCard.imageSrc]]" alt="">
         </template>
-        <div class="summary-column">
-          <div id="summaryLabel" class="ellipses">
+        <div class="summary-column screen-reader-only-substituted-parent">
+          <div class="screen-reader-only-visually-hidden">
+            [[getSummaryAriaLabel_(creditCard)]],
+            [[getSummaryAriaSublabel_(creditCard)]]
+          </div>
+          <div id="summaryLabel" class="ellipses" aria-hidden="true">
             [[creditCard.metadata.summaryLabel]]
           </div>
           <div id="summarySublabel"
               hidden$="[[!showExpirationAsSecondaryLabelEnabled_]]"
-              class="ellipses sub-label">
+              class="ellipses sub-label" aria-hidden="true">
             [[getSummarySublabel_(creditCard, virtualCardEnrollmentEnabled_)]]
           </div>
         </div>

chrome/browser/resources/settings/autofill_page/credit_card_list_entry.ts

@@ -14,13 +14,18 @@ import '../settings_shared.css.js';
 import './passwords_shared.css.js';
 
 import {I18nMixin} from '//resources/cr_elements/i18n_mixin.js';
-import {assert} from 'chrome://resources/js/assert_ts.js';
+import {assert, assertNotReached} from 'chrome://resources/js/assert_ts.js';
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {loadTimeData} from '../i18n_setup.js';
 
 import {getTemplate} from './credit_card_list_entry.html.js';
 
+const enum CardSummarySublabelType {
+  VIRTUAL_CARD,
+  EXPIRATION_DATE,
+}
+
 const SettingsCreditCardListEntryElementBase = I18nMixin(PolymerElement);
 
 export class SettingsCreditCardListEntryElement extends
@@ -91,31 +96,30 @@ export class SettingsCreditCardListEntryElement extends
     }));
   }
 
-  /**
-   * @returns the title for the More Actions button corresponding to the card
-   *     which is described by the nickname or the network name and last 4
-   *     digits or name
-   */
-  private moreActionsTitle_(creditCard: chrome.autofillPrivate.CreditCardEntry):
-      string {
-    if (creditCard.nickname) {
-      return this.i18n('moreActionsForCreditCard', creditCard.nickname);
-    }
-
+  private getCardNumberDescription_(
+      creditCard: chrome.autofillPrivate.CreditCardEntry): string|undefined {
     const cardNumber = creditCard.cardNumber;
     if (cardNumber) {
       const lastFourDigits =
           cardNumber.substring(Math.max(0, cardNumber.length - 4));
       if (lastFourDigits) {
         const network = creditCard.network || this.i18n('genericCreditCard');
-        return this.i18n(
-            'moreActionsForCreditCard',
-            this.i18n(
-                'moreActionsCreditCardDescription', network, lastFourDigits));
+        return this.i18n('creditCardDescription', network, lastFourDigits);
       }
     }
+    return undefined;
+  }
 
-    return this.i18n('moreActionsForCreditCard', creditCard.name!);
+  /**
+   * @returns the title for the More Actions button corresponding to the card
+   *     which is described by the nickname or the network name and last 4
+   *     digits or name
+   */
+  private moreActionsTitle_(): string {
+    const cardDescription = this.creditCard.nickname ||
+        this.getCardNumberDescription_(this.creditCard) ||
+        this.creditCard.name!;
+    return this.i18n('moreActionsForCreditCard', cardDescription);
   }
 
   /**
@@ -144,21 +148,51 @@ export class SettingsCreditCardListEntryElement extends
         !this.showExpirationAsSecondaryLabelEnabled_;
   }
 
+  private getSummaryAriaLabel_(): string {
+    const cardNumberDescription =
+        this.getCardNumberDescription_(this.creditCard);
+    if (cardNumberDescription) {
+      return this.i18n('creditCardA11yLabeled', cardNumberDescription);
+    }
+    return this.creditCard.metadata!.summaryLabel;
+  }
+
+  private getCardSublabelType(): CardSummarySublabelType {
+    return this.isVirtualCardEnrolled_() ?
+        CardSummarySublabelType.VIRTUAL_CARD :
+        CardSummarySublabelType.EXPIRATION_DATE;
+  }
+
   /**
    * Returns virtual card metadata if the card is eligible for enrollment or has
    * already enrolled, or expiration date (MM/YY) otherwise.
    * E.g., 11/23, or Virtual card turned on
    */
   private getSummarySublabel_(): string {
-    if (this.isVirtualCardEnrolled_()) {
-      return this.i18n('virtualCardTurnedOn');
+    switch (this.getCardSublabelType()) {
+      case CardSummarySublabelType.VIRTUAL_CARD:
+        return this.i18n('virtualCardTurnedOn');
+      case CardSummarySublabelType.EXPIRATION_DATE:
+        assert(this.creditCard.expirationMonth);
+        assert(this.creditCard.expirationYear);
+        // Convert string (e.g. '06') to number (e.g. 6).
+        return this.creditCard.expirationMonth + '/' +
+            this.creditCard.expirationYear.toString().substring(2);
+      default:
+        assertNotReached();
     }
+  }
 
-    assert(this.creditCard.expirationMonth);
-    assert(this.creditCard.expirationYear);
-    // Convert string (e.g. '06') to number (e.g. 6).
-    return this.creditCard.expirationMonth + '/' +
-        this.creditCard.expirationYear.toString().substring(2);
+  private getSummaryAriaSublabel_(): string {
+    switch (this.getCardSublabelType()) {
+      case CardSummarySublabelType.VIRTUAL_CARD:
+        return this.getSummarySublabel_();
+      case CardSummarySublabelType.EXPIRATION_DATE:
+        return this.i18n(
+            'creditCardExpDateA11yLabeled', this.getSummarySublabel_());
+      default:
+        assertNotReached();
+    }
   }
 
   private shouldShowVirtualCardSecondarySublabel_(): boolean {

chrome/browser/ui/webui/settings/settings_localized_strings_provider.cc

@@ -967,11 +967,13 @@ void AddAutofillStrings(content::WebUIDataSource* html_source,
     {"addressPhone", IDS_SETTINGS_AUTOFILL_ADDRESSES_PHONE},
     {"addressEmail", IDS_SETTINGS_AUTOFILL_ADDRESSES_EMAIL},
     {"honorificLabel", IDS_SETTINGS_AUTOFILL_ADDRESS_HONORIFIC_LABEL},
+    {"creditCardDescription", IDS_SETTINGS_AUTOFILL_CARD_DESCRIPTION},
+    {"creditCardA11yLabeled", IDS_SETTINGS_AUTOFILL_CARD_A11Y_LABELED},
+    {"creditCardExpDateA11yLabeled",
+     IDS_SETTINGS_AUTOFILL_CARD_EXP_DATE_A11Y_LABELED},
     {"moreActionsForAddress", IDS_SETTINGS_AUTOFILL_MORE_ACTIONS_FOR_ADDRESS},
     {"moreActionsForCreditCard",
      IDS_SETTINGS_AUTOFILL_MORE_ACTIONS_FOR_CREDIT_CARD},
-    {"moreActionsCreditCardDescription",
-     IDS_SETTINGS_AUTOFILL_MORE_ACTIONS_CARD_DESCRIPTION},
     {"removeAddress", IDS_SETTINGS_ADDRESS_REMOVE},
     {"removeAddressConfirmationTitle",
      IDS_SETTINGS_ADDRESS_REMOVE_CONFIRMATION_TITLE},