Generate proper labels. Fixes #14.

toscawidgets · Nov 6, 2012 · 761865d · 761865d
1 parent 7817ef6
commit 761865d
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 43 deletions.
diff --git a/tests/test_widgets.py b/tests/test_widgets.py
@@ -377,15 +377,15 @@ class TestListLayout(WidgetTest):
     expected = """\
 <ul>
     <li class="odd">
-        <label>Field1</label>
+        <label for="field1">Field1</label>
         <input name="field1" id="field1" type="text">
         <span id="field1:error" class="error"></span>
     </li><li class="even">
-        <label>Field2</label>
+        <label for="field2">Field2</label>
         <input name="field2" id="field2" type="text">
         <span id="field2:error" class="error"></span>
     </li><li class="odd">
-        <label>Field3</label>
+        <label for="field3">Field3</label>
         <input name="field3" id="field3" type="text">
         <span id="field3:error" class="error"></span>
     </li>
@@ -399,7 +399,7 @@ class TestListLayoutErrors(TestListLayout):
     expected = """\
 <ul>
     <li class="odd">
-        <label>Field1</label>
+        <label for="field1">Field1</label>
         <input name="field1" id="field1" type="text">
         <span id="field1:error" class="error"></span>
     </li>
@@ -413,19 +413,19 @@ class TestTableLayout(WidgetTest):
                           TextField(id='field3')]}
     expected = """<table>
     <tr class="odd" id="field1:container">
-        <th>Field1</th>
+        <th><label for="field1">Field1</label></th>
         <td>
             <input name="field1" id="field1" type="text">
             <span id="field1:error"></span>
         </td>
     </tr><tr class="even" id="field2:container">
-        <th>Field2</th>
+        <th><label for="field2">Field2</label></th>
         <td>
             <input name="field2" id="field2" type="text">
             <span id="field2:error"></span>
         </td>
     </tr><tr class="odd" id="field3:container">
-        <th>Field3</th>
+        <th><label for="field3">Field3</label></th>
         <td>
             <input name="field3" id="field3" type="text">
             <span id="field3:error"></span>
@@ -441,7 +441,7 @@ def test_required(self):
         attrs = {'children': [TextField(id='field1', validator=twc.Required)]}
         expected = """<table>
     <tr class="odd required" id="field1:container">
-        <th>Field1</th>
+        <th><label for="field1">Field1</label></th>
         <td>
             <input name="field1" id="field1" type="text">
             <span id="field1:error"></span>
@@ -456,7 +456,7 @@ def test_fe_not_required(self):
         attrs = {'children': [TextField(id='field1', validator=formencode.FancyValidator(not_empty=False))]}
         expected = """<table>
     <tr class="odd" id="field1:container">
-        <th>Field1</th>
+        <th><label for="field1">Field1</label></th>
         <td>
             <input name="field1" id="field1" type="text">
             <span id="field1:error"></span>
@@ -471,7 +471,7 @@ def test_fe_required(self):
         attrs = {'children': [TextField(id='field1', validator=formencode.FancyValidator(not_empty=True))]}
         expected = """<table>
     <tr class="odd required" id="field1:container">
-        <th>Field1</th>
+        <th><label for="field1">Field1</label></th>
         <td>
             <input name="field1" id="field1" type="text">
             <span id="field1:error"></span>
@@ -543,10 +543,9 @@ class TestForm(WidgetTest):
      <span class="error"></span>
     <table >
     <tr class="odd"  id="field1:container">
-        <th>Field1</th>
+        <th><label for="field1">Field1</label></th>
         <td >
             <input name="field1" type="text" id="field1"/>
-            
             <span id="field1:error"></span>
         </td>
     </tr>
@@ -569,19 +568,19 @@ class TestTableForm(WidgetTest):
      <span class="error"></span>
     <table>
     <tr class="odd" id="field1:container">
-        <th>Field1</th>
+        <th><label for="field1">Field1</label></th>
         <td>
             <input name="field1" id="field1" type="text">
             <span id="field1:error"></span>
         </td>
     </tr><tr class="even" id="field2:container">
-        <th>Field2</th>
+        <th><label for="field2">Field2</label></th>
         <td>
             <input name="field2" id="field2" type="text">
             <span id="field2:error"></span>
         </td>
     </tr><tr class="odd" id="field3:container">
-        <th>Field3</th>
+        <th><label for="field3">Field3</label></th>
         <td>
             <input name="field3" id="field3" type="text">
             <span id="field3:error"></span>
@@ -605,17 +604,17 @@ class TestListForm(WidgetTest):
      <span class="error"></span>
     <ul >
     <li class="odd">
-     <label>Field1</label>
+     <label for="field1">Field1</label>
         <input name="field1" id="field1" type="text"/>
         <span id="field1:error" class="error"></span>
     </li>
     <li class="even">
