Bug 281691: Misused <label>'s cause screen reader problems.

Patch by Marc Schumann <wurblzap@gmail.com>,
r=LpSolit, a=justdave

3 files changed, 97 insertions, 98 deletions

diff --git a/template/en/default/bug/comments.html.tmpl b/template/en/default/bug/comments.html.tmpl
index 1ccf9904c..55a84819f 100644
--- a/template/en/default/bug/comments.html.tmpl
+++ b/template/en/default/bug/comments.html.tmpl
@@ -130,7 +130,8 @@
           <input type="checkbox" name="isprivate-[% count %]" value="1"
                  onClick="updateCommentPrivacy(this, [% count %])"
                  id="isprivate-[% count %]"
-          [% " checked=\"checked\"" IF comment.isprivate %]> Private
+                 [% " checked=\"checked\"" IF comment.isprivate %]>
+          <label for="isprivate-[% count %]">Private</label>
         </i>
       [% END %]
       [% IF UserInGroup(Param('timetrackinggroup')) &&
diff --git a/template/en/default/bug/edit.html.tmpl b/template/en/default/bug/edit.html.tmpl
index b08ce6432..c2bd1b50b 100644
--- a/template/en/default/bug/edit.html.tmpl
+++ b/template/en/default/bug/edit.html.tmpl
@@ -157,34 +157,29 @@
           [% IF Param("usebugaliases") %]
             <tr>
               <td align="right">
-                <b>Alias:</b>
+                <label for="alias" title="a name for the [% terms.bug %] that can be used in place of its ID number, f.e. when adding it to a list of dependencies"><b>Alias</b></label>:
               </td>
               <td>
-                <label for="alias" title="a name for the [% terms.bug %] that can be used in place of its ID number, f.e. when adding it to a list of dependencies">
-                  <input id="alias" name="alias" value="[% bug.alias FILTER html %]"
-                         size="20" maxlength="20">
-                </label>
+                <input id="alias" name="alias" value="[% bug.alias FILTER html %]"
+                       size="20" maxlength="20">
               </td>
             </tr>
           [% END %]
 
           <tr>
             <td align="right">
-              <b><u>P</u>roduct:</b>
+              <label for="product" accesskey="p"><b><u>P</u>roduct</b></label>:
             </td>
-            [% PROCESS select selname => "product" accesskey => "p" %]
+            [% PROCESS select selname => "product" %]
           </tr>
 
           [%# *** Component Version CC Priority Severity AssignedTo Milestone *** %]
 
           <tr>
             <td align="right">
-              <b>
-                <a href="describecomponents.cgi?product=[% bug.product FILTER url_quote %]">
-                  Co<u>m</u>ponent</a>:
-              </b>
+              <label for="component" accesskey="m"><b><a href="describecomponents.cgi?product=[% bug.product FILTER url_quote %]">Co<u>m</u>ponent</a></b></label>:
             </td>
-            [% PROCESS select selname => "component" accesskey => "m" %]
+            [% PROCESS select selname => "component" %]
           </tr>
 
           <tr>
@@ -228,35 +223,35 @@
 
           <tr>
             <td align="right">
-              <b><u>H</u>ardware:</b>
+              <label for="rep_platform" accesskey="h"><b><u>H</u>ardware</b></label>:
             </td>
-            [% PROCESS select selname => "rep_platform" accesskey => "h" %]
+            [% PROCESS select selname => "rep_platform" %]
           </tr>
 
           <tr>
             <td align="right">
-              <b><u>O</u>S:</b>
+              <label for="op_sys" accesskey="o"><b><u>O</u>S</b></label>:
             </td>
-            [% PROCESS select selname => "op_sys" accesskey => "o" %]
+            [% PROCESS select selname => "op_sys" %]
           </tr>
 
           <tr>
             <td align="right">
-              <b>Version:</b>
+              <label for="version"><b>Version</b></label>:
             </td>
             [% PROCESS select selname => "version" %]
           </tr>
 
           <tr>
             <td align="right">
-              <b><a href="page.cgi?id=fields.html#priority">Pr<u>i</u>ority</a>:</b>
+              <label for="priority" accesskey="i"><b><a href="page.cgi?id=fields.html#priority">Pr<u>i</u>ority</a></b></label>:
             </td>
-            [% PROCESS select selname => "priority" accesskey => "i" %]
+            [% PROCESS select selname => "priority" %]
           </tr>
 
           <tr>
             <td align="right">
-              <b><a href="page.cgi?id=fields.html#bug_severity">Severity</a>:</b>
+              <label for="bug_severity"><b><a href="page.cgi?id=fields.html#bug_severity">Severity</a></b></label>:
             </td>
             [% PROCESS select selname = "bug_severity" %]
           </tr>
@@ -264,12 +259,12 @@
           [% IF Param("usetargetmilestone") && bug.target_milestone %]
             <tr>
               <td align="right">
-                <b>
+                <label for="target_milestone"><b>
                   [% IF bug.milestoneurl %]
                     <a href="[% bug.milestoneurl FILTER html %]">
                   [% END %]
-                  Target Milestone[% "</a>" IF bug.milestoneurl %]:
-                </b>
+                  Target Milestone[% "</a>" IF bug.milestoneurl %]
+                [%%]</b></label>:
               </td>
               [% PROCESS select selname = "target_milestone" %]
             </tr>
@@ -294,13 +289,13 @@
 
           <tr>
             <td align="right" valign="top">
-              <b><u>A</u>dd&nbsp;CC:</b>
+              <label for="newcc" accesskey="a"><b><u>A</u>dd&nbsp;CC</b></label>:
             </td>
             <td>
                [% INCLUDE global/userselect.html.tmpl
+                  id => "newcc"
                   name => "newcc"
                   value => ""
-                  accesskey => "a"
                   size => 30
                   multiple => 5
                 %]
@@ -308,23 +303,24 @@
           </tr>
 
           <tr>
-            <td align="right" valign="top">
-              <b>CC:</b>
-            </td>
-            <td valign="top">
             [% IF bug.cc %]
-              <select name="cc" multiple="multiple" size="5">
-              [% FOREACH c = bug.cc %]
-                <option value="[% c FILTER html %]">[% c FILTER html %]</option>
-              [% END %]
-              </select>
-              <br>
-              <input type="checkbox" name="removecc">Remove selected CCs
-              <br>
+              <td align="right" valign="top">
+                <label for="cc"><b>CC</b></label>:
+              </td>
+              <td valign="top">
+                <select id="cc" name="cc" multiple="multiple" size="5">
+                [% FOREACH c = bug.cc %]
+                  <option value="[% c FILTER html %]">[% c FILTER html %]</option>
+                [% END %]
+                </select>
+                <br>
+                <input type="checkbox" id="removecc" name="removecc">
+                [%%]<label for="removecc">Remove selected CCs</label>
+                <br>
+              </td>
             [% ELSE %]
-              <input type="hidden" name="cc" value="">
+              <td colspan="2"><input type="hidden" name="cc" value=""></td>
             [% END %]
-            </td>
           </tr>
 
         </table>
@@ -341,13 +337,13 @@
          [% IF Param('useqacontact') %]
            <tr>
              <td align="right">
-             <b><u>Q</u>A Contact:</b>
+             <label for="qa_contact" accesskey="q"><b><u>Q</u>A Contact</b></label>:
              </td>
              <td colspan="7">
                [% INCLUDE global/userselect.html.tmpl
+                  id => "qa_contact"
                   name => "qa_contact"
                   value => bug.qa_contact.login
-                  accesskey => "q"
                   size => 60
                   emptyok => 1
                 %]
@@ -357,27 +353,27 @@
 
           <tr>
             <td align="right">
-              <b>
+              <label for="bug_file_loc" accesskey="u"><b>
                 [% IF bug.bug_file_loc 
                    AND NOT bug.bug_file_loc.match("^(javascript|data)") %]
-                  <a href="[% bug.bug_file_loc FILTER html %]"><u>U</u>RL</a>:
+                  <a href="[% bug.bug_file_loc FILTER html %]"><u>U</u>RL</a>
                 [% ELSE %]
-                  <u>U</u>RL:
+                  <u>U</u>RL
                 [% END %]
-              </b>
+              [%%]</b></label>:
             </td>
             <td colspan="5">
-              <input name="bug_file_loc" accesskey="u"
+              <input name="bug_file_loc" id="bug_file_loc"
                      value="[% bug.bug_file_loc FILTER html %]" size="60">
             </td>
           </tr>
 
           <tr>
             <td align="right">
-              <b><u>S</u>ummary:</b>
+              <label for="short_desc" accesskey="s"><b><u>S</u>ummary</b></label>:
             </td>
             <td colspan="5">
-              <input name="short_desc" accesskey="s"
+              <input name="short_desc" id="short_desc"
                      value="[% bug.short_desc FILTER html %]" size="60">
             </td>
           </tr>
@@ -385,10 +381,11 @@
           [% IF Param('usestatuswhiteboard') %]
             <tr>
               <td align="right">
-                <b>Status <u>W</u>hiteboard:</b>
+                <label for="status_whiteboard" accesskey="w"><b>Status
+                <u>W</u>hiteboard</b></label>:
               </td>
               <td colspan="5">
-                <input name="status_whiteboard" accesskey="w"
+                <input name="status_whiteboard" id="status_whiteboard"
                        value="[% bug.status_whiteboard FILTER html %]" size="60">
               </td>
             </tr>
@@ -397,11 +394,9 @@
           [% IF use_keywords %]
             <tr>
               <td align="right">
-                <b>
-                  <a href="describekeywords.cgi"><u>K</u>eywords</a>:
-                </b>
+                <label for="keywords" accesskey="k"><b><a href="describekeywords.cgi"><u>K</u>eywords</a></b></label>:
               <td colspan="5">
-                <input name="keywords" accesskey="k"
+                <input name="keywords" id="keywords"
                        value="[% bug.keywords.join(', ') FILTER html %]" size="60">
               </td>
             </tr>
@@ -431,16 +426,16 @@
     <table cellspacing="0" cellpadding="4" border="1">
       <tr>
         <th align="center" bgcolor="#cccccc">
-          Orig. Est.
+          <label for="estimated_time">Orig. Est.</label>
         </th>
         <th align="center" bgcolor="#cccccc">
           Current Est.
         </th>
         <th align="center" bgcolor="#cccccc">
-          Hours Worked
+          <label for="work_time">Hours Worked</label>
         </th>
         <th align="center" bgcolor="#cccccc">
-          Hours Left
+          <label for="remaining_time">Hours Left</label>
         </th>
         <th align="center" bgcolor="#cccccc">
           %Complete
@@ -449,12 +444,12 @@
           Gain
         </th>
         <th align="center" bgcolor="#cccccc">
-          Deadline
+          <label for="deadline">Deadline</label>
         </th>
       </tr>
       <tr>
         <td align="center">
-          <input name="estimated_time"
+          <input name="estimated_time" id="estimated_time"
                  value="[% PROCESS formattimeunit
                                    time_unit=bug.estimated_time %]"
                  size="6" maxlength="6">
@@ -465,11 +460,12 @@
         </td>
         <td align="center">
           [% PROCESS formattimeunit time_unit=bug.actual_time %] +
-          <input name="work_time" value="0" size="3" maxlength="6"
+          <input name="work_time" id="work_time"
+                 value="0" size="3" maxlength="6"
                  onchange="adjustRemainingTime();">
         </td>
         <td align="center">
-          <input name="remaining_time"
+          <input name="remaining_time" id="remaining_time"
                  value="[% PROCESS formattimeunit
                                    time_unit=bug.remaining_time %]"
                  size="6" maxlength="6" onchange="updateRemainingTime();">
