Refs #32338 -- Removed 'for ="..."' from RadioSelect's <label>.
This improves accessibility for screen reader users. Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>
This commit is contained in:
parent
4f0a034b9e
commit
b9e872b593
|
@ -762,8 +762,18 @@ class RadioSelect(ChoiceWidget):
|
||||||
template_name = 'django/forms/widgets/radio.html'
|
template_name = 'django/forms/widgets/radio.html'
|
||||||
option_template_name = 'django/forms/widgets/radio_option.html'
|
option_template_name = 'django/forms/widgets/radio_option.html'
|
||||||
|
|
||||||
|
def id_for_label(self, id_, index=None):
|
||||||
|
"""
|
||||||
|
Don't include for="field_0" in <label> to improve accessibility when
|
||||||
|
using a screen reader, in addition clicking such a label would toggle
|
||||||
|
the first input.
|
||||||
|
"""
|
||||||
|
if index is None:
|
||||||
|
return ''
|
||||||
|
return super().id_for_label(id_, index)
|
||||||
|
|
||||||
class CheckboxSelectMultiple(ChoiceWidget):
|
|
||||||
|
class CheckboxSelectMultiple(RadioSelect):
|
||||||
allow_multiple_selected = True
|
allow_multiple_selected = True
|
||||||
input_type = 'checkbox'
|
input_type = 'checkbox'
|
||||||
template_name = 'django/forms/widgets/checkbox_select.html'
|
template_name = 'django/forms/widgets/checkbox_select.html'
|
||||||
|
@ -779,15 +789,6 @@ class CheckboxSelectMultiple(ChoiceWidget):
|
||||||
# never known if the value is actually omitted.
|
# never known if the value is actually omitted.
|
||||||
return False
|
return False
|
||||||
|
|
||||||
def id_for_label(self, id_, index=None):
|
|
||||||
"""
|
|
||||||
Don't include for="field_0" in <label> because clicking such a label
|
|
||||||
would toggle the first checkbox.
|
|
||||||
"""
|
|
||||||
if index is None:
|
|
||||||
return ''
|
|
||||||
return super().id_for_label(id_, index)
|
|
||||||
|
|
||||||
|
|
||||||
class MultiWidget(Widget):
|
class MultiWidget(Widget):
|
||||||
"""
|
"""
|
||||||
|
|
|
@ -613,13 +613,14 @@ Java</label></li>
|
||||||
</ul>"""
|
</ul>"""
|
||||||
)
|
)
|
||||||
|
|
||||||
# When RadioSelect is used with auto_id, and the whole form is printed using
|
# When RadioSelect is used with auto_id, and the whole form is printed
|
||||||
# either as_table() or as_ul(), the label for the RadioSelect will point to the
|
# using either as_table() or as_ul(), the label for the RadioSelect
|
||||||
# ID of the *first* radio button.
|
# will **not** point to the ID of the *first* radio button to improve
|
||||||
|
# accessibility for screen reader users.
|
||||||
self.assertHTMLEqual(
|
self.assertHTMLEqual(
|
||||||
f.as_table(),
|
f.as_table(),
|
||||||
"""<tr><th><label for="id_name">Name:</label></th><td><input type="text" name="name" id="id_name" required></td></tr>
|
"""<tr><th><label for="id_name">Name:</label></th><td><input type="text" name="name" id="id_name" required></td></tr>
|
||||||
<tr><th><label for="id_language_0">Language:</label></th><td><ul id="id_language">
|
<tr><th><label>Language:</label></th><td><ul id="id_language">
|
||||||
<li><label for="id_language_0"><input type="radio" id="id_language_0" value="P" name="language" required>
|
<li><label for="id_language_0"><input type="radio" id="id_language_0" value="P" name="language" required>
|
||||||
Python</label></li>
|
Python</label></li>
|
||||||
<li><label for="id_language_1"><input type="radio" id="id_language_1" value="J" name="language" required>
|
<li><label for="id_language_1"><input type="radio" id="id_language_1" value="J" name="language" required>
|
||||||
|
@ -629,7 +630,7 @@ Java</label></li>
|
||||||
self.assertHTMLEqual(
|
self.assertHTMLEqual(
|
||||||
f.as_ul(),
|
f.as_ul(),
|
||||||
"""<li><label for="id_name">Name:</label> <input type="text" name="name" id="id_name" required></li>
|
"""<li><label for="id_name">Name:</label> <input type="text" name="name" id="id_name" required></li>
|
||||||
<li><label for="id_language_0">Language:</label> <ul id="id_language">
|
<li><label>Language:</label> <ul id="id_language">
|
||||||
<li><label for="id_language_0"><input type="radio" id="id_language_0" value="P" name="language" required>
|
<li><label for="id_language_0"><input type="radio" id="id_language_0" value="P" name="language" required>
|
||||||
Python</label></li>
|
Python</label></li>
|
||||||
<li><label for="id_language_1"><input type="radio" id="id_language_1" value="J" name="language" required>
|
<li><label for="id_language_1"><input type="radio" id="id_language_1" value="J" name="language" required>
|
||||||
|
@ -639,7 +640,7 @@ Java</label></li>
|
||||||
self.assertHTMLEqual(
|
self.assertHTMLEqual(
|
||||||
f.as_p(),
|
f.as_p(),
|
||||||
"""<p><label for="id_name">Name:</label> <input type="text" name="name" id="id_name" required></p>
|
"""<p><label for="id_name">Name:</label> <input type="text" name="name" id="id_name" required></p>
|
||||||
<p><label for="id_language_0">Language:</label> <ul id="id_language">
|
<p><label>Language:</label> <ul id="id_language">
|
||||||
<li><label for="id_language_0"><input type="radio" id="id_language_0" value="P" name="language" required>
|
<li><label for="id_language_0"><input type="radio" id="id_language_0" value="P" name="language" required>
|
||||||
Python</label></li>
|
Python</label></li>
|
||||||
<li><label for="id_language_1"><input type="radio" id="id_language_1" value="J" name="language" required>
|
<li><label for="id_language_1"><input type="radio" id="id_language_1" value="J" name="language" required>
|
||||||
|
|
|
@ -56,7 +56,7 @@ class FormsI18nTests(SimpleTestCase):
|
||||||
f = SomeForm()
|
f = SomeForm()
|
||||||
self.assertHTMLEqual(
|
self.assertHTMLEqual(
|
||||||
f.as_p(),
|
f.as_p(),
|
||||||
'<p><label for="id_somechoice_0">\xc5\xf8\xdf:</label>'
|
'<p><label>\xc5\xf8\xdf:</label>'
|
||||||
'<ul id="id_somechoice">\n'
|
'<ul id="id_somechoice">\n'
|
||||||
'<li><label for="id_somechoice_0">'
|
'<li><label for="id_somechoice_0">'
|
||||||
'<input type="radio" id="id_somechoice_0" value="\xc5" name="somechoice" required> '
|
'<input type="radio" id="id_somechoice_0" value="\xc5" name="somechoice" required> '
|
||||||
|
@ -76,7 +76,7 @@ class FormsI18nTests(SimpleTestCase):
|
||||||
'<ul class="errorlist"><li>'
|
'<ul class="errorlist"><li>'
|
||||||
'\u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c'
|
'\u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c'
|
||||||
'\u043d\u043e\u0435 \u043f\u043e\u043b\u0435.</li></ul>\n'
|
'\u043d\u043e\u0435 \u043f\u043e\u043b\u0435.</li></ul>\n'
|
||||||
'<p><label for="id_somechoice_0">\xc5\xf8\xdf:</label>'
|
'<p><label>\xc5\xf8\xdf:</label>'
|
||||||
' <ul id="id_somechoice">\n<li><label for="id_somechoice_0">'
|
' <ul id="id_somechoice">\n<li><label for="id_somechoice_0">'
|
||||||
'<input type="radio" id="id_somechoice_0" value="\xc5" name="somechoice" required> '
|
'<input type="radio" id="id_somechoice_0" value="\xc5" name="somechoice" required> '
|
||||||
'En tied\xe4</label></li>\n'
|
'En tied\xe4</label></li>\n'
|
||||||
|
|
Loading…
Reference in New Issue