Bug 1611793 - Add role="button" attribute to the recipient labels to show screen readers the correct function. r=aleca DONTBUILD
authorRichard Marti <richard.marti@gmail.com>
Tue, 04 Feb 2020 22:41:52 +0100
changeset 37188 8e4805dafb1a1a680864ed8eb42dc43fbd43351e
parent 37187 26bc58b449520c4b92ded793cf93575aee0f6925
child 37189 27929debc910a87a9fbb790b3d73c8bbbb65b62d
push id2552
push userclokep@gmail.com
push dateMon, 10 Feb 2020 21:24:16 +0000
treeherdercomm-beta@f95a6f4408a3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersaleca
bugs1611793
Bug 1611793 - Add role="button" attribute to the recipient labels to show screen readers the correct function. r=aleca DONTBUILD
mail/base/content/mailWidgets.js
mail/components/compose/content/MsgComposeCommands.js
mail/components/compose/content/messengercompose.xhtml
--- a/mail/base/content/mailWidgets.js
+++ b/mail/base/content/mailWidgets.js
@@ -2091,16 +2091,17 @@
       let labelId =
         recipient.type == "addr_other" ? recipient.labelId : recipient.type;
       firstLabel.addEventListener("click", () => {
         hideAddressRow(firstLabel, labelId);
       });
       firstLabel.addEventListener("keypress", event => {
         closeLabelKeyPress(event, firstLabel, labelId);
       });
+      firstLabel.setAttribute("role", "button");
       // Necessary to allow focus via TAB key.
       firstLabel.setAttribute("tabindex", 0);
 
       let closeImage = document.createXULElement("image");
       closeImage.classList.add("close-icon");
 
       firstLabel.appendChild(closeImage);
       firstCol.appendChild(firstLabel);
