Bug 1068712 - email app: improved accessibility of the compose screen.

apps/email/js/cards/cmp/attachment_item.html

@@ -1,8 +1,9 @@
 <li class="cmp-attachment-item">
-  <span class="cmp-attachment-icon"></span>
+  <span class="cmp-attachment-icon" role="presentation"></span>
   <span class="cmp-attachment-fileinfo">
     <span dir="auto" class="cmp-attachment-filename"></span>
     <span class="cmp-attachment-filesize"></span>
   </span>
-  <span class="cmp-attachment-remove"></span>
+  <span class="cmp-attachment-remove" role="button"
+        data-l10n-id="compose-attachment-remove"></span>
 </li>

apps/email/js/cards/cmp/peep_bubble.html

@@ -1,4 +1,4 @@
-<div class="cmp-peep-bubble peep-bubble" dir="auto">
+<div class="cmp-peep-bubble peep-bubble" dir="auto" role="button">
   <span class="cmp-peep-name"></span>
   <span class="cmp-peep-address collapsed"></span>
 </div>

apps/email/js/cards/compose.html

@@ -1,15 +1,16 @@
 <section class="cmp-compose-header" role="region" data-statuscolor="default">
   <header data-prop="headerNode">
-    <a data-event="click:onBack" href="#" class="cmp-back-btn">
+    <a role="button" data-event="click:onBack" href="#" class="cmp-back-btn"
+       data-l10n-id="back-button">
       <span class="icon icon-back">BacK</span>
     </a>
     <menu type="toolbar">
-      <a href="#" data-event="click:onAttachmentAdd"
-         class="cmp-attachment-btn">
+      <a role="button" href="#" data-event="click:onAttachmentAdd"
+         class="cmp-attachment-btn" data-l10n-id="compose-attachment-button">
         <span class="icon icon-attachment">AttachmenT</span>
       </a>
-      <a data-prop="sendButton" data-event="click:onSend"
-         href="#" class="cmp-send-btn">
+      <a role="button" data-prop="sendButton" data-event="click:onSend"
+         href="#" class="cmp-send-btn" data-l10n-id="compose-send-button">
       <span class="icon icon-send">SenD</span>
       </a>
     </menu>
@@ -21,9 +22,10 @@
   <div data-prop="addrBar" class="cmp-envelope-bar">
     <div class="cmp-addr-bar">
       <div data-event="click:onContainerClick"
-           class="cmp-envelope-line cmp-combo">
+           class="cmp-envelope-line cmp-combo"
+           role="group" data-l10n-id="to-group">
         <span class="cmp-to-label cmp-addr-label"
-               data-l10n-id="compose-to">tO:</span>
+              data-l10n-id="compose-to" aria-hidden="true">tO:</span>
         <div class="cmp-to-container cmp-addr-container">
           <div class="cmp-bubble-container">
               <input data-prop="toNode"
@@ -33,15 +35,18 @@
           </div>
         </div>
         <div data-event="click:onContactAdd"
-             class="cmp-to-add cmp-contact-add"></div>
+             class="cmp-to-add cmp-contact-add"
+             role="button"
+             data-l10n-id="compose-contact-add"></div>
       </div>
       <!-- XXX: spec calls for showing cc/bcc merged until selected,
            but there is also the case where replying itself might need
            to expand, so we are deferring that feature -->
       <div data-event="click:onContainerClick"
-           class="cmp-envelope-line cmp-combo">
+           class="cmp-envelope-line cmp-combo"
+           role="group" data-l10n-id="cc-group">
         <span class="cmp-cc-label cmp-addr-label"
-               data-l10n-id="compose-cc">cC:</span>
+               data-l10n-id="compose-cc" aria-hidden="true">cC:</span>
         <div class="cmp-cc-container cmp-addr-container">
           <div class="cmp-bubble-container">
             <input data-prop="ccNode"
