mirror of
https://github.com/django/django.git
synced 2025-10-24 06:06:09 +00:00
Fixed #32820 -- Added aria-invalid="true" to fields with errors.
Co-authored-by: Demetris Stavrou <demestav@gmail.com> Co-authored-by: David Smith <smithdc@gmail.com>
This commit is contained in:
committed by
Mariusz Felisiak
parent
fff14736f1
commit
10725a3187
@@ -992,10 +992,20 @@ method you're using:
|
||||
... }
|
||||
>>> f = ContactForm(data, auto_id=False)
|
||||
>>> print(f)
|
||||
<div>Subject:<ul class="errorlist"><li>This field is required.</li></ul><input type="text" name="subject" maxlength="100" required></div>
|
||||
<div>Message:<textarea name="message" cols="40" rows="10" required>Hi there</textarea></div>
|
||||
<div>Sender:<ul class="errorlist"><li>Enter a valid email address.</li></ul><input type="email" name="sender" value="invalid email address" required></div>
|
||||
<div>Cc myself:<input type="checkbox" name="cc_myself" checked></div>
|
||||
<div>Subject:
|
||||
<ul class="errorlist"><li>This field is required.</li></ul>
|
||||
<input type="text" name="subject" maxlength="100" required aria-invalid="true">
|
||||
</div>
|
||||
<div>Message:
|
||||
<textarea name="message" cols="40" rows="10" required>Hi there</textarea>
|
||||
</div>
|
||||
<div>Sender:
|
||||
<ul class="errorlist"><li>Enter a valid email address.</li></ul>
|
||||
<input type="email" name="sender" value="invalid email address" required aria-invalid="true">
|
||||
</div>
|
||||
<div>Cc myself:
|
||||
<input type="checkbox" name="cc_myself" checked>
|
||||
</div>
|
||||
|
||||
.. _ref-forms-error-list-format:
|
||||
|
||||
@@ -1154,7 +1164,7 @@ Attributes of ``BoundField``
|
||||
>>> data = {"subject": "hi", "message": "", "sender": "", "cc_myself": ""}
|
||||
>>> f = ContactForm(data, auto_id=False)
|
||||
>>> print(f["message"])
|
||||
<input type="text" name="message" required>
|
||||
<input type="text" name="message" required aria-invalid="true">
|
||||
>>> f["message"].errors
|
||||
['This field is required.']
|
||||
>>> print(f["message"].errors)
|
||||
@@ -1166,6 +1176,13 @@ Attributes of ``BoundField``
|
||||
>>> str(f["subject"].errors)
|
||||
''
|
||||
|
||||
When rendering a field with errors, ``aria-invalid="true"`` will be set on
|
||||
the field's widget to indicate there is an error to screen reader users.
|
||||
|
||||
.. versionchanged:: 5.0
|
||||
|
||||
The ``aria-invalid="true"`` was added when a field has errors.
|
||||
|
||||
.. attribute:: BoundField.field
|
||||
|
||||
The form :class:`~django.forms.Field` instance from the form class that
|
||||
|
||||
@@ -196,9 +196,17 @@ and the HTML output will include any validation errors:
|
||||
>>> default_data = {"name": "Your name", "url": "http://"}
|
||||
>>> f = CommentForm(default_data, auto_id=False)
|
||||
>>> print(f)
|
||||
<div>Name:<input type="text" name="name" value="Your name" required></div>
|
||||
<div>Url:<ul class="errorlist"><li>Enter a valid URL.</li></ul><input type="url" name="url" value="http://" required></div>
|
||||
<div>Comment:<ul class="errorlist"><li>This field is required.</li></ul><input type="text" name="comment" required></div>
|
||||
<div>Name:
|
||||
<input type="text" name="name" value="Your name" required>
|
||||
</div>
|
||||
<div>Url:
|
||||
<ul class="errorlist"><li>Enter a valid URL.</li></ul>
|
||||
<input type="url" name="url" value="http://" required aria-invalid="true">
|
||||
</div>
|
||||
<div>Comment:
|
||||
<ul class="errorlist"><li>This field is required.</li></ul>
|
||||
<input type="text" name="comment" required aria-invalid="true">
|
||||
</div>
|
||||
|
||||
This is why ``initial`` values are only displayed for unbound forms. For bound
|
||||
forms, the HTML output will use the bound data.
|
||||
|
||||
@@ -310,6 +310,9 @@ Forms
|
||||
fields with their help text, the form field now includes the
|
||||
``aria-describedby`` HTML attribute.
|
||||
|
||||
* In order to improve accessibility, the invalid form field now includes the
|
||||
``aria-invalid="true"`` HTML attribute.
|
||||
|
||||
Generic Views
|
||||
~~~~~~~~~~~~~
|
||||
|
||||
|
||||
Reference in New Issue
Block a user