Merge pull request #23348 from yzen/bug-1030346

Bug 1030346 - several improvements to Contacts accessibility.

apps/communications/contacts/elements/details.html

@@ -2,28 +2,28 @@
   <template>
     <gaia-header id='details-view-header' action="back">
       <h1 id='contact-name-title'></h1>
-      <button id="edit-contact-button" role="menuitem" data-icon="edit-contact" data-l10n-id="edit"></button>
+      <button id="edit-contact-button" data-icon="edit-contact" data-l10n-id="editButton"></button>
     </gaia-header>
 
     <article id="contact-detail-wrapper" class="view-body">
       <div id="cover-img"></div>
         <section id="contact-detail" class="view-body-inner">
-          <li data-phone id='phone-details-template-#i#' data-template>
+          <li data-phone id='phone-details-template-#i#' data-template role="region" aria-label="Phone" data-l10n-id="phoneDetail">
             <h2 data-l10n-id="#type_l10n_id#">#type# <span class="carrier">#carrier#</span></h2>
             <div class="item">
-              <div class="item-media pull-right">
-                <button id="send-sms-button-#i#" class="activity send-sms icon icon-message" data-l10n-id="send-sms-button" aria-label="SMS"></button>
-              </div>
               <div class="item-body-exp">
                 <button class="activity call-action icon icon-call" id="call-or-pick-#i#">
-                  <b>#value#</b>
+                  <b aria-label="Call" data-l10n-id="makeCall">#value#</b>
                   <span class="js-sim-indication"></span>
                 </button>
               </div>
+              <div class="item-media pull-right">
+                <button id="send-sms-button-#i#" class="activity send-sms icon icon-message" data-l10n-id="send-sms-button" aria-label="SMS"></button>
+              </div>
             </div>
           </li>
 
-          <li data-social class="social-actions" id="social-template-#i#" data-template>
+          <li data-social class="social-actions" id="social-template-#i#" data-template role="region">
             <h2 data-l10n-id="social-network" id="social-label">Social Network</h2>
               <div class="fillflow-twocols">
                 <button id="msg_button" data-l10n-id="msg-send" class="activity icon icon-message">
@@ -43,14 +43,14 @@ <h2 data-l10n-id="social-network" id="social-label">Social Network</h2>
               </button>
           </li>
 
-          <li class="duplicate-actions" id="duplicate-contacts-template" data-template>
+          <li class="duplicate-actions" id="duplicate-contacts-template" data-template role="region">
             <h2 data-l10n-id="organise-contacts">Organize Contacts</h2>
             <button id="find-merge-button" data-l10n-id="find-merge-contacts" class="activity icon icon-find-and-merge">
               Find duplicate contacts
             </button>
           </li>
 
-          <li data-address id='address-details-template-#i#' data-template>
+          <li data-address id='address-details-template-#i#' data-template role="region" aria-label="Address" data-l10n-id="addressDetail">
             <h2 data-l10n-id="#type_l10n_id#">#type#</h2>
             <div class="item">
               <div class="item-body-exp">
@@ -66,29 +66,29 @@ <h2 data-l10n-id="#type_l10n_id#">#type#</h2>
             </div>
           </li>
 
-          <li data-mail id='email-details-template-#i#' data-template>
+          <li data-mail id='email-details-template-#i#' data-template role="region" aria-label="Email" data-l10n-id="emailDetail">
             <h2 data-l10n-id="#type_l10n_id#">#type#</h2>
             <div class="item">
               <div class="item-body-exp">
                 <button id="email-or-pick-#i#" class="activity icon icon-email">
-                  <b>#value#</b>
+                  <b aria-label="Email" data-l10n-id="composeEmail">#value#</b>
                 </button>
               </div>
             </div>
           </li>
 
-          <li id="dates-template-#i#" data-template>
+          <li id="dates-template-#i#" data-template role="region" aria-label="Date" data-l10n-id="dateDetail">
             <h2>#type#</h2>
             <p><strong>#date#</strong></p>
           </li>
 
           <p data-comment id='note-details-template-#i#' data-template class="comment-notes">#note#</p>
           <div id='contact-detail-inner'>
             <h1 id='org-title'></h1>
-            <ul id='details-list'>
+            <ul id='details-list' role="presentation">
             </ul>
-            <ul>
-              <li>
+            <ul role="presentation">
+              <li role="presentation">
                 <button id='toggle-favorite' class="fillflow-row icon icon-fav">
                   Add as favorite
                 </button>

apps/communications/contacts/elements/form.html

@@ -2,15 +2,15 @@
   <template>
     <gaia-header id="contact-form-header" action="close">
       <h1 id='contact-form-title' data-l10n-id="addContact">Add contact</h1>