@@ -482,7 +478,7 @@
           [% PROCESS formattimeunit time_unit=bug.estimated_time - (bug.actual_time + bug.remaining_time) %]
         </td>
          <td align="center">
-           <input name="deadline" value="[% bug.deadline %]"
+           <input name="deadline" id="deadline" value="[% bug.deadline %]"
                   size="10" maxlength="10"><br />
            <small>(YYYY-MM-DD)</small>
         </td>        
@@ -559,11 +555,12 @@
 [%# *** Comments Groups *** %]
 
   <br>
-  <b>Additional <u>C</u>omments:</b>
+  <label for="comment" accesskey="c"><b>Additional <u>C</u>omments</b></label>:
   [% IF Param("insidergroup") && UserInGroup(Param("insidergroup")) %]
     <input type="checkbox" name="commentprivacy" value="1"
            id="newcommentprivacy"
-           onClick="updateCommentTagControl(this, form)"> Private
+           onClick="updateCommentTagControl(this, form)">
+    <label for="newcommentprivacy">Private</label>
   [% END %]
   <br>
   <a name="add_comment"></a>
@@ -573,15 +570,12 @@
     minrows   = 10
     maxrows   = 25
     cols      = constants.COMMENT_COLS
-    accesskey = 'c'
   %]
 
   [% IF NOT bug.cc || NOT bug.cc.contains(user.login) %]
     <br>
