[Django] #36509: Missing label on input fields in tables

[Django]

#36509: Missing label on input fields in tables
------------------------------+-----------------------------------------
Reporter: Sander Claus | Type: Bug
Status: new | Component: Uncategorized
Version: 5.2 | Severity: Normal
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
------------------------------+-----------------------------------------
Editable fields in the tables are missing a label for users using
assisting technologies like screen readers.

Example: the dropdown in the `Type` column and date selection field in the
`Release Date` column.
https://django-admin-
tests.netlify.app/django_admin_tests/latest/english/admin/demo/release/

The columns have a title on top, but this is not associated with the
individual field elements.

Axe has flagged this as an accessibility issue related to the `select-
name` rule:
https://dequeuniversity.com/rules/axe/4.10/select-name

This seems to be a failure of `WCAG SC 4.1.2 Name, Role, Value`:
https://www.w3.org/WAI/WCAG22/quickref/#name-role-value
--
Ticket URL: <https://code.djangoproject.com/ticket/36509>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#36509: Missing label on input fields in tables

-------------------------------------+-------------------------------------
Reporter: Sander Claus | Owner: (none)
Type: Bug | Status: new
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
changelist, ux, wcag |

Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1

-------------------------------------+-------------------------------------
Changes (by Thibaud Colas):

* cc: Thibaud Colas (added)
* component: Uncategorized => contrib.admin
* keywords: => accessibility, changelist, ux, wcag
* stage: Unreviewed => Accepted


Old description:

> Editable fields in the tables are missing a label for users using
> assisting technologies like screen readers.
>
> Example: the dropdown in the `Type` column and date selection field in
> the `Release Date` column.
> https://django-admin-
> tests.netlify.app/django_admin_tests/latest/english/admin/demo/release/
>
> The columns have a title on top, but this is not associated with the
> individual field elements.
>
> Axe has flagged this as an accessibility issue related to the `select-
> name` rule:
> https://dequeuniversity.com/rules/axe/4.10/select-name
>
> This seems to be a failure of `WCAG SC 4.1.2 Name, Role, Value`:
> https://www.w3.org/WAI/WCAG22/quickref/#name-role-value

New description:

Editable fields in the tables are missing a label for users using
assisting technologies like screen readers.

Example: the dropdown in the `Type` column and date selection field in the
`Release Date` column.
https://django-admin-
tests.netlify.app/django_admin_tests/latest/english/admin/demo/release/

The columns have a title on top, but this is not associated with the
individual field elements.

Axe has flagged this as an accessibility issue related to the

[https://dequeuniversity.com/rules/axe/4.10/select-name select-name rule].

This seems to be a failure of [https://www.w3.org/WAI/WCAG22/quickref
/#name-role-value WCAG SC 4.1.2 Name, Role, Value]

--
Comment:

Thank you, I believe this hasn’t been reported before. Not sure what the
fix looks like with Django’s admin implementation but in HTML that’s most
likely an extra `aria-labelledby` or `aria-label` for those elements.
--
Ticket URL: <https://code.djangoproject.com/ticket/36509#comment:1>

[Django]

#36509: Missing label on input fields in tables
-------------------------------------+-------------------------------------

Reporter: Sander Claus | Owner: Sander
| Claus
Type: Bug | Status: assigned

Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
changelist, ux, wcag |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Changes (by Sander Claus):

* owner: (none) => Sander Claus
* status: new => assigned

--
Ticket URL: <https://code.djangoproject.com/ticket/36509#comment:2>

[Django]

#36509: Missing label on input fields in tables
-------------------------------------+-------------------------------------
Reporter: Sander Claus | Owner: Sander
| Claus
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
changelist, ux, wcag |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Changes (by Antoliny):

* cc: Antoliny (added)

--
Ticket URL: <https://code.djangoproject.com/ticket/36509#comment:3>

[Django]

#36509: Missing label on input fields in tables
-------------------------------------+-------------------------------------
Reporter: Sander Claus | Owner: Sander
| Claus
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
changelist, ux, wcag |

Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Changes (by Sander Claus):

* has_patch: 0 => 1

Comment:

[https://github.com/django/django/pull/19655 PR] created
--
Ticket URL: <https://code.djangoproject.com/ticket/36509#comment:4>

[Django]

#36509: Missing label on input fields in tables
-------------------------------------+-------------------------------------
Reporter: Sander Claus | Owner: Sander
| Claus
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
changelist, ux, wcag |
Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 1

Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Changes (by Sarah Boyce):

* needs_better_patch: 0 => 1

--
Ticket URL: <https://code.djangoproject.com/ticket/36509#comment:5>

[Django]

#36509: Missing label on input fields in tables
-------------------------------------+-------------------------------------
Reporter: Sander Claus | Owner:

| jafarkhan83

Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
changelist, ux, wcag |
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 1
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Changes (by jafarkhan83):

* owner: Sander Claus => jafarkhan83

Comment:

I’ve been working on this ticket and implemented a prototype to address
missing labels on inputs in admin changelist tables.
My approach is:
Added an id attribute to each table header (id is header field name).
Added an id to each row header using the object PK.
Updated items_for_results() to render form widgets with aria-labelledby,
referencing both the row header and column header IDs.
It will work for all editable fields.
--
Ticket URL: <https://code.djangoproject.com/ticket/36509#comment:6>

[Django]

#36509: Missing label on input fields in tables
-------------------------------------+-------------------------------------
Reporter: Sander Claus | Owner:
| jafarkhan83
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.2
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
changelist, ux, wcag |
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 1
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Comment (by jafarkhan83):

https://github.com/django/django/pull/20563
--
Ticket URL: <https://code.djangoproject.com/ticket/36509#comment:7>