[Django] #32820: Django forms - fields’ errors should be programmatically associated with fields
Django
fields
-------------------------------------+-------------------------------------
Reporter: Thibaud | Owner: nobody
Colas |
Type: Bug | Status: new
Component: Forms | Version: 3.2
Severity: Normal | Keywords: accessibility, ui,
Triage Stage: | forms
Unreviewed | Has patch: 0
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 0
UI/UX: 0 |
-------------------------------------+-------------------------------------
Related: [https://code.djangoproject.com/ticket/32819 #32819]. This could
be worth fixing at the same time, although I would expect this issue
shouldn’t require as breaking of a change to fix.
Django currently displays errors above fields in its forms rendering:
{{{
<ul class="errorlist">
<li>This field is required.</li>
</ul>
<p>
<label for="id_duration_required">Duration required:</label>
<input type="text" name="duration_required" required=""
id="id_duration_required">
<span class="helptext">Help</span>
</p>
}}}
One thing this is missing is a way to programmatically indicate the field
is in error – currently this can only be inferred visually because the
error messages are displayed above the field. This is fail of WCAG 2.1
level A [https://www.w3.org/WAI/WCAG21/Understanding/error-identification
3.3.1: Error Identification]. The most common way to do this
programmatically is to use `aria-invalid="true"` on the field, as
demonstrated in the non-normative
[https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA21 technique ARIA21]:
{{{
<input type="text" name="duration_required" required=""
id="id_duration_required" aria-invalid="true">
}}}
Here is the result in VoiceOver on Safari – announcing "invalid data"
after the field label and required state:
Screenshot of the VoiceOver text-to-speech output, announcing "Email
required: required invalid data edit text"
--
Ticket URL: <https://code.djangoproject.com/ticket/32820>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
Django
fields
-------------------------------------+-------------------------------------
Type: Bug | Status: new
Component: Forms | Version: 3.2
Keywords: accessibility, ui, | Triage Stage:
forms | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
* Attachment "email-required-aria-invalid.png" added.
Django
fields
-------------------------------------+-------------------------------------
Type: Bug | Status: new
Component: Forms | Version: 3.2
Keywords: accessibility, ui, | Triage Stage:
forms | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Old description:
New description:
[[Image(https://code.djangoproject.com/raw-attachment/ticket/32820/email-
required-aria-invalid.png)]]
--
--
Ticket URL: <https://code.djangoproject.com/ticket/32820#comment:1>
Django
fields
-------------------------------------+-------------------------------------
Type: Bug | Status: new
Component: Forms | Version: 3.2
Keywords: accessibility, ui, | Triage Stage: Accepted
forms |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
* stage: Unreviewed => Accepted
--
Ticket URL: <https://code.djangoproject.com/ticket/32820#comment:2>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: nobody
Component: Forms | Version: 3.2
Keywords: accessibility, ui, | Triage Stage: Accepted
forms |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
--
Ticket URL: <https://code.djangoproject.com/ticket/32820#comment:3>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: nobody
Component: Forms | Version: 3.2
Keywords: accessibility, ui, | Triage Stage: Accepted
forms |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Comment (by Chandu-4444):
Hey, can I work on this? I'm a beginner here, any kind of help would be
greatly appreciated.
Thanks,
Kiran
--
Ticket URL: <https://code.djangoproject.com/ticket/32820#comment:4>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: nobody
Component: Forms | Version: 3.2
Keywords: accessibility, ui, | Triage Stage: Accepted
forms |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Comment (by Tom Carrick):
Kiran, assign yourself the ticket if you want to take it. If you need
help, I would first read
https://docs.djangoproject.com/en/3.2/internals/contributing/ and try to
get the tests passing at least.
You would probably need to find where the HTML for these forms are
generated. I think
https://github.com/django/django/tree/main/django/forms/templates/django/forms/widgets
might be a good place to start. Then find out the best way to tell if the
field is invalid and the best place to add the attribute.
If you get stuck, you could try posting on the forum or the django-
developers mailing list.
--
Ticket URL: <https://code.djangoproject.com/ticket/32820#comment:5>
Django
-------------------------------------+-------------------------------------
Type: Bug | Status: assigned
Component: Forms | Version: 3.2
Severity: Normal | Resolution:
Keywords: accessibility, ui, | Triage Stage: Accepted
forms |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
* owner: nobody => kackey0-1
* status: new => assigned
Comment:
Let me work on this.
--
Ticket URL: <https://code.djangoproject.com/ticket/32820#comment:6>
Django
-------------------------------------+-------------------------------------
Type: Bug | Status: new
Component: Forms | Version: 3.2
Keywords: accessibility, ui, | Triage Stage: Accepted
forms |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
* owner: kackey0-1 => (none)
* status: assigned => new
--
Ticket URL: <https://code.djangoproject.com/ticket/32820#comment:7>
Django
-------------------------------------+-------------------------------------
| Bansal
Type: Bug | Status: assigned
Component: Forms | Version: 3.2
Severity: Normal | Resolution:
Keywords: accessibility, ui, | Triage Stage: Accepted
forms |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
* owner: (none) => Kapil Bansal
* status: new => assigned
--
Ticket URL: <https://code.djangoproject.com/ticket/32820#comment:8>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Kapil
| Bansal
Type: Bug | Status: assigned
Severity: Normal | Resolution:
Keywords: accessibility, ui, | Triage Stage: Accepted
forms |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Comment (by Kapil Bansal):
If I am not wrong, we need to remove the errorlist and use aria_techniques
instead?
--
Ticket URL: <https://code.djangoproject.com/ticket/32820#comment:9>
Django
-------------------------------------+-------------------------------------
| Stavrou
Type: Bug | Status: assigned
Component: Forms | Version: 3.2
Severity: Normal | Resolution:
Keywords: accessibility, ui, | Triage Stage: Accepted
forms |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
* owner: Kapil Bansal => Demetris Stavrou
Comment:
I will give this a try since there is inactivity.
--
Ticket URL: <https://code.djangoproject.com/ticket/32820#comment:10>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Demetris
| Stavrou
Type: Bug | Status: assigned
Severity: Normal | Resolution:
Keywords: accessibility, ui, | Triage Stage: Accepted
forms |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Comment (by Thibaud Colas):
Note based on recent research for PR #15036
(https://github.com/django/django/pull/15036#issuecomment-1008738687):
- I still think this is a _Bug_ (WCAG 2.1 conformance fail) as Django
stands currently, however if/when ticket #32819 is tackled, we should mark
this ticket as a _New feature_, as contrary to what I thought `aria-
invalid="true"` isn’t required for conformance when `aria-describedby`
already points to an error message. If the error message can’t be
identified as such, then the bug to fix would be to make the error
messages unambiguous, which is a different issue.
- Even though I would expect fixing this to be a straightforward
improvement for almost all Django implementers, it’ll change how forms are
announced to screen reader users, so it would be valid to consider this as
a breaking change.
--
Ticket URL: <https://code.djangoproject.com/ticket/32820#comment:11>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Demetris
| Stavrou
Type: Bug | Status: assigned
Severity: Normal | Resolution:
Keywords: accessibility, ui, | Triage Stage: Accepted
forms |
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 1
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
* needs_better_patch: 0 => 1
* has_patch: 0 => 1
--
Ticket URL: <https://code.djangoproject.com/ticket/32820#comment:12>
Django
-------------------------------------+-------------------------------------
| Jerše
Type: Bug | Status: assigned
Component: Forms | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, ui, | Triage Stage: Accepted
forms |
Needs tests: 0 | Patch needs improvement: 1
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
* owner: Demetris Stavrou => Gregor Jerše
* version: 3.2 => dev
--
Ticket URL: <https://code.djangoproject.com/ticket/32820#comment:13>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Gregor
| Jerše
Type: Bug | Status: assigned
Component: Forms | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, ui, | Triage Stage: Accepted
forms |
Needs tests: 0 | Patch needs improvement: 1
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Comment (by Natalia Bidart):
There is a new [https://github.com/django/django/pull/16933 PR here]
--
Ticket URL: <https://code.djangoproject.com/ticket/32820#comment:14>
Django
-------------------------------------+-------------------------------------
| Smith
Type: Bug | Status: assigned
Component: Forms | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, ui, | Triage Stage: Accepted
forms |
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
* owner: Gregor Jerše => David Smith
* needs_better_patch: 1 => 0
--
Ticket URL: <https://code.djangoproject.com/ticket/32820#comment:15>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: David
| Smith
Component: Forms | Version: dev
Severity: Normal | Resolution: fixed
Keywords: accessibility, ui, | Triage Stage: Accepted
forms |
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
* status: assigned => closed
* resolution: => fixed
Comment:
In [changeset:"10725a31879c55ba8d92aaa3275093d136957bef" 10725a3]:
{{{
#!CommitTicketReference repository=""
revision="10725a31879c55ba8d92aaa3275093d136957bef"
Fixed #32820 -- Added aria-invalid="true" to fields with errors.
Co-authored-by: Demetris Stavrou <deme...@gmail.com>
Co-authored-by: David Smith <smi...@gmail.com>
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/32820#comment:16>