Refs #32338 -- Made RadioSelect/CheckboxSelectMultiple render in <div> tags.

This improves accessibility for screen reader users.

2 files changed, 142 insertions, 165 deletions

diff --git a/tests/forms_tests/widget_tests/test_checkboxselectmultiple.py b/tests/forms_tests/widget_tests/test_checkboxselectmultiple.py
index 42555d98a6..05406894dd 100644
--- a/tests/forms_tests/widget_tests/test_checkboxselectmultiple.py
+++ b/tests/forms_tests/widget_tests/test_checkboxselectmultiple.py
@@ -11,39 +11,39 @@ class CheckboxSelectMultipleTest(WidgetTest):
     widget = CheckboxSelectMultiple
 
     def test_render_value(self):
-        self.check_html(self.widget(choices=self.beatles), 'beatles', ['J'], html=(
-            """<ul>
-            <li><label><input checked type="checkbox" name="beatles" value="J"> John</label></li>
-            <li><label><input type="checkbox" name="beatles" value="P"> Paul</label></li>
-            <li><label><input type="checkbox" name="beatles" value="G"> George</label></li>
-            <li><label><input type="checkbox" name="beatles" value="R"> Ringo</label></li>
-            </ul>"""
-        ))
+        self.check_html(self.widget(choices=self.beatles), 'beatles', ['J'], html="""
+            <div>
+            <div><label><input checked type="checkbox" name="beatles" value="J"> John</label></div>
+            <div><label><input type="checkbox" name="beatles" value="P"> Paul</label></div>
+            <div><label><input type="checkbox" name="beatles" value="G"> George</label></div>
+            <div><label><input type="checkbox" name="beatles" value="R"> Ringo</label></div>
+            </div>
+        """)
 
     def test_render_value_multiple(self):
-        self.check_html(self.widget(choices=self.beatles), 'beatles', ['J', 'P'], html=(
-            """<ul>
-            <li><label><input checked type="checkbox" name="beatles" value="J"> John</label></li>
-            <li><label><input checked type="checkbox" name="beatles" value="P"> Paul</label></li>
-            <li><label><input type="checkbox" name="beatles" value="G"> George</label></li>
-            <li><label><input type="checkbox" name="beatles" value="R"> Ringo</label></li>
-            </ul>"""
-        ))
+        self.check_html(self.widget(choices=self.beatles), 'beatles', ['J', 'P'], html="""
+            <div>
+            <div><label><input checked type="checkbox" name="beatles" value="J"> John</label></div>
+            <div><label><input checked type="checkbox" name="beatles" value="P"> Paul</label></div>
+            <div><label><input type="checkbox" name="beatles" value="G"> George</label></div>
+            <div><label><input type="checkbox" name="beatles" value="R"> Ringo</label></div>
+            </div>
+        """)
 
     def test_render_none(self):
         """
         If the value is None, none of the options are selected, even if the
         choices have an empty option.
         """
