Merge remote-tracking branch 'origin/master' into production

* origin/master: Bug 1280393 - [a11y] All inputs and selects need to be labeled properly Bug 1337382 - clicking on 'show' after updating a bug to show the list of people emailed no longer works
mozilla-bteam · Feb 14, 2017 · 6cd37d6 · 6cd37d6
2 parents d7505f1 + d0cc4c7
commit 6cd37d6
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 18 deletions.
diff --git a/extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl
@@ -409,6 +409,7 @@
         container = 1
         hide_on_view = bug.priority == "--" && bug.bug_severity == "normal"
         help = "https://wiki.mozilla.org/BMO/UserGuide/BugFields#priority"
+        label_for = "priority"
     %]
       [% INCLUDE bug_modal/field.html.tmpl
           field = bug_fields.priority
@@ -442,6 +443,7 @@
           label        = "Status"
           hide_on_edit = 1
           help         = "https://wiki.mozilla.org/BMO/UserGuide/BugStatuses"
+          label_for    = "bug_status"
       %]
         [% bug.bug_status FILTER html %]
         [%+ bug.resolution FILTER html IF bug.resolution %]
@@ -780,6 +782,7 @@
         hide_on_view = (bug.rep_platform == 'All' && bug.op_sys == 'All')
           || (bug.rep_platform == 'Unspecified' && bug.op_sys == 'Unspecified')
         help = "https://wiki.mozilla.org/BMO/UserGuide/BugFields#rep_platform"