-     <label>Field2</label>
+     <label for="field2">Field2</label>
         <input name="field2" id="field2" type="text"/>
         <span id="field2:error" class="error"></span>
     </li>
     <li class="odd">
-     <label>Field3</label>
+     <label for="field3">Field3</label>
         <input name="field3" id="field3" type="text"/>
         <span id="field3:error" class="error"></span>
     </li>
@@ -635,19 +634,19 @@ class TestTableFieldset(WidgetTest):
     <legend></legend>
     <table>
     <tr class="odd" id="field1:container">
-        <th>Field1</th>
+        <th><label for="field1">Field1</label></th>
         <td>
             <input name="field1" id="field1" type="text">
             <span id="field1:error"></span>
         </td>
     </tr><tr class="even" id="field2:container">
-        <th>Field2</th>
+        <th><label for="field2">Field2</label></th>
         <td>
             <input name="field2" id="field2" type="text">
             <span id="field2:error"></span>
         </td>
     </tr><tr class="odd" id="field3:container">
-        <th>Field3</th>
+        <th><label for="field3">Field3</label></th>
         <td>
             <input name="field3" id="field3" type="text">
             <span id="field3:error"></span>
@@ -674,19 +673,19 @@ class TestTableFieldsetWithFEValidator(WidgetTest):
     <legend></legend>
     <table>
     <tr class="odd" id="field1:container">
-        <th>Field1</th>
+        <th><label for="field1">Field1</label></th>
         <td>
             <input name="field1" id="field1" type="text">
             <span id="field1:error"></span>
         </td>
     </tr><tr class="even" id="field2:container">
-        <th>Field2</th>
+        <th><label for="field2">Field2</label></th>
         <td>
             <input name="field2" id="field2" type="text">
             <span id="field2:error"></span>
         </td>
     </tr><tr class="odd" id="field3:container">
-        <th>Field3</th>
+        <th><label for="field3">Field3</label></th>
         <td>
             <input name="field3" id="field3" type="text">
             <span id="field3:error"></span>
@@ -710,17 +709,17 @@ class TestListFieldset(WidgetTest):
     <legend></legend>
     <ul >
     <li class="odd">
-     <label>Field1</label>
+     <label for="field1">Field1</label>
         <input name="field1" id="field1" type="text"/>
         <span id="field1:error" class="error"></span>
     </li>
     <li class="even">
-     <label>Field2</label>
+     <label for="field2">Field2</label>
         <input name="field2" id="field2" type="text"/>
         <span id="field2:error" class="error"></span>
     </li>
     <li class="odd">
-     <label>Field3</label>
+     <label for="field3">Field3</label>
         <input name="field3" id="field3" type="text"/>
         <span id="field3:error" class="error"></span>
     </li>
@@ -742,19 +741,19 @@ class TestFormPage(WidgetTest):
      <span class="error"></span>
     <table id="mytestwidget">
     <tr class="odd" id="mytestwidget:field1:container">
-        <th>Field1</th>
+        <th><label for="field1">Field1</label></th>
         <td>
             <input name="mytestwidget:field1" id="mytestwidget:field1" type="text"/>
             <span id="mytestwidget:field1:error"></span>
         </td>
     </tr><tr class="even" id="mytestwidget:field2:container">
-        <th>Field2</th>
+        <th><label for="field2">Field2</label></th>
         <td>
             <input name="mytestwidget:field2" id="mytestwidget:field2" type="text"/>
             <span id="mytestwidget:field2:error"></span>
         </td>
     </tr><tr class="odd" id="mytestwidget:field3:container">
-        <th>Field3</th>
+        <th><label for="field3">Field3</label></th>
         <td>
             <input name="mytestwidget:field3" id="mytestwidget:field3" type="text"/>
             <span id="mytestwidget:field3:error"></span>
@@ -780,19 +779,19 @@ def test_request_get(self):
      <span class="error"></span>
     <table id="mytestwidget">
     <tr class="odd" id="mytestwidget:field1:container">
-        <th>Field1</th>
+        <th><label for="field1">Field1</label></th>
         <td>
             <input name="mytestwidget:field1" id="mytestwidget:field1" type="text"/>
             <span id="mytestwidget:field1:error"></span>
         </td>
     </tr><tr class="even" id="mytestwidget:field2:container">
-        <th>Field2</th>
+        <th><label for="field2">Field2</label></th>
         <td>
             <input name="mytestwidget:field2" id="mytestwidget:field2" type="text"/>
             <span id="mytestwidget:field2:error"></span>
         </td>
     </tr><tr class="odd" id="mytestwidget:field3:container">
-        <th>Field3</th>
+        <th><label for="field3">Field3</label></th>
         <td>
             <input name="mytestwidget:field3" id="mytestwidget:field3" type="text"/>
             <span id="mytestwidget:field3:error"></span>
@@ -822,19 +821,19 @@ def _test_request_post_invalid(self):
      <span class="error"></span>
     <table id="mytestwidget">
     <tr class="odd" id="mytestwidget:field1:container">