-        self.check_html(self.widget(choices=(('', 'Unknown'),) + self.beatles), 'beatles', None, html=(
-            """<ul>
-            <li><label><input type="checkbox" name="beatles" value=""> Unknown</label></li>
-            <li><label><input type="checkbox" name="beatles" value="J"> John</label></li>
-            <li><label><input type="checkbox" name="beatles" value="P"> Paul</label></li>
-            <li><label><input type="checkbox" name="beatles" value="G"> George</label></li>
-            <li><label><input type="checkbox" name="beatles" value="R"> Ringo</label></li>
-            </ul>"""
-        ))
+        self.check_html(self.widget(choices=(('', 'Unknown'),) + self.beatles), 'beatles', None, html="""
+            <div>
+            <div><label><input type="checkbox" name="beatles" value=""> Unknown</label></div>
+            <div><label><input type="checkbox" name="beatles" value="J"> John</label></div>
+            <div><label><input type="checkbox" name="beatles" value="P"> Paul</label></div>
+            <div><label><input type="checkbox" name="beatles" value="G"> George</label></div>
+            <div><label><input type="checkbox" name="beatles" value="R"> Ringo</label></div>
+            </div>
+        """)
 
     def test_nested_choices(self):
         nested_choices = (
@@ -52,31 +52,23 @@ class CheckboxSelectMultipleTest(WidgetTest):
             ('Video', (('vhs', 'VHS'), ('dvd', 'DVD'))),
         )
         html = """
-        <ul id="media">
-        <li>
-        <label for="media_0"><input id="media_0" name="nestchoice" type="checkbox" value="unknown"> Unknown</label>
-        </li>
-        <li>Audio<ul id="media_1">
-        <li>
-        <label for="media_1_0">
-        <input checked id="media_1_0" name="nestchoice" type="checkbox" value="vinyl"> Vinyl
-        </label>
-        </li>
-        <li>
-        <label for="media_1_1"><input id="media_1_1" name="nestchoice" type="checkbox" value="cd"> CD</label>
-        </li>
-        </ul></li>
-        <li>Video<ul id="media_2">
-        <li>
-        <label for="media_2_0"><input id="media_2_0" name="nestchoice" type="checkbox" value="vhs"> VHS</label>
-        </li>
-        <li>
-        <label for="media_2_1">
-        <input checked id="media_2_1" name="nestchoice" type="checkbox" value="dvd"> DVD
-        </label>
-        </li>
-        </ul></li>
-        </ul>
+        <div id="media">
+        <div> <label for="media_0">
+        <input type="checkbox" name="nestchoice" value="unknown" id="media_0"> Unknown</label></div>
+        <div>
+        <label>Audio</label>
+        <div> <label for="media_1_0">
+        <input checked type="checkbox" name="nestchoice" value="vinyl" id="media_1_0"> Vinyl</label></div>
+        <div> <label for="media_1_1">
+        <input type="checkbox" name="nestchoice" value="cd" id="media_1_1"> CD</label></div>
+        </div><div>
+        <label>Video</label>
+        <div> <label for="media_2_0">
+        <input type="checkbox" name="nestchoice" value="vhs" id="media_2_0"> VHS</label></div>
+        <div> <label for="media_2_1">
+        <input type="checkbox" name="nestchoice" value="dvd" id="media_2_1" checked> DVD</label></div>
+        </div>
+        </div>
         """
         self.check_html(
             self.widget(choices=nested_choices), 'nestchoice', ('vinyl', 'dvd'),
@@ -90,31 +82,18 @@ class CheckboxSelectMultipleTest(WidgetTest):
             ('Video', (('vhs', 'VHS'), ('dvd', 'DVD'))),
         )
         html = """
-        <ul>
-        <li>
-        <label><input name="nestchoice" type="checkbox" value="unknown"> Unknown</label>
-        </li>
-        <li>Audio<ul>
-        <li>
-        <label>
-        <input checked name="nestchoice" type="checkbox" value="vinyl"> Vinyl
-        </label>
-        </li>
-        <li>
-        <label><input name="nestchoice" type="checkbox" value="cd"> CD</label>
-        </li>
-        </ul></li>
-        <li>Video<ul>
-        <li>
-        <label><input name="nestchoice" type="checkbox" value="vhs"> VHS</label>
-        </li>
-        <li>
-        <label>
-        <input checked name="nestchoice" type="checkbox" value="dvd"> DVD
-        </label>
-        </li>
-        </ul></li>
-        </ul>
+        <div>
+        <div> <label><input type="checkbox" name="nestchoice" value="unknown"> Unknown</label></div>
+        <div>
+        <label>Audio</label>
+        <div> <label><input checked type="checkbox" name="nestchoice" value="vinyl"> Vinyl</label></div>
+        <div> <label><input type="checkbox" name="nestchoice" value="cd"> CD</label></div>
+        </div><div>
+        <label>Video</label>
+        <div> <label><input type="checkbox" name="nestchoice" value="vhs"> VHS</label></div>
+        <div> <label><input type="checkbox" name="nestchoice" value="dvd"checked> DVD</label></div>
+        </div>
+        </div>
         """
         self.check_html(self.widget(choices=nested_choices), 'nestchoice', ('vinyl', 'dvd'), html=html)
 
@@ -124,15 +103,15 @@ class CheckboxSelectMultipleTest(WidgetTest):
         """
         choices = [('a', 'A'), ('b', 'B'), ('c', 'C')]
         html = """
-        <ul id="abc">
-        <li>
+        <div id="abc">
+        <div>
         <label for="abc_0"><input checked type="checkbox" name="letters" value="a" id="abc_0"> A</label>
