SelectFilter choose/remove buttons missing keyboard-friendly state management

[Thibaud Colas]

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 ​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 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: ​SelectedFilter2.js: SelectedFilter.refresh_icons

[Natalia Bidart]

Thank you Thibaud for this report, it makes sense!

[Brock Smickley]

I'm struggling to reproduce this issue locally. I cloned Thibaud's ​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 ​here, I should "immediately see any changes I make to Django," but I feel like I'm missing another step.

[Brock Smickley]

turns out I just wasn't hard refreshing lmao

[Sarah Boyce]

This is being worked on by Brock: ​https://github.com/django/django/pull/18857
PR is awaiting approval from the accessibility team

[Sarah Boyce <42296566+sarahboyce@…>]

In 8c118c0:

Fixed #35940 -- Disabled SelectFilter add/remove buttons when appropriate.