-        <th>Field1</th>
+        <th><label for="field1">Field1</label></th>
         <td>
             <input name="mytestwidget:field1" id="mytestwidget:field1" type="text">
             <span id="mytestwidget:field1:error"></span>
         </td>
     </tr><tr class="even" id="mytestwidget:field2:container">
-        <th>Field2</th>
+        <th><label for="field2">Field2</label></th>
         <td>
             <input name="mytestwidget:field2" id="mytestwidget:field2" type="text">
             <span id="mytestwidget:field2:error"></span>
         </td>
     </tr><tr class="odd" id="mytestwidget:field3:container">
-        <th>Field3</th>
+        <th><label for="field3">Field3</label></th>
         <td>
             <input name="mytestwidget:field3" id="mytestwidget:field3" type="text">
             <span id="mytestwidget:field3:error"></span>

diff --git a/tw2/forms/templates/list_layout.html b/tw2/forms/templates/list_layout.html
@@ -3,7 +3,7 @@
         ${c.display()}
     </py:for>
     <li py:for="i,c in enumerate(w.children_non_hidden)" class="${(i % 2 and 'even' or 'odd') + ((c.validator and getattr(c.validator, 'required', None)) and ' required' or '') + (c.error_msg and ' error' or '')}" title="${w.hover_help and c.help_text or None}" py:attrs="c.container_attrs">
-        <label>$c.label</label>
+        <label for="${c.id}">$c.label</label>
         ${c.display()}
         <py:if test="not w.hover_help">$c.help_text</py:if>
         <span id="${c.compound_id}:error" class="error" py:content="c.error_msg"/>

diff --git a/tw2/forms/templates/list_layout.jinja b/tw2/forms/templates/list_layout.jinja
@@ -4,7 +4,7 @@
     {% endfor %}
     {% for c in w.children_non_hidden %}
     <li class="{{ loop.index0 % 2 and 'even' or 'odd' }}{{ c|attr(' required') and ' required' or '' }}{{ c.error_msg and ' error' or '' }}" {% if w.hover_help and c.help_text %}title="{{ c.help_text }}"{% endif %} {{ c.container_attrs|xmlattr }}>
-    <label>{{ c.label or '' }}</label>
+    <label for="{{ c.id }}">{{ c.label or '' }}</label>
         {{ c.display() }}
         {% if not w.hover_help %}{{ c.help_text or '' }}{% endif %}
         <span id="{{ c.compound_id or '' }}:error" class="error">{{ c.error_msg or '' }}</span>

diff --git a/tw2/forms/templates/list_layout.mak b/tw2/forms/templates/list_layout.mak
@@ -11,7 +11,7 @@ title="${c.help_text}" \
      % endif
 ${tw.attrs(attrs=c.container_attrs)}\
 >
-     <label>${c.label or ''}</label>
+     <label for='${c.id}'>${c.label or ''}</label>
         ${c.display() | n}
         % if not w.hover_help:
 ${c.help_text or ''}\

diff --git a/tw2/forms/templates/table_layout.html b/tw2/forms/templates/table_layout.html
@@ -1,6 +1,6 @@
 <table xmlns:py="http://genshi.edgewall.org/" py:attrs="w.attrs">
     <tr py:for="i,c in enumerate(w.children_non_hidden)" class="${(i % 2 and 'even' or 'odd') + ((c.validator and getattr(c.validator, 'required', None)) and ' required' or '') + (c.error_msg and ' error' or '')}" title="${w.hover_help and c.help_text or None}" py:attrs="c.container_attrs" id="${c.compound_id}:container">
-        <th py:if="c.label">$c.label</th>
+        <th py:if="c.label"><label for="${c.id}">$c.label</label></th>
         <td py:attrs="(not c.label) and dict(colspan='2') or None">
             ${c.display()}
             <py:if test="not w.hover_help">$c.help_text</py:if>
@@ -11,4 +11,4 @@
         <py:for each="c in w.children_hidden">${c.display()}</py:for>
         <span id="${w.compound_id}:error" py:content="w.error_msg"/>
     </td></tr>
-</table>
+</table>
diff --git a/tw2/forms/templates/table_layout.jinja b/tw2/forms/templates/table_layout.jinja
@@ -6,7 +6,7 @@
       id="{{ c.compound_id }}:container">
 
       {% if c.label %}
-      <th>{{ c.label }}</th>
+      <th><label for="{{ c.id }}">{{ c.label }}</label></th>
       {% endif %}
 
       <td 

diff --git a/tw2/forms/templates/table_layout.mak b/tw2/forms/templates/table_layout.mak
@@ -8,7 +8,7 @@
 ${tw.attrs(attrs=c.container_attrs)} \
 id="${c.compound_id or ''}:container">
        % if c.label:
-        <th>${c.label}</th>
+        <th><label for='${c.id}'>${c.label}</label></th>
        % endif
         <td \
        % if not c.label: