Merge pull request #21712 from eeejay/bug-1030340

Bug 1030340 - Make add image button and section accessible. r=sergi
mozilla-b2g · Jul 25, 2014 · fb4ee85 · fb4ee85
2 parents e95ac19 + b7acf12
commit fb4ee85
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 18 deletions.
diff --git a/apps/communications/contacts/elements/form.html b/apps/communications/contacts/elements/form.html
@@ -100,16 +100,18 @@ <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">
-            <a id="thumbnail-action" href="#" class="item-media fillflow-media">
-              <p>
-                <span class="icon icon-addimage"></span>
-                <em data-l10n-id="addPhoto"> Add photo</em>
-              </p>
-              <p class="edit-photo">
-                <em data-l10n-id="edit">Edit</em>
-              </p>
-              <img id="thumbnail-photo" alt="">
-            </a>
+            <div aria-label="Photo" data-l10n-id="legendPhoto" role="group" id="thumbnail-action" href="#" class="item-media fillflow-media">
+              <div role="button" id="photo-button">
+                <p>
+                  <span class="icon icon-addimage"></span>
+                  <em data-l10n-id="addPhoto"> Add photo</em>
+                </p>
+                <p class="edit-photo">
+                  <em data-l10n-id="edit">Edit</em>
+                </p>
+                <img id="thumbnail-photo" alt="">
+              </div>
+            </div>
             <div class="item-body-exp">
               <p class="fillflow-row">
                 <input placeholder="Name" data-l10n-id="givenName" name="givenName" class="textfield" type="text" x-inputmode="latin-prose" value="" id="givenName" dir="auto">

diff --git a/apps/communications/contacts/js/views/form.js b/apps/communications/contacts/js/views/form.js
@@ -93,8 +93,8 @@ contacts.Form = (function() {
   var initContainers = function cf_initContainers() {
     deleteContactButton = dom.querySelector('#delete-contact');
     thumb = dom.querySelector('#thumbnail-photo');
-    thumb.onclick = pickImage;
     thumbAction = dom.querySelector('#thumbnail-action');
+    thumbAction.querySelector('#photo-button').onclick = pickImage;
     saveButton = dom.querySelector('#save-button');
     addNewDateButton = dom.querySelector('#add-new-date');
     cancelButton = dom.querySelector('#cancel-edit');

diff --git a/apps/communications/contacts/locales/contacts.en-US.properties b/apps/communications/contacts/locales/contacts.en-US.properties
@@ -82,6 +82,7 @@ legendTitleMain  = Main information
 legendPhones     = Phone numbers
 legendEmail      = Email address
 legendAddress    = Address
+legendPhoto.ariaLabel = Photo
 settings         = Settings
 
 # search related

diff --git a/apps/communications/contacts/test/unit/mock_form_dom.js.html b/apps/communications/contacts/test/unit/mock_form_dom.js.html
@@ -110,13 +110,15 @@
     MockFormDom += '          <input name="id" id="contact-form-id" type="hidden" value="">';
     MockFormDom += '          <fieldset class="item first">';
     MockFormDom += '            <legend class="hide" data-l10n-id="legendTitleMain">Main information</legend>';
-    MockFormDom += '            <a id="thumbnail-action" href="#" class="item-media fillflow-media">';
-    MockFormDom += '              <p>';
-    MockFormDom += '                <span role="button" class="icon-addimage"></span>';
-    MockFormDom += '                <em data-l10n-id="addPhoto"> Add photo</em>';
-    MockFormDom += '              </p>';
-    MockFormDom += '              <img id="thumbnail-photo" alt="">';
-    MockFormDom += '            </a>';
+    MockFormDom += '            <div id="thumbnail-action" href="#" class="item-media fillflow-media">';
+    MockFormDom += '              <div role="button" id="photo-button">';
+    MockFormDom += '                <p>';
+    MockFormDom += '                  <span role="button" class="icon-addimage"></span>';
+    MockFormDom += '                  <em data-l10n-id="addPhoto"> Add photo</em>';
+    MockFormDom += '                </p>';
+    MockFormDom += '                <img id="thumbnail-photo" alt="">';
+    MockFormDom += '              </div>';
+    MockFormDom += '            </div>';
     MockFormDom += '            <div class="item-body-exp">';
     MockFormDom += '              <p class="fillflow-row">';
     MockFormDom += '                <label class="hide" for="givenName" data-l10n-id="labelName">Name:</label>';