[Django] #35940: SelectFilter choose/remove buttons missing keyboard-friendly state management

[Django]

#35940: SelectFilter choose/remove buttons missing keyboard-friendly state
management
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Type: Bug
Status: new | Component:
| contrib.admin
Version: 5.1 | Severity: Normal
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
-------------------------------------+-------------------------------------
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"
--
Ticket URL: <https://code.djangoproject.com/ticket/35940>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#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
-------------------------------------+-------------------------------------

Changes (by Thibaud Colas):

* Attachment "35940-select-filter.png" added.

[Django]

#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
-------------------------------------+-------------------------------------
Changes (by Thibaud Colas):

* Attachment "35940-select-filter.2.png" added.

[Django]

#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
-------------------------------------+-------------------------------------
Changes (by Thibaud Colas):

* Attachment "35940-select-filter.3.png" added.

[Django]

#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
-------------------------------------+-------------------------------------
Changes (by Thibaud Colas):

* Attachment "35940-select-filter.3.png" removed.

[Django]

#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
-------------------------------------+-------------------------------------
Changes (by Thibaud Colas):

* Attachment "35940-select-filter.2.png" removed.

[Django]

#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
-------------------------------------+-------------------------------------
Changes (by Thibaud Colas):

* Attachment "35940-select-filter.png" removed.

[Django]

#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
-------------------------------------+-------------------------------------
Changes (by Thibaud Colas):

* Attachment "35940-select-filter.webp" added.

[Django]

#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]

#35940: SelectFilter choose/remove buttons missing keyboard-friendly state
management
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: (none)

Type: | Status: new
Cleanup/optimization |
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
aria, button, html, javascript, |

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
-------------------------------------+-------------------------------------

Changes (by Natalia Bidart):

* stage: Unreviewed => Accepted
* type: Bug => Cleanup/optimization
* version: 5.1 => dev

Comment:

Thank you Thibaud for this report, it makes sense!
--
Ticket URL: <https://code.djangoproject.com/ticket/35940#comment:2>

[Django]

#35940: SelectFilter choose/remove buttons missing keyboard-friendly state
management
-------------------------------------+-------------------------------------

Reporter: Thibaud Colas | Owner: Brock
Type: | Smickley
Cleanup/optimization | Status: assigned

Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
aria, button, html, javascript, |
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
-------------------------------------+-------------------------------------

Changes (by Brock Smickley):

* owner: (none) => Brock Smickley
* status: new => assigned

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

[Django]

#35940: SelectFilter choose/remove buttons missing keyboard-friendly state
management
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Brock
Type: | Smickley
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
aria, button, html, javascript, |
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
-------------------------------------+-------------------------------------

Comment (by Brock Smickley):