@@ -51,12 +56,15 @@
           </div>
         </div>
         <div data-event="click:onContactAdd"
-             class="cmp-cc-add cmp-contact-add"></div>
+             class="cmp-cc-add cmp-contact-add"
+             role="button"
+             data-l10n-id="compose-contact-add"></div>
       </div>
       <div data-event="click:onContainerClick"
-           class="cmp-envelope-line cmp-combo">
+           class="cmp-envelope-line cmp-combo"
+           role="group" data-l10n-id="bcc-group">
         <span class="cmp-bcc-label cmp-addr-label"
-               data-l10n-id="compose-bcc">BcC:</span>
+               data-l10n-id="compose-bcc" aria-hidden="true">BcC:</span>
         <div class="cmp-bcc-container cmp-addr-container">
           <div class="cmp-bubble-container">
             <input data-prop="bccNode"
@@ -66,19 +74,22 @@
           </div>
         </div>
         <div data-event="click:onContactAdd"
-             class="cmp-bcc-add cmp-contact-add"></div>
+             class="cmp-bcc-add cmp-contact-add"
+             role="button"
+             data-l10n-id="compose-contact-add"></div>
       </div>
     </div>
     <div class="cmp-envelope-line cmp-subject">
       <span class="cmp-subject-label"
-             data-l10n-id="compose-subject">SubjecT:</span>
+            data-l10n-id="compose-subject" aria-hidden="true">SubjecT:</span>
       <input data-prop="subjectNode"
              dir="auto"
-             class="cmp-subject-text" type="text" />
+             class="cmp-subject-text" type="text" data-l10n-id="subject" />
     </div>
     <div data-prop="errorMessage" class="cmp-error-message collapsed"></div>
     <div data-prop="attachmentTotal"
-         class="cmp-envelope-line cmp-attachment-total collapsed">
+         class="cmp-envelope-line cmp-attachment-total collapsed"
+         aria-hidden="true">
       <span data-prop="attachmentLabel"
             class="cmp-attachment-label cmp-addr-label"
             data-l10n-id="compose-attachments[zero]">AttachmentS:</span>
@@ -87,10 +98,12 @@
     <ul data-prop="attachmentsContainer" class="cmp-attachment-container">
     </ul>
   </div>
-  <div data-prop="textBodyNode" class="cmp-body-text" contenteditable="true" role="textbox" aria-multiline="true"></div>
+  <div data-prop="textBodyNode" class="cmp-body-text" contenteditable="true" role="textbox" aria-multiline="true"
+       data-l10n-id="compose-text"></div>
   <div data-prop="htmlBodyContainer"
        data-event="click:_focusEditorWithCursorAtEnd"
        dir="auto"
-       class="cmp-body-html">
+       class="cmp-body-html"
+       data-l10n-id="message-body-container">
   </div>
 </div>

apps/email/js/cards/compose.js