--- a/mail/components/compose/content/MsgComposeCommands.js
+++ b/mail/components/compose/content/MsgComposeCommands.js
@@ -3524,16 +3524,17 @@ function SetDocumentCharacterSet(aCharse
  *
  * @param {string} labelID - The unique identifier of the email header.
  * @returns {XULelement} The newly create XUL label.
  */
 function createRecipientLabel(labelID) {
   let label = document.createXULElement("label");
   label.setAttribute("id", labelID);
   label.setAttribute("value", labelID);
+  label.setAttribute("role", "button");
 
   label.addEventListener("click", () => {
     showAddressRow(label, `addressRow${labelID}`);
   });
   label.addEventListener("keypress", event => {
     showAddressRowKeyPress(event, label, `addressRow${labelID}`);
   });
   label.setAttribute("control", `${labelID}AddrInput`);
--- a/mail/components/compose/content/messengercompose.xhtml
+++ b/mail/components/compose/content/messengercompose.xhtml
@@ -589,25 +589,25 @@
                  label-selection-ZA="&sortAttachmentsPanelBtn.SortSelection.ZA.label;"
                  key="key_sortAttachmentsToggle"
                  command="cmd_sortAttachmentsToggle"/>
 </panel>
 
 <panel id="extraRecipientsPanel" type="arrow" orient="vertical"
        onkeypress="if (event.key == 'Enter') { this.hidePopup(); }"
        onclick="this.hidePopup();">
-  <label id="addr_reply" value="&replyAddr2.label;"
+  <label id="addr_reply" value="&replyAddr2.label;" role="button"
          onclick="showAddressRow(this, 'addressRowReply')"
          onkeypress="showAddressRowKeyPress(event, this, 'addressRowReply')"
          control="replyAddrInput" class="recipient-label"/>
-  <label id="addr_newsgroups" value="&newsgroupsAddr2.label;"
+  <label id="addr_newsgroups" value="&newsgroupsAddr2.label;" role="button"
          onclick="showAddressRow(this, 'addressRowNewsgroups')"
          onkeypress="showAddressRowKeyPress(event, this, 'addressRowNewsgroups')"
          control="newsgroupsAddrInput" class="news-label news-primary-label recipient-label"/>
-  <label id="addr_followup" value="&followupAddr2.label;"
+  <label id="addr_followup" value="&followupAddr2.label;" role="button"
          onclick="showAddressRow(this, 'addressRowFollowup')"
          onkeypress="showAddressRowKeyPress(event, this, 'addressRowFollowup')"
          control="followupAddrInput" class="news-label recipient-label"/>
 </panel>
 
 <menupopup id="msgComposeContext"
            onpopupshowing="if (event.target != this) { return true; } openEditorContextMenu(this);">
 
@@ -2026,47 +2026,47 @@
                       disableautoselect="true" onkeypress="fromKeyPress(event);"
                       oncommand="LoadIdentity(false);" disableonsend="true">
               <menupopup id="msgIdentityPopup"/>
             </menulist>
 
             <hbox class="addressingWidgetItem">
               <hbox id="addressingWidgetLabels" class="address-extra-recipients"
                     flex="1" align="center">
-                <label id="addr_to" value="&toAddr2.label;"
+                <label id="addr_to" value="&toAddr2.label;" role="button"
                        onclick="showAddressRow(this, 'addressRowTo')"
                        onkeypress="showAddressRowKeyPress(event, this, 'addressRowTo')"
                        control="toAddrInput" class="mail-primary-label mail-label recipient-label"
                        collapsed="true"/>
-                <label id="addr_cc" value="&ccAddr2.label;"
+                <label id="addr_cc" value="&ccAddr2.label;" role="button"
                        onclick="showAddressRow(this, 'addressRowCc')"
                        onkeypress="showAddressRowKeyPress(event, this, 'addressRowCc')"
                        control="ccAddrInput" class="mail-label recipient-label"/>
-                <label id="addr_bcc" value="&bccAddr2.label;"
+                <label id="addr_bcc" value="&bccAddr2.label;" role="button"
                        onclick="showAddressRow(this, 'addressRowBcc')"
                        onkeypress="showAddressRowKeyPress(event, this, 'addressRowBcc')"
                        control="bccAddrInput" class="mail-label recipient-label"/>
 
-                <label id="extraRecipientsLabel"
+                <label id="extraRecipientsLabel" role="button"
                        onclick="showExtraRecipients(event);"
                        tooltiptext="&extraRecipients.tooltip;"
                        class="extra-recipients-label"
                        onkeypress="if (event.key == 'Enter') { showExtraRecipients(event); }">
                     <image class="overflow-icon"/>
                 </label>
 
               </hbox>
             </hbox>
           </hbox>
 
           <mail-recipients-area id="recipientsContainer" orient="vertical"
                                 class="recipients-container" flex="1">
             <hbox id="addressRowTo" class="addressingWidgetItem address-row">
               <hbox class="aw-firstColBox" align="top">
-                <label onclick="hideAddressRow(this, 'addr_to');"
+                <label role="button" onclick="hideAddressRow(this, 'addr_to');"
                        onkeypress="closeLabelKeyPress(event, this, 'addr_to');"
                        collapsed="true">
                   <image class="close-icon"/>
                 </label>
               </hbox>
               <hbox class="address-label-container" align="top" pack="end"
                     style="&headersSpace2.style;">
                 <label id="toAddrLabel" value="&toAddr2.label;"
@@ -2094,17 +2094,17 @@
                             onkeypress="recipientKeyPress(event, this);"
                             recipienttype="addr_to"
                             size="1"/>
               </hbox>
             </hbox>
 
             <hbox id="addressRowCc" class="addressingWidgetItem address-row hidden">
               <hbox class="aw-firstColBox" align="top">
-                <label onclick="hideAddressRow(this, 'addr_cc');"
+                <label role="button" onclick="hideAddressRow(this, 'addr_cc');"
                        onkeypress="closeLabelKeyPress(event, this, 'addr_cc');">
                   <image class="close-icon"/>
                 </label>
               </hbox>
               <hbox class="address-label-container" align="top" pack="end"
                     style="&headersSpace2.style;">
                 <label id="ccAddrLabel" value="&ccAddr2.label;"
                        control="ccAddrInput"/>
@@ -2131,17 +2131,17 @@
                             onkeypress="recipientKeyPress(event, this);"
                             recipienttype="addr_cc"
                             size="1"/>
               </hbox>
             </hbox>
 
             <hbox id="addressRowBcc" class="addressingWidgetItem address-row hidden">
               <hbox class="aw-firstColBox" align="top">
-                <label onclick="hideAddressRow(this, 'addr_bcc');"
+                <label role="button" onclick="hideAddressRow(this, 'addr_bcc');"
                        onkeypress="closeLabelKeyPress(event, this, 'addr_bcc');">
                   <image class="close-icon"/>
                 </label>
               </hbox>
               <hbox class="address-label-container" align="top" pack="end"
                     style="&headersSpace2.style;">
                 <label id="bccAddrLabel" value="&bccAddr2.label;"
                        control="bccAddrInput"/>
@@ -2168,17 +2168,17 @@
                             onkeypress="recipientKeyPress(event, this);"
                             recipienttype="addr_bcc"
                             size="1"/>
               </hbox>
             </hbox>
 
             <hbox id="addressRowReply" class="addressingWidgetItem address-row hidden">
               <hbox class="aw-firstColBox" align="top">
-                <label onclick="hideAddressRow(this, 'addr_reply');"
+                <label role="button" onclick="hideAddressRow(this, 'addr_reply');"
                        onkeypress="closeLabelKeyPress(event, this, 'addr_reply');">
                   <image class="close-icon"/>
                 </label>
               </hbox>
               <hbox class="address-label-container" align="top" pack="end"
                     style="&headersSpace2.style;">
                 <label id="replyAddrLabel" value="&replyAddr2.label;"
                        control="replyAddrInput"/>
@@ -2205,17 +2205,17 @@
                             onkeypress="recipientKeyPress(event, this);"
                             recipienttype="addr_reply"
                             size="1"/>
               </hbox>
             </hbox>
 
             <hbox id="addressRowNewsgroups" class="addressingWidgetItem address-row hidden">
               <hbox class="aw-firstColBox" align="top">
-                <label onclick="hideAddressRow(this, 'addr_newsgroups');"
+                <label role="button" onclick="hideAddressRow(this, 'addr_newsgroups');"
                        onkeypress="closeLabelKeyPress(event, this, 'addr_newsgroups');">
                   <image class="close-icon"/>
                 </label>
               </hbox>
               <hbox class="address-label-container" align="top" pack="end"
                     style="&headersSpace2.style;">
                 <label id="newsgroupsAddrLabel" value="&newsgroupsAddr2.label;"
                        control="newsgroupsAddrInput"/>
@@ -2242,17 +2242,17 @@
                             onkeypress="recipientKeyPress(event, this);"
                             recipienttype="addr_newsgroups"
                             size="1"/>
               </hbox>
             </hbox>
 
             <hbox id="addressRowFollowup" class="addressingWidgetItem address-row hidden">
               <hbox class="aw-firstColBox" align="top">
-                <label onclick="hideAddressRow(this, 'addr_followup');"
+                <label role="button" onclick="hideAddressRow(this, 'addr_followup');"
                        onkeypress="closeLabelKeyPress(event, this, 'addr_followup');">
                   <image class="close-icon"/>
                 </label>
               </hbox>
               <hbox class="address-label-container" align="top" pack="end"
                     style="&headersSpace2.style;">
                 <label id="followupAddrLabel" value="&followupAddr2.label;"
                        control="followupAddrInput"/>