I'm struggling to reproduce this issue locally. I cloned Thibaud's
[https://github.com/thibaudcolas/django_admin_tests django_admin_tests]
repo and edited the `requirements.txt` file to reference my local copy of
Django, but I can't seem to make any change to my local Django files that
shows up when I refresh the page for the admin tests. According to the
documentation [https://docs.djangoproject.com/en/5.1/intro/contributing
/#creating-projects-with-a-local-copy-of-django here], I should
"immediately see any changes I make to Django," but I feel like I'm
missing another step.
--
Ticket URL: <https://code.djangoproject.com/ticket/35940#comment:4>

[Django]

#35940: SelectFilter choose/remove buttons missing keyboard-friendly state
management
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Brock
Type: | Smickley
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
aria, button, html, javascript, |
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
-------------------------------------+-------------------------------------

Changes (by Brock Smickley):

* Attachment "Screenshot 2024-11-26 at 7.57.38 PM.png" added.

--
Ticket URL: <https://code.djangoproject.com/ticket/35940>

[Django]

#35940: SelectFilter choose/remove buttons missing keyboard-friendly state
management
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Brock
Type: | Smickley
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
aria, button, html, javascript, |
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
-------------------------------------+-------------------------------------
Changes (by Brock Smickley):

* Attachment "Screenshot 2024-11-26 at 7.57.38 PM.png" removed.

[Django]

#35940: SelectFilter choose/remove buttons missing keyboard-friendly state
management
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Brock
Type: | Smickley
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
aria, button, html, javascript, |
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
-------------------------------------+-------------------------------------

Comment (by Brock Smickley):

turns out I just wasn't hard refreshing lmao
--
Ticket URL: <https://code.djangoproject.com/ticket/35940#comment:5>

[Django]

#35940: SelectFilter choose/remove buttons missing keyboard-friendly state
management
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Brock
Type: | Smickley
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
aria, button, html, javascript, |
keyboard, screen reader, |
semantic, disabled, SelectFilter2 |

Has patch: 1 | Needs documentation: 0

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

Changes (by Brock Smickley):

* has_patch: 0 => 1

--
Ticket URL: <https://code.djangoproject.com/ticket/35940#comment:6>

[Django]

#35940: SelectFilter choose/remove buttons missing keyboard-friendly state
management
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Brock
Type: | Smickley
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
aria, button, html, javascript, |
keyboard, screen reader, |
semantic, disabled, SelectFilter2 |
Has patch: 1 | Needs documentation: 0

Needs tests: 1 | Patch needs improvement: 1

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

Changes (by Sarah Boyce):

* needs_better_patch: 0 => 1
* needs_tests: 0 => 1

--
Ticket URL: <https://code.djangoproject.com/ticket/35940#comment:7>

[Django]

#35940: SelectFilter choose/remove buttons missing keyboard-friendly state
management
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Brock
Type: | Smickley
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
aria, button, html, javascript, |
keyboard, screen reader, |
semantic, disabled, SelectFilter2 |
Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0

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

Changes (by Brock Smickley):

* needs_better_patch: 1 => 0
* needs_tests: 1 => 0

--
Ticket URL: <https://code.djangoproject.com/ticket/35940#comment:8>
Django <https://code.djangoproject.com/>
The web framework for perfectionists with deadlines.

[Django]

#35940: SelectFilter choose/remove buttons missing keyboard-friendly state
management
-------------------------------------+-------------------------------------

Reporter: Thibaud Colas | Owner: Abigail
Type: | Afi Gbadago

Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
aria, button, html, javascript, |
keyboard, screen reader, |
semantic, disabled, SelectFilter2 |
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Abigail Afi Gbadago):

* owner: Brock Smickley => Abigail Afi Gbadago

--
Ticket URL: <https://code.djangoproject.com/ticket/35940#comment:9>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#35940: SelectFilter choose/remove buttons missing keyboard-friendly state
management
-------------------------------------+-------------------------------------

Reporter: Thibaud Colas | Owner: Brock
Type: | Smickley

Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
aria, button, html, javascript, |
keyboard, screen reader, |
semantic, disabled, SelectFilter2 |
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Sarah Boyce):

* owner: Abigail Afi Gbadago => Brock Smickley

Comment:

This is being worked on by Brock:
https://github.com/django/django/pull/18857
PR is awaiting approval from the accessibility team
--
Ticket URL: <https://code.djangoproject.com/ticket/35940#comment:10>

[Django]

#35940: SelectFilter choose/remove buttons missing keyboard-friendly state
management
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Brock
Type: | Smickley
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:

Keywords: accessibility, | Triage Stage: Ready for
aria, button, html, javascript, | checkin

keyboard, screen reader, |
semantic, disabled, SelectFilter2 |
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------
Changes (by Sarah Boyce):

* stage: Accepted => Ready for checkin

--
Ticket URL: <https://code.djangoproject.com/ticket/35940#comment:11>

[Django]

#35940: SelectFilter choose/remove buttons missing keyboard-friendly state
management
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Brock
Type: | Smickley

Cleanup/optimization | Status: closed
Component: contrib.admin | Version: dev
Severity: Normal | Resolution: fixed

Keywords: accessibility, | Triage Stage: Ready for
aria, button, html, javascript, | checkin
keyboard, screen reader, |
semantic, disabled, SelectFilter2 |
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
-------------------------------------+-------------------------------------

Changes (by Sarah Boyce <42296566+sarahboyce@…>):

* resolution: => fixed
* status: assigned => closed

Comment:

In [changeset:"8c118c0e00846091c261b97dbed9a5b89ceb79bf" 8c118c0]:
{{{#!CommitTicketReference repository=""
revision="8c118c0e00846091c261b97dbed9a5b89ceb79bf"
Fixed #35940 -- Disabled SelectFilter add/remove buttons when appropriate.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/35940#comment:12>