Bug 1629295 - Improve a11y for screenreaders in the messenger compose addressing rows. r=mkmelin
authorAlessandro Castellani <alessandro@thunderbird.net>
Thu, 16 Apr 2020 09:59:42 -0700
changeset 29320 5aa91a099bfcf2c3905e8109d33d2b8fd174c248
parent 29319 cc0eebd9ddbd3bdec2752fb77692413f2c87d4cd
child 29321 76b88469b91e4bfed4eeccebaa31b81b3c1f2e6b
push id17309
push usergeoff@darktrojan.net
push dateThu, 16 Apr 2020 22:35:42 +0000
treeherdercomm-central@76b88469b91e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmkmelin
bugs1629295
Bug 1629295 - Improve a11y for screenreaders in the messenger compose addressing rows. r=mkmelin
mail/components/compose/content/MsgComposeCommands.js
mail/locales/en-US/messenger/messengercompose/messengercompose.ftl
mail/test/browser/composition/browser_replyAddresses.js
--- a/mail/components/compose/content/MsgComposeCommands.js
+++ b/mail/components/compose/content/MsgComposeCommands.js
@@ -3906,24 +3906,37 @@ function updateStringsOfAddressingFields
 
 /**
  * Update the aria-label of the autocomplete input field.
  *
  * @param {Element} row - The recipient address-row.
  */
 function udpateAddressingInputAriaLabel(row) {
   let type = row.querySelector(".address-label-container > label").value;
-  let count = row.querySelectorAll("mail-address-pill").length;
+  let pills = row.querySelectorAll("mail-address-pill");
   let input = row.querySelector(
     `input[is="autocomplete-input"][recipienttype]`
   );
   input.setAttribute(
     "aria-label",
-    l10n.formatValueSync("address-input-type", { type, count })
+    l10n.formatValueSync("address-input-type-aria-label", {
+      type,
+      count: pills.length,
+    })
   );
+
+  for (let pill of pills) {
+    pill.setAttribute(
+      "aria-label",
+      l10n.formatValueSync("pill-aria-label", {
+        email: pill.fullAddress,
+        count: pills.length,
+      })
+    );
+  }
 }
 
 /**
  * Update the close label of the recipient row.
  *
  * @param {Element} row - The recipient address-row.
  */
 function updateTooltipsOfAddressingFields(row) {
--- a/mail/locales/en-US/messenger/messengercompose/messengercompose.ftl
+++ b/mail/locales/en-US/messenger/messengercompose/messengercompose.ftl
@@ -4,20 +4,27 @@
 
 # Addressing widget
 
 #   $type (String) - the type of the addressing row
 remove-address-row-type = Remove the { $type } field
 
 #   $type (String) - the type of the addressing row
 #   $count (Number) - the number of address pills currently present in the addressing row
-address-input-type = { $count ->
-    [0]     Empty { $type } input field
-    [one]   { $type } input field with one address
-    *[other] { $type } input field with { $count } addresses
+address-input-type-aria-label = { $count ->
+    [0]     { $type }
+    [one]   { $type } with one address, use left arrow key to focus on it.
+    *[other] { $type } with { $count } addresses, use left arrow key to focus on them.
+}
+
+#   $email (String) - the email address
+#   $count (Number) - the number of address pills currently present in the addressing row
+pill-aria-label = { $count ->
+    [one]   { $email }: press Enter to edit, Delete to remove.
+    *[other] { $email }, 1 of { $count }: press Enter to edit, Delete to remove.
 }
 
 pill-action-edit =
     .label = Edit Address
     .accesskey = e
 
 pill-action-move-to =
     .label = Move to To
--- a/mail/test/browser/composition/browser_replyAddresses.js
+++ b/mail/test/browser/composition/browser_replyAddresses.js
@@ -148,25 +148,31 @@ function checkToAddresses(replyWinContro
     let addrTextbox = row.querySelector(
       `input[is="autocomplete-input"][recipienttype]`
     );
     let ariaLabel = addrTextbox.getAttribute("aria-label");
     let pillCount = row.querySelectorAll("mail-address-pill").length;
 
     switch (pillCount) {
       case 0:
-        Assert.equal(ariaLabel, "Empty " + addrLabel + " input field");
+        Assert.equal(ariaLabel, addrLabel);
         break;
       case 1:
-        Assert.equal(ariaLabel, addrLabel + " input field with one address");
+        Assert.equal(
+          ariaLabel,
+          addrLabel + " with one address, use left arrow key to focus on it."
+        );
         break;
       default:
         Assert.equal(
           ariaLabel,
-          addrLabel + " input field with " + pillCount + " addresses"
+          addrLabel +
+            " with " +
+            pillCount +
+            " addresses, use left arrow key to focus on them."
         );
         break;
     }
   }
 }
 
 /**
  * Helper to set an auto-Cc list for an identity.