-      <button id="save-button" role="menuitem" data-l10n-id="done">Done</button>
+      <button id="save-button" data-l10n-id="done">Done</button>
     </gaia-header>
     <progress id="throbber" value="0" max="100" class="pack-activity hide"></progress>
 
-    <div id='add-phone-#i#' data-template class='phone-template field-template' data-index="#i#">
+    <div id='add-phone-#i#' role="listitem" data-template class='phone-template field-template' data-index="#i#">
       <fieldset class="fillflow-row">
         <div class="two_fields">
-          <legend class="action" role="combobox" aria-autocomplete="list" aria-haspopup="true">
-            <span data-taglist="phone-type" name="tel" data-value="#type_value#"
+          <legend class="action" role="combobox" aria-haspopup="true" aria-labelledby="tel_type_#i#">
+            <span aria-hidden="true" data-taglist="phone-type" name="tel" data-value="#type_value#"
               id="tel_type_#i#" data-field="type" data-l10n-id="#type_l10n_id#">
               #type#
             </span>
@@ -29,10 +29,10 @@ <h1 id='contact-form-title' data-l10n-id="addContact">Add contact</h1>
       </fieldset>
     </div>
 
-    <div id='add-email-#i#' data-template class='email-template field-template' data-index="#i#">
+    <div id='add-email-#i#' role="listitem" data-template class='email-template field-template' data-index="#i#">
       <fieldset class="fillflow-row">
-        <legend class="action" role="combobox" aria-autocomplete="list" aria-haspopup="true">
-          <span data-taglist="email-type" name="email[#i#][type]" data-value="#type_value#" id="email_type_#i#" data-field="type" data-l10n-id="#type_l10n_id#">#type#</span>
+        <legend class="action" role="combobox" aria-haspopup="true" aria-labelledby="email_type_#i#">
+          <span aria-hidden="true" data-taglist="email-type" name="email[#i#][type]" data-value="#type_value#" id="email_type_#i#" data-field="type" data-l10n-id="#type_l10n_id#">#type#</span>
         </legend>
         <section>
           <p class="setbox-item">
@@ -43,16 +43,16 @@ <h1 id='contact-form-title' data-l10n-id="addContact">Add contact</h1>
       </fieldset>
     </div>
 
-    <div id='add-address-#i#' data-template class='address-template field-template' data-index="#i#">
+    <div id='add-address-#i#' role="listitem" data-template class='address-template field-template' data-index="#i#">
       <fieldset class="fillflow-row">
         <section>
           <p class="setbox-item">
             <input placeholder="Street" data-field="streetAddress" data-l10n-id="streetAddress" name="adr[#i#][streetAddress]" class="textfield" type="text" x-inputmode="latin-prose" value="#streetAddress#" id="streetAddress_#i#" dir="auto">
             <button type="reset">Clear</button>
           </p>
           <div class="two_fields">
-            <legend class="action" role="combobox" aria-autocomplete="list" aria-haspopup="true">
-              <span data-taglist="address-type" name="adr[#i#][type]" data-value="#type_value#" id="address_type_#i#" data-field="type" data-l10n-id="#type_l10n_id#">#type#</span>
+            <legend class="action" role="combobox" aria-haspopup="true" aria-labelledby="address_type_#i#">
+              <span aria-hidden="true" data-taglist="address-type" name="adr[#i#][type]" data-value="#type_value#" id="address_type_#i#" data-field="type" data-l10n-id="#type_l10n_id#">#type#</span>
             </legend>
             <p class="setbox-item">
               <input placeholder="City" data-field="locality" data-l10n-id="locality" name="adr[#i#][locality]" class="textfield" type="text" x-inputmode="latin-prose" value="#locality#" id="locality_#i#" dir="auto">
@@ -73,26 +73,26 @@ <h1 id='contact-form-title' data-l10n-id="addContact">Add contact</h1>
       </fieldset>
     </div>
 
-    <div id='add-date-#i#' data-template class='date-template field-template' data-exclusive="true" data-custom="false" data-index="#i#">
+    <div id='add-date-#i#' role="listitem" data-template class='date-template field-template' data-exclusive="true" data-custom="false" data-index="#i#">
       <fieldset class="fillflow-row">
         <div class="two_fields">
-          <legend class="action" role="combobox" aria-autocomplete="list" aria-haspopup="true">
-            <span data-taglist="date-type" name="date[#i#][type]" data-value="#type_value#" id="date_type_#i#" data-field="type" data-l10n-id="#type_l10n_id#">#type#</span>
+          <legend class="action" role="combobox" aria-haspopup="true" aria-labelledby="date_type_#i#">
+            <span aria-hidden="true" data-taglist="date-type" name="date[#i#][type]" data-value="#type_value#" id="date_type_#i#" data-field="type" data-l10n-id="#type_l10n_id#">#type#</span>
           </legend>
           <section>
             <p class="setbox-item">
