#35940: SelectFilter choose/remove buttons missing keyboard-friendly state
management
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: (none)
Type: Bug | Status: new
Component: contrib.admin | Version: 5.1
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
aria, button, html, javascript, | Unreviewed
keyboard, screen reader, |
semantic, disabled, SelectFilter2 |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Description changed by Thibaud Colas:
Old description:
> The SelectFilter2 JS code in use for user permissions management and
> other parts of the admin is lacking a "disabled" state for its buttons,
> for keyboard and screen reader users specifically.
>
> See a
> [https://thibaudcolas.github.io/django_admin_tests/latest/english/admin/auth/user/1/change/#fieldset-0-2-heading
> demo page with this widget]. The problem can be reproduced by tabbing to
> the buttons. This shouldn’t be possible when they are in their "disabled"
> state:
>
> For keyboard users this means two unexpected / unnecessary tab stops when
> moving through the form. For screen reader users, the buttons will behave
> as if they were functional even though nothing happens when pressing
> them.
>
> ---
>
> The best solution here will be to switch to semantic `<button
> type="button">` elements, and their `disabled` attributes. This needs to
> be done for the four "add/remove" buttons:
>
> - "Choose" (arrow right)
> - "Remove" (arrow left)
> - "Choose all"
> - "Remove all"
New description:
The SelectFilter2 JS code in use for user permissions management and other
parts of the admin is lacking a "disabled" state for its buttons, for
keyboard and screen reader users specifically.
See a
[https://thibaudcolas.github.io/django_admin_tests/latest/english/admin/auth/user/1/change/#fieldset-0-2-heading
demo page with this widget]. The problem can be reproduced by tabbing to
the buttons. This shouldn’t be possible when they are in their "disabled"
state:
[[Image(https://code.djangoproject.com/raw-attachment/ticket/35940/35940
-select-filter.webp)]]
For keyboard users this means two unexpected / unnecessary tab stops when
moving through the form. For screen reader users, the buttons will behave
as if they were functional even though nothing happens when pressing them.
---
The best solution here will be to use the `<button>` elements’ `disabled`
attribute instead of the CSS `active` class. This needs to be done for the
four "add/remove" buttons:
- "Choose" (arrow right)
- "Remove" (arrow left)
- "Choose all"
- "Remove all"
Here is the relevant code:
[https://github.com/django/django/blob/857b1048d53ebf5fc5581c110e85c212b81ca83a/django/contrib/admin/static/admin/js/SelectFilter2.js#L248-L258
SelectedFilter2.js: SelectedFilter.refresh_icons]
--
--
Ticket URL: <https://code.djangoproject.com/ticket/35940#comment:1>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
--
You received this message because you are subscribed to the Google Groups
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion visit
https://groups.google.com/d/msgid/django-updates/0107019365c84962-9aef2f30-39f3-40ba-a8de-910bfe22839a-000000%40eu-central-1.amazonses.com.