-    <label for="addselfcc">
-      <input type="checkbox" id="addselfcc" name="addselfcc">
-      Add [% user.login FILTER html %] to CC list
-    </label>
+    <input type="checkbox" id="addselfcc" name="addselfcc">
+    <label for="addselfcc">Add [% user.login FILTER html %] to CC list</label>
   [% END %]
   <br>
 
@@ -606,10 +600,11 @@
         [% END %]
 
       &nbsp;&nbsp;&nbsp;&nbsp;
-      <input type="checkbox" name="bit-[% group.bit %]" value="1"
-        [% " checked=\"checked\"" IF group.ison %]
-        [% " disabled=\"disabled\"" IF NOT group.ingroup %]>
-      [% group.description %]
+      <input type="checkbox" value="1"
+             name="bit-[% group.bit %]" id="bit-[% group.bit %]"
+             [% " checked=\"checked\"" IF group.ison %]
+             [% " disabled=\"disabled\"" IF NOT group.ingroup %]>
+      <label for="bit-[% group.bit %]">[% group.description %]</label>
       <br>
       [% END %]
     [% END %]
@@ -637,10 +632,14 @@
       </p>
 
       <p>
-        <input type="checkbox" name="reporter_accessible" value="1"
-          [% " checked" IF bug.reporter_accessible %]>Reporter
-        <input type="checkbox" name="cclist_accessible" value="1"
-          [% " checked" IF bug.cclist_accessible %]>CC List
+        <input type="checkbox" value="1"
+               name="reporter_accessible" id="reporter_accessible"
+               [% " checked" IF bug.reporter_accessible %]>
+        <label for="reporter_accessible">Reporter</label>
+        <input type="checkbox" value="1"
+               name="cclist_accessible" id="cclist_accessible"
+               [% " checked" IF bug.cclist_accessible %]>
+        <label for="cclist_accessible">CC List</label>
       </p>
     [% END %]
   [% END %]
