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

This improves accessibility for screen reader users.

1 files changed, 65 insertions, 67 deletions

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>
+        """)