@@ -674,15 +674,8 @@ return [
      * will update the UI as a side-effect; you do not need to do it.
      */
     addAttachmentsSubjectToSizeLimits: function(toAttach) {
-      var totalSize = 0;
       // Tally the size of the already-attached attachments.
-      if (this.composer.attachments) {
-        // Using a for loop to avoid any closures that may capture
-        // the large attachments.
-        for (var i = 0; i < this.composer.attachments.length; i++) {
-          totalSize += this.composer.attachments[i].blob.size;
-        }
-      }
+      var totalSize = this.calculateTotalAttachmentsSize();
 
       // Keep attaching until we find one that puts us over the limit.  Then
       // generate an error whose plurality is based on the number of attachments
@@ -749,6 +742,30 @@ return [
       else {
         this.attachmentsContainer.classList.add('collapsed');
       }
+      this.updateAttachmentsAriaLabel();
+    },
+
+    /**
+     * Update the label used for accessibility that describes the attachments
+     * included.
+     */
+    updateAttachmentsAriaLabel: function() {
+      // Only include total size in KB if there is more than 1 attachment.
+      var kilobytes = this.composer.attachments.length > 1 ?
+        Math.ceil(this.calculateTotalAttachmentsSize() / 1024) : 0;
+      mozL10n.setAttributes(this.attachmentsContainer,
+        'compose-attachments-container', { kilobytes: kilobytes });
+    },
+
+    /**
+     * Calculate the total size of all attachments included.
+     */
+    calculateTotalAttachmentsSize: function() {
+      var totalSize = 0;
+      for (var i = 0; i < this.composer.attachments.length; i++) {
+        totalSize += this.composer.attachments[i].blob.size;
+      }
+      return totalSize;
     },
 
     /**
@@ -767,12 +784,8 @@ return [
         this.attachmentsContainer.classList.add('collapsed');
       }
       else {
-        var totalSize = 0;
-        for (var i = 0; i < this.composer.attachments.length; i++) {
-          totalSize += this.composer.attachments[i].blob.size;
-        }
-
-        fileDisplay.fileSize(this.attachmentsSize, totalSize);
+        fileDisplay.fileSize(this.attachmentsSize,
+          this.calculateTotalAttachmentsSize());
       }
 
       // Only display the total size when the number of attachments is more
@@ -788,6 +801,7 @@ return [
       node.parentNode.removeChild(node);
       this.composer.removeAttachment(attachment);
 
+      this.updateAttachmentsAriaLabel();
       this.updateAttachmentsSize();
     },
 

apps/email/locales/email.en-US.properties

@@ -376,14 +376,69 @@ envelope-to=To
 envelope-cc=Cc
 envelope-bcc=Bcc
 
+# LOCALIZATION NOTE(message-body-container): For compose/read cards, a label for
+# a section with the pre-composed part of the message. The following string is
+# spoken by screen readers and not shown on the screen.
+message-body-container.ariaLabel=Message body
+
+# LOCALIZATION NOTE(subject): For compose card, a label for an email subject
+# text input or header. The following string is spoken by screen readers and not
+# shown on the screen.
+subject.ariaLabel=Subject
+
+# LOCALIZATION NOTE(to-group): For email compose/read cards, a label for a
+# section that has controls related to selecting 'to' recipients. The following
+# string is spoken by screen readers and not shown on the screen.
+to-group.ariaLabel=To
+# LOCALIZATION NOTE(cc-group): For email compose/read cards, a label for a
+# section that has controls related to selecting 'cc' recipients. The following
+# string is spoken by screen readers and not shown on the screen.
+cc-group.ariaLabel=cc
+# LOCALIZATION NOTE(bcc-group): For email compose/read cards, a label for a
+# section that has controls related to selecting 'bcc' recipients. The following
+# string is spoken by screen readers and not shown on the screen.
+bcc-group.ariaLabel=bcc
+
 compose-header=Compose message
 compose-header-short=Compose
 compose-send=Send
+# LOCALIZATION NOTE(compose-send-button): For compose card, a label for a send
+# button rendered as an arrow. The following string is spoken by screen readers
+# and not shown on the screen.
+compose-send-button.ariaLabel=Send
 
 compose-to=To
 compose-cc=cc
 compose-bcc=bcc
 
+# LOCALIZATION NOTE(compose-contact-add): For compose card, a label for an add
+# contact buttons rendered as a circled plus sign and used to add to, cc and bcc
+# recipients. The following string is spoken by screen readers and not shown on
+# the screen.
+compose-contact-add.ariaLabel=Add contact
+
+# LOCALIZATION NOTE(compose-attachments-container): For compose card, a
+# label for a list of attachments included in the email being composed. When
+# there is more than 1 attachment, it contains a total size in kilobytes of all
+# attachments. The following string is spoken by screen readers and not shown on
+# the screen.
+compose-attachments-container.ariaLabel={[ plural(kilobytes) ]}
+compose-attachments-container.ariaLabel[zero]=Attachments
+compose-attachments-container.ariaLabel[one]=Attachments: {{kilobytes}}K
+compose-attachments-container.ariaLabel[two]=Attachments: {{kilobytes}}K
+compose-attachments-container.ariaLabel[few]=Attachments: {{kilobytes}}K
+compose-attachments-container.ariaLabel[many]=Attachments: {{kilobytes}}K
+compose-attachments-container.ariaLabel[other]=Attachments: {{kilobytes}}K
+
+# LOCALIZATION NOTE(compose-attachment-remove): For compose card, a label for an
+# attachement remove button. The following string is spoken by screen readers
+# and not shown on the screen.
+compose-attachment-remove.ariaLabel=Remove
+
+# LOCALIZATION NOTE(compose-attachment-button): For compose card, a label for an
+# attachment button rendered as a clip. The following string is spoken by screen
+# readers and not shown on the screen.
+compose-attachment-button.ariaLabel=Attach
 compose-attachments={[ plural(n) ]}
 compose-attachments[zero]  = Attachments
 compose-attachments[one]   = {{ n }} attachment
@@ -392,6 +447,11 @@ compose-attachments[few]   = {{ n }} attachments
 compose-attachments[many]  = {{ n }} attachments
 compose-attachments[other] = {{ n }} attachments
 
+# LOCALIZATION NOTE(compose-text): For compose card, a label for a section with
+# a message text. The following string is spoken by screen readers and not shown
+# on the screen.
+compose-text.ariaLabel=Edit
+
 # Shown when user taps on attachment icon in compose, but the app still
 # needs a bit more time to finishing the add of the previous attachment.
 compose-attachment-still-working=One moment, still working on the previous attachment...

apps/email/style/compose_cards.css

@@ -22,6 +22,8 @@
 .cmp-bubble-container {
   width: calc(100% - 1rem);
   float: left;
+  display: inline-flex;
+  flex-wrap: wrap;
 }
 
 html:-moz-dir(rtl) .cmp-bubble-container {
@@ -31,18 +33,15 @@ html:-moz-dir(rtl) .cmp-bubble-container {
 /* Make sure these styles take precedence over the base msg-peep-bubble styles
    by using both class names */
 .cmp-peep-bubble.msg-peep-bubble {
-  float: left;
   margin: 0.3rem 0.6rem;
   border: 0;
   border-radius: 1.4rem;
   font-size: 1.6rem;
   font-style: italic;
   color: #2c2c2c;
   background-color: white;
-}
-
-html:-moz-dir(rtl) .cmp-peep-bubble.msg-peep-bubble {
-  float: right;
+  flex-shrink: 0;
+  flex-grow: 0;
 }
 
 .cmp-peep-bubble.msg-peep-bubble:active {
@@ -75,21 +74,16 @@ input.cmp-addr-text, input.cmp-subject-text {
 }
 
 input.cmp-addr-text, input.cmp-dot-text {
-  float: left;
-  width: 0.5rem;
-  max-width: 100%;
+  flex-grow: 1;
+  flex-shrink: 1;
+  width: 0;
   text-overflow: ellipsis;
   overflow: hidden;
   word-wrap: normal;
   white-space: nowrap;
 }
 
-html:-moz-dir(rtl) input.cmp-addr-text, input.cmp-dot-text {
-  float: right;
-}
-
 input.cmp-subject-text {
-  display: table-cell;
   font-size: 1.6rem;
   text-overflow: ellipsis;
 }
@@ -250,6 +244,7 @@ html:-moz-dir(rtl) .cmp-attachment-filesize {
   background: url("images/icons/actionicon_email_removeattachment.png") no-repeat scroll center / 2rem;
   width: 2rem;
   border: 0.4rem solid transparent;
+  height: 100%;
 }
 
 .cmp-messages-sending p {