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