Merge pull request mozilla-b2g#19824 from yzen/bug-1018221

Bug 1018221 - making form buttons accessible around the time zone FTU sc...
yzen · Jun 3, 2014 · 0f187f9 · 0f187f9
2 parents 20d61fa + c58f57b
commit 0f187f9
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 14 deletions.
diff --git a/apps/ftu/index.html b/apps/ftu/index.html
@@ -357,33 +357,33 @@ <h2 id="time-zone-title">
           <ul>
             <!-- timezones -->
             <li>
-              <button class="change icon icon-dialog" data-l10n-id="change" type="button">
+              <p id="tz-region-label" aria-label="region" data-l10n-id="region"></p>
+              <select id="tz-region" class="invisible"></select>
+              <button id="tz-region-button" class="change icon icon-dialog" data-l10n-id="change" type="button" aria-describedby="tz-region-label">
                 Change
               </button>
-              <p id="tz-region-label"></p>
-              <select id="tz-region" class="invisible"></select>
             </li>
             <li>
-              <button class="change icon icon-dialog" data-l10n-id="change" type="button">
+              <p id="tz-city-label" aria-label="city" data-l10n-id="city">GMT</p>
+              <select id="tz-city" class="invisible"></select>
+              <button id="tz-city-button" class="change icon icon-dialog" data-l10n-id="change" type="button" aria-describedby="tz-city-label">
                 Change
               </button>
-              <p id="tz-city-label">GMT</p>
-              <select id="tz-city" class="invisible"></select>
             </li>
             <!-- date/time -->
             <li>
-              <button class="change icon icon-dialog" data-l10n-id="change">
+              <p id="date-configuration-label" aria-label="date" data-l10n-id="date"></p>
+              <input id="date-configuration" class="invisible" type="date" min="1970-1-1" max="2037-12-31"></input>
+              <button id="date-configuration-button" class="change icon icon-dialog" data-l10n-id="change" aria-describedby="date-configuration-label">
                 Change
               </button>
-              <p id="date-configuration-label"></p>
-              <input id="date-configuration" class="invisible" type="date" min="1970-1-1" max="2037-12-31"></input>
             </li>
             <li>
-              <button class="change icon icon-dialog" data-l10n-id="change" type="button">
+              <p id="time-configuration-label" aria-label="time" data-l10n-id="time">00:00</p>
+              <input id="time-configuration" class="invisible" type="time"></input>
+              <button id="time-configuration-button" class="change icon icon-dialog" data-l10n-id="change" type="button" aria-describedby="time-configuration-label">
                 Change
               </button>
-              <p id="time-configuration-label">00:00</p>
-              <input id="time-configuration" class="invisible" type="time"></input>
             </li>
           </ul>
         </form>

diff --git a/apps/ftu/js/time.js b/apps/ftu/js/time.js
@@ -2,15 +2,34 @@
 'use strict';
 
 var TimeManager = {
+  elementIDs: [
+    'tz-region',
+    'tz-city',
+    'date-configuration',
+    'time-configuration'
+  ],
+
   init: function tm_init() {
     if (window.navigator.mozTime) {
       this.time = window.navigator.mozTime;
     } else {
       console.log('There is no mozTime available in window');
     }
+
+    this.elementIDs.forEach(function(elementID) {
+      document.getElementById(elementID + '-button').addEventListener('click',
+        function(evt) {
+          evt.preventDefault();
+          var input = document.getElementById(elementID);
+          // Inspired by app/clock/js/form_button.js
+          // It seems like setting focus instantly does not trigger the input/
+          // select dialog.
+          setTimeout(input.focus.bind(input), 10);
+        });
+    });
   },
+
   set: function tm_set(date) {
     this.time.set(date);
   }
 };
-
diff --git a/apps/ftu/locales/ftu.en-US.properties b/apps/ftu/locales/ftu.en-US.properties
@@ -172,6 +172,10 @@ dateAndTime = Date & Time
 timezoneTitle = UTC{{utcOffset}} {{region}}/{{city}}
 timeZone = Time zone
 change = Change
+region.ariaLabel = Region
+city.ariaLabel = City
+date.ariaLabel = Date
+time.ariaLabel = Time
 
 #=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#
 # Import contacts

diff --git a/apps/ftu/style/style.css b/apps/ftu/style/style.css
@@ -730,18 +730,20 @@ aside.connecting {
   height: 5rem;
   padding: 0 1.5rem;
   overflow: hidden;
+  display: flex;
 }
 
 #date_and_time [data-type="list"] li p {
   padding: 0 0.5rem 0 0;
   font-size: 1.4rem;
   line-height: 5rem;
+  flex-grow: 1;
 }
 
 #date_and_time [data-type="list"] button {
   font-size: 1.4rem;
   font-weight: 500;
-  margin-top: 0.5rem;
+  margin: auto;
 }