+        label_for = "rep_platform"
     %]
       [% INCLUDE bug_modal/field.html.tmpl
           field = bug_fields.rep_platform
@@ -1009,7 +1012,7 @@
     [% WRAPPER bug_modal/field.html.tmpl
         field = bug_fields.status_whiteboard
         field_type = constants.FIELD_TYPE_FREETEXT
-        help = "https://wiki.mozilla.org/BMO/Whiteboard"
+        help = "https://wiki.mozilla.org/BMO/UserGuide/Whiteboard"
     %]
       [% bug.status_whiteboard == "" ? "---" : bug.status_whiteboard FILTER html %]
     [% END %]

diff --git a/extensions/BugModal/template/en/default/bug_modal/field.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/field.html.tmpl
@@ -33,6 +33,7 @@
   #   class: (string) optional button class
   #   caption: (string) button caption
   #   hidden: (boolean) don't show the button (default: false)
+  # label_for: (string) optional label for identifier
   #%]
 
 [%
@@ -104,9 +105,21 @@ END;
     <div class="name
                 [%~ " edit-show" IF hide_on_view %]"
          [% IF hide_on_view %] style="display:none"[% END %]>
-      [%~ IF help.defined %]<a href="[% help FILTER none %]" class="help">[% END %]
+      [%~ IF help.defined %]
+        <a href="[% help FILTER none %]" id="[% name FILTER html %]-help-link" class="help">
+        [% aria_labelledby_id = "${name}-help-link" %]
+        [% aria_labelledby_html = BLOCK %]aria-labelledby="[% aria_labelledby_id FILTER html %]"[% END %]
+      [% END %]
+      [%~ IF label_for %]
+        <label for="[% label_for FILTER html %]">
+      [% END %]
       [%~ label _ ":" FILTER html IF label %]
-      [%~ IF help.defined %]</a>[% END ~%]
+      [%~ IF label_for %]
+        </label>
+      [% END ~%]
+      [%~ IF help.defined %]
+        </a>
+      [% END %]
     </div>
   [% END %]
 
@@ -177,7 +190,7 @@ END;
         [% CASE constants.FIELD_TYPE_SINGLE_SELECT %]
           [%# single value select %]
           <input type="hidden" id="[% name FILTER html %]-dirty">
-          <select name="[% name FILTER html %]" id="[% name FILTER html %]">
+          <select name="[% name FILTER html %]" id="[% name FILTER html %]" [% aria_labelledby_html FILTER none %]>
             [% IF values.defined %]
               [% FOREACH v IN values %]
                 [% NEXT IF NOT v.is_active AND NOT value.contains(v.name).size %]
@@ -195,7 +208,7 @@ END;
         [% CASE constants.FIELD_TYPE_MULTI_SELECT %]
           [%# multi value select %]
           <input type="hidden" id="[% name FILTER html %]-dirty">
-          <select name="[% name FILTER html %]" id="[% name FILTER html %]" multiple size="5">
+          <select name="[% name FILTER html %]" id="[% name FILTER html %]" multiple size="5" [% aria_labelledby_html FILTER none %]>
             [% IF values.defined %]
               [%# not implemented %]
             [% ELSE %]
@@ -207,8 +220,7 @@ END;
 
         [% CASE constants.FIELD_TYPE_FREETEXT %]
           [%# normal input field %]
-          <input name="[% name FILTER html %]" id="[% name FILTER html %]" value="[% value FILTER html %]">
-
+          <input name="[% name FILTER html %]" id="[% name FILTER html %]" value="[% value FILTER html %]" [% aria_labelledby_html FILTER none %]>
         [% CASE constants.FIELD_TYPE_USER %]
           [% IF action && !action.hidden %]
             <button class="field-button minor [%= action.class FILTER html IF action.class %]"
@@ -225,6 +237,7 @@ END;
               value = value.login
               classes = [ "bz_userfield" ]
               placeholder = default
+              aria_labelledby = aria_labelledby_id
             %]
           [% IF action && !action.hidden %]
             </div>
@@ -240,12 +253,13 @@ END;
               classes = [ "bz_userfield" ]
               placeholder = default
               multiple = 5
+              aria_labelledby = aria_labelledby_id
             %]
 
         [% CASE constants.FIELD_TYPE_KEYWORDS %]
           [%# keywords %]
           <input type="text" id="[% name FILTER html %]" name="[% name FILTER html %]"
-            value="[% value FILTER html %]">
+            value="[% value FILTER html %]" [% aria_labelledby_html FILTER none %]>
 
         [% CASE constants.FIELD_TYPE_BUG_URLS %]
           [%# see also %]
@@ -265,31 +279,31 @@ END;
               <span class="multiline-value" id="[% name FILTER html %]-view">[% value FILTER html FILTER html_line_break %]</span>
             [% END %]
             <textarea id="[% name FILTER html %]" name="[% name FILTER html %]"
-              rows="10" cols="10" style="display:none">[% value FILTER html %]</textarea>
+              rows="10" cols="10" style="display:none" [% aria_labelledby_html FILTER none %]>[% value FILTER html %]</textarea>
 
         [% CASE constants.FIELD_TYPE_DATETIME %]
           [%# datetime %]
           <input class="cf_datetime" name="[% name FILTER html %]" id="[% name FILTER html %]"
-            value="[% value FILTER html %]">
+            value="[% value FILTER html %]" [% aria_labelledby_html FILTER none %]>
           <img class="cf_datetime-img" id="[% name FILTER html %]-img"
             src="extensions/BugModal/web/calendar.png" width="16" height="16">
 
         [% CASE constants.FIELD_TYPE_DATE %]
           [%# date %]
           <input class="cf_date" name="[% name FILTER html %]" id="[% name FILTER html %]"
-            value="[% value FILTER html %]">
+            value="[% value FILTER html %]" [% aria_labelledby_html FILTER none %]>
           <img class="cf_date-img" id="[% name FILTER html %]-img"
             src="extensions/BugModal/web/calendar.png" width="16" height="16">
 
         [% CASE constants.FIELD_TYPE_INTEGER %]
           [%# integer %]
           <input type="number" name="[% name FILTER html %]" id="[% name FILTER html %]"
-            value="[% value FILTER html %]">
+            value="[% value FILTER html %]" [% aria_labelledby_html FILTER none %]>
 
         [% CASE constants.FIELD_TYPE_BUG_ID %]
           [%# bug id %]
           <input type="text" name="[% name FILTER html %]" id="[% name FILTER html %]"
-            value="[% value FILTER html %]">
+            value="[% value FILTER html %]" [% aria_labelledby_html FILTER none %]>
 
         [% CASE %]
           [%# error %]
@@ -339,6 +353,6 @@ END;
     [% END %]
   [% ELSE %]
     <input type="text" id="[% name FILTER html %]" name="[% name FILTER html %]"
-           value="[% values.pluck('id').join(", ") FILTER html %]">
+           value="[% values.pluck('id').join(", ") FILTER html %]" [% aria_labelledby_html FILTER none %]>
   [% END %]
 [% END %]
diff --git a/extensions/BugModal/template/en/default/bug_modal/new_comment.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/new_comment.html.tmpl
@@ -42,7 +42,7 @@
   </ul>
 
   <div id="comment-edit-tabpanel" class="comment-tabpanel" role="tabpanel" aria-labelledby="comment-edit-tab">
-    <textarea rows="5" cols="80" name="comment" id="comment"></textarea>
+    <textarea rows="5" cols="80" name="comment" id="comment" aria-labelledby="comment-edit-tab"></textarea>
   </div>
   <div id="comment-preview-tabpanel" class="comment-tabpanel" role="tabpanel" aria-labelledby="comment-preview-tab" style="display:none">
     <pre id="comment-preview" class="comment-text"></pre>

diff --git a/template/en/default/bug/process/bugmail.html.tmpl b/template/en/default/bug/process/bugmail.html.tmpl
@@ -51,13 +51,14 @@
   $(function() {
     $(".toggleBugmailRecipients").on("click", function (event) {
       event.preventDefault();
-      toggleBugmailRecipients($(this).data('mailing-bugid'), $(this).data('mailing-show'));
+      toggleBugmailRecipients($(event.target).data('mailing-bugid'),
+                              $(event.target).data('mailing-show'));
      });
    });
 </script>
 
 <dl id="bugmail_summary_[% mailing_bugid FILTER none %]"
-    class="[% show_recipients ? "" : "bz_default_hidden" %]">
+    [% IF !show_recipients %]style="display:none;"[% END %]>
   <dt>Email sent to:</dt>
   <dd>
   [% IF user.can_see_bug(mailing_bugid) %]
@@ -77,7 +78,7 @@
 </dl>
 
 <div id="bugmail_summary_[% mailing_bugid FILTER none %]_short"
-     class="[% show_recipients ? "bz_default_hidden" : "" %]">
+     [% IF show_recipients %]style="display:none;"[% END %]>
   [% IF recipient_count > 0 %]
     Email sent to [% recipient_count FILTER html %] recipient[% 's' UNLESS recipient_count == 1 %].
     (<a href="#" class="toggleBugmailRecipients" data-mailing-bugid="[% mailing_bugid FILTER html %]"

diff --git a/template/en/default/global/userselect.html.tmpl b/template/en/default/global/userselect.html.tmpl
@@ -21,6 +21,7 @@
   # field_title: optional, extra information to display as a tooltip
   # placeholder: optional, input only; placeholder attribute value
   # mandatory: optional; if true, the field cannot be empty.
+  # aria_labelledby: optiona; extra information to use for arai labels
   #%]
 
 [% THROW "onchange is not allowed" IF onchange %]
@@ -34,6 +35,7 @@
   [% IF multiple %] multiple="multiple" size="[% multiple FILTER html %]" [% END %]
   [% IF field_title %] title="[% field_title FILTER html %]" [% END %]
   [% IF mandatory %] required [% END %]
+  [% IF aria_labelledby %]aria-labelledby="[% aria_labelledby FILTER html %]"[% END %]
 >
   [% IF emptyok %]
     <option value=""></option>