mirror of https://github.com/django/django.git
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'
|
||||
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
|
||||
input_type = 'checkbox'
|
||||
template_name = 'django/forms/widgets/checkbox_select.html'
|
||||
|
@ -779,15 +789,6 @@ class CheckboxSelectMultiple(ChoiceWidget):
|
|||
# never known if the value is actually omitted.
|
||||
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):
|
||||
"""
|
||||
|
|
|
@ -613,13 +613,14 @@ Java</label></li>
|
|||
</ul>"""
|
||||
)
|
||||
|
||||
# When RadioSelect is used with auto_id, and the whole form is printed using
|
||||
# either as_table() or as_ul(), the label for the RadioSelect will point to the
|
||||
# ID of the *first* radio button.
|
||||
# When RadioSelect is used with auto_id, and the whole form is printed
|
||||
# using either as_table() or as_ul(), the label for the RadioSelect
|
||||
# will **not** point to the ID of the *first* radio button to improve
|
||||
# accessibility for screen reader users.
|
||||
self.assertHTMLEqual(
|
||||
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_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>
|
||||
Python</label></li>
|
||||
<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(
|
||||
f.as_ul(),
|
||||
"""<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>
|
||||
Python</label></li>
|
||||
<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(
|
||||
f.as_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>
|
||||
Python</label></li>
|
||||
<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()
|
||||
self.assertHTMLEqual(
|
||||
f.as_p(),
|
||||
'<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">'
|
||||
'<input type="radio" id="id_somechoice_0" value="\xc5" name="somechoice" required> '
|
||||
|
@ -76,7 +76,7 @@ class FormsI18nTests(SimpleTestCase):
|
|||
'<ul class="errorlist"><li>'
|
||||
'\u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c'
|
||||
'\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">'
|
||||
'<input type="radio" id="id_somechoice_0" value="\xc5" name="somechoice" required> '
|
||||
'En tied\xe4</label></li>\n'
|
||||
|
|
Loading…
Reference in New Issue