-        </li>
-        <li><label for="abc_1"><input type="checkbox" name="letters" value="b" id="abc_1"> B</label></li>
-        <li>
+        </div>
+        <div><label for="abc_1"><input type="checkbox" name="letters" value="b" id="abc_1"> B</label></div>
+        <div>
         <label for="abc_2"><input checked type="checkbox" name="letters" value="c" id="abc_2"> C</label>
-        </li>
-        </ul>
+        </div>
+        </div>
         """
         self.check_html(self.widget(choices=choices), 'letters', ['a', 'c'], attrs={'id': 'abc'}, html=html)
 
@@ -142,15 +121,15 @@ class CheckboxSelectMultipleTest(WidgetTest):
         """
         widget = CheckboxSelectMultiple(attrs={'id': 'abc'}, choices=[('a', 'A'), ('b', 'B'), ('c', 'C')])
         html = """
-        <ul id="abc">
-        <li>
+        <div id="abc">
+        <div>
         <label for="abc_0"><input checked type="checkbox" name="letters" value="a" id="abc_0"> A</label>
-        </li>
-        <li><label for="abc_1"><input type="checkbox" name="letters" value="b" id="abc_1"> B</label></li>
-        <li>
+        </div>
+        <div><label for="abc_1"><input type="checkbox" name="letters" value="b" id="abc_1"> B</label></div>
+        <div>
         <label for="abc_2"><input checked type="checkbox" name="letters" value="c" id="abc_2"> C</label>
-        </li>
-        </ul>
+        </div>
+        </div>
         """
         self.check_html(widget, 'letters', ['a', 'c'], html=html)
 
@@ -162,11 +141,11 @@ class CheckboxSelectMultipleTest(WidgetTest):
             (1000000, 'One million'),
         ]
         html = """
-        <ul>
-        <li><label><input type="checkbox" name="numbers" value="1"> One</label></li>
-        <li><label><input type="checkbox" name="numbers" value="1000"> One thousand</label></li>
-        <li><label><input type="checkbox" name="numbers" value="1000000"> One million</label></li>
-        </ul>
+        <div>
+        <div><label><input type="checkbox" name="numbers" value="1"> One</label></div>
+        <div><label><input type="checkbox" name="numbers" value="1000"> One thousand</label></div>
+        <div><label><input type="checkbox" name="numbers" value="1000000"> One million</label></div>
+        </div>
         """
         self.check_html(self.widget(choices=choices), 'numbers', None, html=html)
 
@@ -175,10 +154,10 @@ class CheckboxSelectMultipleTest(WidgetTest):
             (datetime.time(12, 0), 'noon'),
         ]
         html = """
-        <ul>
-        <li><label><input type="checkbox" name="times" value="00:00:00"> midnight</label></li>
-        <li><label><input type="checkbox" name="times" value="12:00:00"> noon</label></li>
-        </ul>
+        <div>
+        <div><label><input type="checkbox" name="times" value="00:00:00"> midnight</label></div>
+        <div><label><input type="checkbox" name="times" value="12:00:00"> noon</label></div>
+        </div>
         """
         self.check_html(self.widget(choices=choices), 'times', None, html=html)
 
diff --git a/tests/forms_tests/widget_tests/test_radioselect.py b/tests/forms_tests/widget_tests/test_radioselect.py
index 0f85563a58..41f771e940 100644
--- a/tests/forms_tests/widget_tests/test_radioselect.py
+++ b/tests/forms_tests/widget_tests/test_radioselect.py
@@ -11,15 +11,15 @@ class RadioSelectTest(WidgetTest):
 
     def test_render(self):
         choices = (('', '------'),) + self.beatles
