mirror of
https://github.com/django/django.git
synced 2025-10-24 06:06:09 +00:00
Refs #32338 -- Made RadioSelect/CheckboxSelectMultiple render in <div> tags.
This improves accessibility for screen reader users.
This commit is contained in:
David Smith
committed by
Mariusz Felisiak
Mariusz Felisiak
parent
a5cb1ef6eb
commit
5942ab5eb1
@@ -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)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user