Bug 1055355 - Make recipients field accessible.

apps/sms/index.html

@@ -152,7 +152,8 @@ <h1 id="messages-header-text" aria-hidden="true"></h1>
             only scroll far enough to bring the cursor into view). A container
             element is necessary to consistently render this vertical space
             (instead realized with CSS `margin-bottom`). -->
-            <div id="messages-recipients-list-container" class="bb-editable">
+            <div id="messages-recipients-list-container" class="bb-editable"
+                 role="group" aria-labelledby="to-label">
               <section id="messages-recipients-list" class="singleline">
               </section>
             </div>
@@ -483,7 +484,7 @@ <h1 class="message-subject">
     <div id="messages-recipient-tmpl" class="hide">
       <!--
       <span class="${className}" x-inputmode="verbatim"
-        contenteditable="${editable}"
+        contenteditable="${editable}" role="${role}"
         data-number="${number}" data-source="${source}" data-name="${name}"
         data-carrier="${carrier}" data-type="${type}">
         ${name}

apps/sms/js/recipients.js

@@ -24,6 +24,7 @@
     this.number = (opts.number || '') + '';
     this.email = opts.email || '';
     this.editable = opts.editable || 'true';
+    this.role = this.editable ? 'textbox' : 'button';
     this.source = opts.source || 'manual';
     this.type = opts.type || '';
     this.carrier = opts.carrier || '';
@@ -544,12 +545,14 @@
       // in the recipients list.
       node.isPlaceholder = false;
       node.contentEditable = false;
+      node.setAttribute('role', 'button');
 
       // The last node should be contentEditable=true
       // and isPlaceholder=true
       if (i === nodes.length - 1) {
         node.isPlaceholder = true;
         node.contentEditable = true;
+        node.setAttribute('role', 'textbox');
       } else {
         // Map the node to it's entry in the list
         // (only for actual recipient nodes)
@@ -1015,6 +1018,7 @@
           number: typed,
           editable: editable,
           source: 'manual',
+          role: editable ? 'textbox' : 'button',
           isLookupable: isLookupable
         });
 
@@ -1032,6 +1036,7 @@
     if (isEdittingRecipient) {
       // Make the last added entry "editable"
       target.contentEditable = true;
+      target.setAttribute('role', 'textbox');
       target.isPlaceholder = true;
       this.focus(target);
     }

apps/sms/style/sms.css

@@ -612,6 +612,9 @@ section[role="region"].new #messages-to-field.multiline {
   box-sizing: border-box;
   min-height: 4rem;
   padding: 0 0.6rem 0.6rem 0;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
 }
 
 /*
@@ -639,41 +642,52 @@ Do not remove.
   * discussion of this behavior, see "Bug 905260 - [messages] padding issues
   * in the recipient panel". */
   margin: 0.6rem 0.6rem 0 0;
-  max-width: calc(100% - 2rem);
   padding-right: 1.6rem;
 
   display: block;
   float: left;
+
+   /* override BB [role="button"] selector (bug 1055363) */
+  height: auto;
+  width: auto;
 }
 
 .recipient[contenteditable].email {
   padding-right: 3.8rem;
   background: white url(images/icons/icon_sms_compose_email.png) calc(100% - 1.5rem) center no-repeat;
 }
 
-/* Disable padding and margin on empty contenteditable recipients when they do
- * not have focus. This allows the Recipients List to intelligently collapse
- * when the final row contains no "assimilated" (i.e. non-contenteditable)
- * recipients. */
-.recipient[contenteditable=true]:empty {
-  margin: 0;
-  padding: 0;
+#messages-recipients-list > .recipient[contenteditable=true] {
+  flex-grow: 1;
+  height: 2.8rem;
+  line-height: 2.8rem;
+  border-radius: 0;
 
   word-wrap: unset;
+
+  /* Building blocks override (bug xxx) */
   background: none;
+  color: #000;
 }
 
-.recipient[contenteditable=true]:focus,
-.recipient[contenteditable=true]:empty:focus {
-  margin: 0.6rem 0.5rem 0 0;
-  padding: 0 0.3rem 0 0;
+.recipient[contenteditable=true]:empty:not(:last-of-type) {
+  display: none;
+}
 
-  height: 2.8rem;
-  line-height: 2.8rem;
-  border-radius: 0;
+/* Disable padding and give negative margin-right on empty contenteditable
+ * recipients when they do not have focus. This allows the Recipients List
+ * to intelligently collapse when the final row contains no "assimilated"
+ * (i.e. non-contenteditable) recipients. */
+.recipient[contenteditable=true]:empty {
+  margin-right: -0.5rem;
+  padding: 0;
+}
 
-  word-wrap: unset;
-  background: none;
+.recipient[contenteditable=true]:focus,
+.recipient[contenteditable=true]:hover,
+.recipient[contenteditable=true]:empty:focus {
+  margin-right: 0.5rem;
+  padding-right: 0.3rem;
 }
 
 #messages-recipient-suggestions {

apps/sms/test/unit/recipients_test.js

@@ -78,6 +78,7 @@ suite('Recipients', function() {
       source: 'none',
       // Mapped to node attr, not true boolean
       editable: 'true',
+      role: 'textbox',
 
       // Disambiguation 'display' attributes
       type: 'Type',
@@ -96,6 +97,7 @@ suite('Recipients', function() {
       source: 'none',
       // Mapped to node attr, not true boolean
       editable: 'true',
+      role: 'textbox',
 
       // Disambiguation 'display' attributes
       type: 'Type',
@@ -387,7 +389,8 @@ suite('Recipients', function() {
     var is = {
       corresponding: function(recipient, avatar, value) {
         return is.recipient(recipient, value) &&
-          is.avatar(avatar, value);
+          is.avatar(avatar, value) &&
+          is.button(avatar);
       },
       recipient: function(candidate, value) {
         return (candidate.name === value || candidate.number === value);
@@ -399,7 +402,8 @@ suite('Recipients', function() {
       placeholder: function(candidate, opts) {
         opts = opts || { isEmpty: true };
         return candidate.isPlaceholder &&
-          ((opts.isEmpty && candidate.textContent.trim() === '') || true);
+          ((opts.isEmpty && candidate.textContent.trim() === '') || true) &&
+          is.textbox(candidate);
       },
       editable: function(candidate) {
         return candidate.contentEditable === false;
@@ -409,6 +413,12 @@ suite('Recipients', function() {
       },
       wide: function(elem) {
         return elem.offsetWidth > 0;
+      },
+      button: function(elem) {
+        return elem.getAttribute('role') === 'button';
+      },
+      textbox: function(elem) {
+        return elem.getAttribute('role') === 'textbox';
       }
     };