-        self.check_html(self.widget(choices=choices), 'beatle', 'J', html=(
-            """<ul>
-            <li><label><input type="radio" name="beatle" value=""> ------</label></li>
-            <li><label><input checked type="radio" name="beatle" value="J"> John</label></li>
-            <li><label><input type="radio" name="beatle" value="P"> Paul</label></li>
-            <li><label><input type="radio" name="beatle" value="G"> George</label></li>
-            <li><label><input type="radio" name="beatle" value="R"> Ringo</label></li>
-            </ul>"""
-        ))
+        self.check_html(self.widget(choices=choices), 'beatle', 'J', html="""
+            <div>
+            <div><label><input type="radio" name="beatle" value=""> ------</label></div>
+            <div><label><input checked type="radio" name="beatle" value="J"> John</label></div>
+            <div><label><input type="radio" name="beatle" value="P"> Paul</label></div>
+            <div><label><input type="radio" name="beatle" value="G"> George</label></div>
+            <div><label><input type="radio" name="beatle" value="R"> Ringo</label></div>
+            </div>
+        """)
 
     def test_nested_choices(self):
         nested_choices = (
@@ -28,25 +28,23 @@ class RadioSelectTest(WidgetTest):
             ('Video', (('vhs', 'VHS'), ('dvd', 'DVD'))),
         )
         html = """
-        <ul id="media">
-        <li>
-        <label for="media_0"><input id="media_0" name="nestchoice" type="radio" value="unknown"> Unknown</label>
-        </li>
-        <li>Audio<ul id="media_1">
-        <li>
-        <label for="media_1_0"><input id="media_1_0" name="nestchoice" type="radio" value="vinyl"> Vinyl</label>
-        </li>
-        <li><label for="media_1_1"><input id="media_1_1" name="nestchoice" type="radio" value="cd"> CD</label></li>
-        </ul></li>
-        <li>Video<ul id="media_2">
-        <li><label for="media_2_0"><input id="media_2_0" name="nestchoice" type="radio" value="vhs"> VHS</label></li>
-        <li>
-        <label for="media_2_1">
-        <input checked id="media_2_1" name="nestchoice" type="radio" value="dvd"> DVD
-        </label>
-        </li>
-        </ul></li>
-        </ul>
+        <div id="media">
+        <div>
+        <label for="media_0"><input type="radio" name="nestchoice" value="unknown" id="media_0"> Unknown</label></div>
+        <div>
+        <label>Audio</label>
+        <div>
+        <label for="media_1_0"><input type="radio" name="nestchoice" value="vinyl" id="media_1_0"> Vinyl</label></div>
+        <div> <label for="media_1_1"><input type="radio" name="nestchoice" value="cd" id="media_1_1"> CD</label></div>
+        </div><div>
+        <label>Video</label>
+        <div>
+        <label for="media_2_0"><input type="radio" name="nestchoice" value="vhs" id="media_2_0"> VHS</label></div>
+        <div>
+        <label for="media_2_1"><input type="radio" name="nestchoice" value="dvd" id="media_2_1" checked> DVD</label>
+        </div>
+        </div>
+        </div>
         """
         self.check_html(
             self.widget(choices=nested_choices), 'nestchoice', 'dvd',
@@ -60,14 +58,14 @@ class RadioSelectTest(WidgetTest):
         """
         widget = RadioSelect(attrs={'id': 'foo'}, choices=self.beatles)
         html = """
-        <ul id="foo">
-        <li>
+        <div id="foo">
+        <div>
         <label for="foo_0"><input checked type="radio" id="foo_0" value="J" name="beatle"> John</label>
-        </li>
-        <li><label for="foo_1"><input type="radio" id="foo_1" value="P" name="beatle"> Paul</label></li>
-        <li><label for="foo_2"><input type="radio" id="foo_2" value="G" name="beatle"> George</label></li>
-        <li><label for="foo_3"><input type="radio" id="foo_3" value="R" name="beatle"> Ringo</label></li>
-        </ul>
+        </div>
+        <div><label for="foo_1"><input type="radio" id="foo_1" value="P" name="beatle"> Paul</label></div>
+        <div><label for="foo_2"><input type="radio" id="foo_2" value="G" name="beatle"> George</label></div>
+        <div><label for="foo_3"><input type="radio" id="foo_3" value="R" name="beatle"> Ringo</label></div>
+        </div>
         """
         self.check_html(widget, 'beatle', 'J', html=html)
 
@@ -77,29 +75,29 @@ class RadioSelectTest(WidgetTest):
         inputs.
         """
         html = """
-        <ul id="bar">
-        <li>
+        <div id="bar">
+        <div>
         <label for="bar_0"><input checked type="radio" id="bar_0" value="J" name="beatle"> John</label>
-        </li>
-        <li><label for="bar_1"><input type="radio" id="bar_1" value="P" name="beatle"> Paul</label></li>
-        <li><label for="bar_2"><input type="radio" id="bar_2" value="G" name="beatle"> George</label></li>
-        <li><label for="bar_3"><input type="radio" id="bar_3" value="R" name="beatle"> Ringo</label></li>
-        </ul>
+        </div>
+        <div><label for="bar_1"><input type="radio" id="bar_1" value="P" name="beatle"> Paul</label></div>
+        <div><label for="bar_2"><input type="radio" id="bar_2" value="G" name="beatle"> George</label></div>
+        <div><label for="bar_3"><input type="radio" id="bar_3" value="R" name="beatle"> Ringo</label></div>
+        </div>
         """
         self.check_html(self.widget(choices=self.beatles), 'beatle', 'J', attrs={'id': 'bar'}, html=html)
 
     def test_class_attrs(self):
         """
-        The <ul> in the multiple_input.html widget template include the class
+        The <div> in the multiple_input.html widget template include the class
         attribute.
         """
         html = """
-        <ul class="bar">
-        <li><label><input checked type="radio" class="bar" value="J" name="beatle"> John</label></li>
-        <li><label><input type="radio" class="bar" value="P" name="beatle"> Paul</label></li>
-        <li><label><input type="radio" class="bar" value="G" name="beatle"> George</label></li>
-        <li><label><input type="radio" class="bar" value="R" name="beatle"> Ringo</label></li>
-        </ul>
+        <div class="bar">
+        <div><label><input checked type="radio" class="bar" value="J" name="beatle"> John</label></div>
+        <div><label><input type="radio" class="bar" value="P" name="beatle"> Paul</label></div>
+        <div><label><input type="radio" class="bar" value="G" name="beatle"> George</label></div>
+        <div><label><input type="radio" class="bar" value="R" name="beatle"> Ringo</label></div>
+        </div>
         """
         self.check_html(self.widget(choices=self.beatles), 'beatle', 'J', attrs={'class': 'bar'}, html=html)
 
@@ -111,11 +109,11 @@ class RadioSelectTest(WidgetTest):
             (1000000, 'One million'),
         ]
         html = """
-        <ul>
-        <li><label><input type="radio" name="number" value="1"> One</label></li>
-        <li><label><input type="radio" name="number" value="1000"> One thousand</label></li>
-        <li><label><input type="radio" name="number" value="1000000"> One million</label></li>
-        </ul>
+        <div>
+        <div><label><input type="radio" name="number" value="1"> One</label></div>
+        <div><label><input type="radio" name="number" value="1000"> One thousand</label></div>
+        <div><label><input type="radio" name="number" value="1000000"> One million</label></div>
+        </div>
         """
         self.check_html(self.widget(choices=choices), 'number', None, html=html)
 
