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

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

2 files changed, 36 insertions, 40 deletions

diff --git a/template/en/default/reports/create-chart.html.tmpl b/template/en/default/reports/create-chart.html.tmpl
index 005d14752..c02e8db04 100644
--- a/template/en/default/reports/create-chart.html.tmpl
+++ b/template/en/default/reports/create-chart.html.tmpl
@@ -70,11 +70,11 @@ function subcatSelected() {
       </tr>
     [% ELSE %]
       <tr>
-        <th>Category:</th>
+        <th><label for="category">Category</label>:</th>
         <th></th>
-        <th>Sub-category:</th>
+        <th><label for="subcategory">Sub-category</label>:</th>
         <th></th>
-        <th>Name:</th>
+        <th><label for="name" accesskey="N">Name</label>:</th>
         <th><br>
         </th>
       </tr>
@@ -102,19 +102,17 @@ function subcatSelected() {
         </td>
         
         <td align="left">
-          <label for="name" accesskey="N">
-            <select name="name" id="name" style="width: 15em"
-                    size="5" multiple="multiple"
-                    [%+ "disabled=\"disabled\"" UNLESS name.keys.size %]>
-              [% FOREACH x = name.keys.sort %]
-                <option value="[% name.$x FILTER html %]">
-                  [% x FILTER html %]</option>
-              [% END %]
-              [% UNLESS name.keys.size %]
-                <option value="" disabled="disabled"></option>
-              [% END %]
-            </select>
-          </label>
+          <select name="name" id="name" style="width: 15em"
+                  size="5" multiple="multiple"
+                  [%+ "disabled=\"disabled\"" UNLESS name.keys.size %]>
+            [% FOREACH x = name.keys.sort %]
+              <option value="[% name.$x FILTER html %]">
+                [% x FILTER html %]</option>
+            [% END %]
+            [% UNLESS name.keys.size %]
+              <option value="" disabled="disabled"></option>
+            [% END %]
+          </select>
         </td>
 
         <td align="center" valign="middle"> 
@@ -233,18 +231,18 @@ function subcatSelected() {
         </td>
 
         <td style="text-align: right; vertical-align: bottom;">
-          <b>Cumulate:</b> 
-          <input type="checkbox" name="cumulate" value="1"
+          <label for="cumulate"><b>Cumulate</b></label>:
+          <input type="checkbox" name="cumulate" id="cumulate" value="1"
           [% " checked" IF chart.cumulate %]>
         </td>
 
         <td></td>
-        <td valign="bottom"> 
-          <b>Date Range:</b> 
-          <input type="text" size="12" name="datefrom" 
+        <td valign="bottom">
+          <label for="datefrom"><b>Date Range</b></label>:
+          <input type="text" size="12" name="datefrom" id="datefrom"
             value="[% time2str("%Y-%m-%d", chart.datefrom) IF chart.datefrom%]">
-          <b>to</b> 
-          <input type="text" size="12" name="dateto" 
+          <label for="dateto"><b>to</b></label>
+          <input type="text" size="12" name="dateto" id="dateto"
             value="[% time2str("%Y-%m-%d", chart.dateto) IF chart.dateto %]">
         </td>
 
diff --git a/template/en/default/reports/series-common.html.tmpl b/template/en/default/reports/series-common.html.tmpl
index 06b6af870..42bf0b7ba 100644
--- a/template/en/default/reports/series-common.html.tmpl
+++ b/template/en/default/reports/series-common.html.tmpl
@@ -99,22 +99,20 @@ function checkNewState() {
 
 [% BLOCK series_select %]
   <td align="left">
-    <label for="[% sel.name %]" accesskey="[% sel.accesskey %]">
-      <select name="[% sel.name %]" id="[% sel.name %]"
-              size="[% sel.size %]" style="width: 15em"
-              [%+ "disabled=\"disabled\"" UNLESS ${sel.name}.keys.size || newtext %]
-              [%+ "onchange=\"$sel.onchange\"" IF sel.onchange %]>
-        [% FOREACH x = ${sel.name}.keys.sort %]
-          <option value="[% x FILTER html %]"
-            [% " selected" IF default.${sel.name} == x %]>
-            [% x FILTER html %]</option>
-        [% END %]
-        [% IF newtext %]
-          <option value="">[% newtext FILTER html %]</option>
-        [% ELSIF NOT ${sel.name}.keys.size %]
-          <option value="" disabled="disabled"></option>
-        [% END %]
-      </select>
-    </label>
+    <select name="[% sel.name %]" id="[% sel.name %]"
+            size="[% sel.size %]" style="width: 15em"
+            [%+ "disabled=\"disabled\"" UNLESS ${sel.name}.keys.size || newtext %]
+            [%+ "onchange=\"$sel.onchange\"" IF sel.onchange %]>
+      [% FOREACH x = ${sel.name}.keys.sort %]
+        <option value="[% x FILTER html %]"
+          [% " selected" IF default.${sel.name} == x %]>
+          [% x FILTER html %]</option>
+      [% END %]
+      [% IF newtext %]
+        <option value="">[% newtext FILTER html %]</option>
+      [% ELSIF NOT ${sel.name}.keys.size %]
+        <option value="" disabled="disabled"></option>
+      [% END %]
+    </select>
   </td>
 [% END %]