-              <span id="date-text_#i#" class="datetime placeholder">
+              <span aria-hidden="true" id="date-text_#i#" class="datetime placeholder">
                 Date
               </span>
-              <input placeholder="date" data-l10n-id="date" name="date[#i#][value]" type="date" id="date_#i#">
+              <input placeholder="date" data-l10n-id="date" name="date[#i#][value]" type="date" id="date_#i#" aria-labelledby="date-text_#i#">
             </p>
           </section>
         </div>
       </fieldset>
     </div>
 
-    <div id='add-note-#i#' data-template class='note-template field-template' data-index="#i#">
-      <dl class="setbox fillflow-row">
+    <div id='add-note-#i#' role="listitem" data-template class='note-template field-template' data-index="#i#">
+      <dl role="presentation" class="setbox fillflow-row">
         <dd class="setbox-body">
           <p class="setbox-item">
            <input placeholder="Comment" data-l10n-id="comment" name="comment[#i#]" class="textfield" type="text" x-inputmode="latin-prose" value="#note#" id="note_#i#" dir="auto">
@@ -108,7 +108,7 @@ <h1 id='contact-form-title' data-l10n-id="addContact">Add contact</h1>
         <form id="contact-form" action="#" class="fill-flow">
           <input name="id" id="contact-form-id" type="hidden" value="">
           <section class="item first">
-            <div aria-label="Photo" data-l10n-id="legendPhoto" role="group" id="thumbnail-action" href="#" class="item-media fillflow-media">
+            <div id="thumbnail-action" href="#" class="item-media fillflow-media">
               <div role="button" id="photo-button">
                 <p>
                   <span class="icon icon-addimage"></span>
@@ -138,49 +138,49 @@ <h1 id='contact-form-title' data-l10n-id="addContact">Add contact</h1>
             </div>
           </section>
 
-          <ul>
-            <li>
+          <ul role="presentation">
+            <li role="region" aria-label="Phones" data-l10n-id="phones">
               <section>
-                <div id="contacts-form-phones"></div>
+                <div id="contacts-form-phones" role="list"></div>
               </section>
               <button data-field-type="tel" id='add-new-phone' data-l10n-id="addPhone" class="fillflow-row action action-add icon icon-add">
                 Add phone number
               </button>
             </li>
 
-            <li>
+            <li role="region" aria-label="Emails" data-l10n-id="emails">
               <section>
-                <div id="contacts-form-emails"></div>
+                <div id="contacts-form-emails" role="list"></div>
               </section>
 
               <button data-field-type="email" id='add-new-email' data-l10n-id="addEmail" class="fillflow-row action action-add icon icon-add">
                 Add email address
               </button>
             </li>
 
-            <li>
+            <li role="region" aria-label="Addresses" data-l10n-id="addresses">
               <section>
-                <div id="contacts-form-addresses"></div>
+                <div id="contacts-form-addresses" role="list"></div>
               </section>
 
               <button data-field-type="adr" id='add-new-address' data-l10n-id="addAddress" class="fillflow-row action action-add icon icon-add">
                 Add new address
               </button>
             </li>
 
-            <li>
+            <li role="region" aria-label="Dates" data-l10n-id="dates">
               <section>
-                <div id="contacts-form-dates"></div>
+                <div id="contacts-form-dates" role="list"></div>
               </section>
 
               <button data-field-type="date" id='add-new-date' data-l10n-id="addDate" class="fillflow-row action action-add icon icon-add">
                 Add Date
               </button>
             </li>
 
-            <li>
+            <li role="region" aria-label="Notes" data-l10n-id="notes">
               <section>
-                <div id="contacts-form-notes"></div>
+                <div id="contacts-form-notes" role="list"></div>
               </section>
 
               <button data-field-type="note" id='add-new-note' data-l10n-id="addComment" class="fillflow-row action action-add icon icon-add">

apps/communications/contacts/elements/search.html

@@ -1,18 +1,18 @@
 <element name="search-view" extends="section">
   <template>
     <form id="searchview-container" class="search" role="search">
-      <button id="cancel-search" data-l10n-id="cancel" type="submit">Cancel</button>
       <p>
-        <label for="search-contact">
+        <label role="presentation">
           <input type="search" name="search" class="textfield" x-inputmode="verbatim"
                  id="search-contact" placeholder="Search" data-l10n-id="search-contact">
           <button type="reset">Clear</button>
         </label>
       </p>
+      <button id="cancel-search" data-l10n-id="cancel" type="submit">Cancel</button>
     </form>
 
     <section id="groups-list-search">
-      <ol id="search-list" data-type="list" class="active">
+      <ol id="search-list" data-type="list" class="active" role="listbox">
       </ol>
     </section>