Opened 7 hours ago
Last modified 7 hours ago
#35940 new Bug
SelectFilter choose/remove buttons missing keyboard-friendly state management — at Initial Version
| Reported by: | Thibaud Colas | Owned by: | |
|---|---|---|---|
| Component: | contrib.admin | Version: | 5.1 |
| Severity: | Normal | Keywords: | accessibility, aria, button, html, javascript, keyboard, screen reader, semantic, disabled, SelectFilter2 |
| Cc: | Triage Stage: | Unreviewed | |
| Has patch: | no | Needs documentation: | no |
| Needs tests: | no | Patch needs improvement: | no |
| Easy pickings: | no | UI/UX: | no |
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 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"