@@ -663,14 +662,17 @@
 [%############################################################################%]
 
 [% BLOCK dependencies %]
-  <th align="right">[% terms.Bug %] [%+ bug.bug_id %] [%+ dep.title %]:</th>
+  <th align="right">
+    <label for="[% dep.fieldname %]"[% " accesskey=\"$accesskey\"" IF accesskey %]>
+    [% terms.Bug %] [%+ bug.bug_id %] [%+ dep.title %]</label>:
+  </th>
   <td>
   [% FOREACH depbug = bug.${dep.fieldname} %]
     [% depbug FILTER bug_link(depbug) %][% " " %]
   [% END %]
   </td>
   <td>
-    <input name="[% dep.fieldname %]" accesskey="[% accesskey %]"
+    <input name="[% dep.fieldname %]" id="[% dep.fieldname %]"
            value="[% bug.${dep.fieldname}.join(', ') %]">
   </td>
 [% END %]
@@ -682,14 +684,12 @@
 
 [% BLOCK select %]
   <td>
-    <label for="[% selname %]" accesskey="[% accesskey %]">
-      <select name="[% selname %]" id="[% selname %]">
-        [% FOREACH x = bug.choices.${selname} %]
-          <option value="[% x FILTER html %]"
-            [% " selected" IF x == bug.${selname} %]>[% x FILTER html %]
-          </option>
-        [% END %]
-      </select>
-    </label>
+    <select id="[% selname %]" name="[% selname %]">
+      [% FOREACH x = bug.choices.${selname} %]
+        <option value="[% x FILTER html %]"
+          [% " selected" IF x == bug.${selname} %]>[% x FILTER html %]
+        </option>
+      [% END %]
+    </select>
   </td>
 [% END %]
diff --git a/template/en/default/bug/summarize-time.html.tmpl b/template/en/default/bug/summarize-time.html.tmpl
index 35808f951..bf4850153 100644
--- a/template/en/default/bug/summarize-time.html.tmpl
+++ b/template/en/default/bug/summarize-time.html.tmpl
@@ -258,8 +258,8 @@
 <table>
 <tr>
 <td align="right">
-  <b>Period <label accesskey="s" 
-             for="start_date"><u>s</u>tarting</label></b>: 
+  <b><label accesskey="s" 
+             for="start_date">Period <u>s</u>tarting</label></b>: 
 </td><td colspan="3">
   <input type="text" id="start_date" name="start_date" size="11"
   align="right" value="[% start_date FILTER html %]" maxlength="10">
@@ -286,26 +286,24 @@
   %]><label 
   for="owner" accesskey="d"><u>D</u>eveloper</label>
 </td><td colspan="2">
-  <b>Format</b>: <select name="ctype">
+  <label for="ctype"><b>Format</b></label>: <select name="ctype" id="ctype">
     <option value="html">HTML Report</option>
   </select>
 </td></tr><tr>
 <td>&nbsp;</td><td colspan="4">
-  <label for="monthly" accesskey="m">
   <input type="checkbox" name="monthly" [% 'checked="checked"' IF
       monthly %] id="monthly">
-  Split by <u>m</u>onth</label>
+  <label for="monthly" accesskey="m">Split by <u>m</u>onth</label>
   [%# XXX: allow splitting by other intervals %]
   &nbsp;
-  <label for="detailed" accesskey="t">
   <input type="checkbox" name="detailed" [% 'checked="checked"' IF
       detailed %] id="detailed">
-  De<u>t</u>ailed summaries</label>
+  <label for="detailed" accesskey="t">De<u>t</u>ailed summaries</label>
   &nbsp;
-  <label for="inactive" accesskey="i">
   <input type="checkbox" name="inactive" [% 'checked="checked"' IF
       inactive %] id="inactive">
-  Also show <u>i</u>nactive [% terms.bugs %]</label>
+  <label for="inactive" accesskey="i">Also show <u>i</u>nactive
+  [%+ terms.bugs %]</label>
 </td>
 </tr></table>