@@ -124,22 +122,22 @@ class RadioSelectTest(WidgetTest):
             (datetime.time(12, 0), 'noon'),
         ]
         html = """
-        <ul>
-        <li><label><input type="radio" name="time" value="00:00:00"> midnight</label></li>
-        <li><label><input type="radio" name="time" value="12:00:00"> noon</label></li>
-        </ul>
+        <div>
+        <div><label><input type="radio" name="time" value="00:00:00"> midnight</label></div>
+        <div><label><input type="radio" name="time" value="12:00:00"> noon</label></div>
+        </div>
         """
         self.check_html(self.widget(choices=choices), 'time', None, html=html)
 
     def test_render_as_subwidget(self):
         """A RadioSelect as a subwidget of MultiWidget."""
         choices = (('', '------'),) + self.beatles
-        self.check_html(MultiWidget([self.widget(choices=choices)]), 'beatle', ['J'], html=(
-            """<ul>
-            <li><label><input type="radio" name="beatle_0" value=""> ------</label></li>
-            <li><label><input checked type="radio" name="beatle_0" value="J"> John</label></li>
-            <li><label><input type="radio" name="beatle_0" value="P"> Paul</label></li>
-            <li><label><input type="radio" name="beatle_0" value="G"> George</label></li>
-            <li><label><input type="radio" name="beatle_0" value="R"> Ringo</label></li>
-            </ul>"""
-        ))
+        self.check_html(MultiWidget([self.widget(choices=choices)]), 'beatle', ['J'], html="""
+            <div>
+            <div><label><input type="radio" name="beatle_0" value=""> ------</label></div>
+            <div><label><input checked type="radio" name="beatle_0" value="J"> John</label></div>
+            <div><label><input type="radio" name="beatle_0" value="P"> Paul</label></div>
+            <div><label><input type="radio" name="beatle_0" value="G"> George</label></div>
+            <div><label><input type="radio" name="beatle_0" value="R"> Ringo</label></div>
+            </div>
+        """)