﻿id	summary	reporter	owner	description	type	status	component	version	severity	resolution	keywords	cc	stage	has_patch	needs_docs	needs_tests	needs_better_patch	easy	ui_ux
35940	SelectFilter choose/remove buttons missing keyboard-friendly state management	Thibaud Colas	Brock Smickley	"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]"	Cleanup/optimization	closed	contrib.admin	dev	Normal	fixed	accessibility, aria, button, html, javascript, keyboard, screen reader, semantic, disabled, SelectFilter2		Ready for checkin	1	0	0	0	0	0
