-
Notifications
You must be signed in to change notification settings - Fork 4.5k
Description
What problem does this address?
As per WCAG SC 3.2.2 (On input):
Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component.
A 'change of context' is defined as something "that, if made without user awareness, can disorient users who are not able to view the entire page simultaneously". This includes focus.
Disabled controls cannot natively have focus. This means that if the act of interacting with a control (for example pressing a button) disables it, then focus will move somewhere else. Without careful focus management, this can be anywhere, and usually nowhere related to the task at hand.
There are several buttons used by data views that fall into this trap.
For example, when the "first page" button in the pagination controls is pressed, the user is taken to the first page of results, and the button is disabled, but it is not clear where focus moves to. The same also applies to the "previous", "next" and "last" buttons.
What is your proposed solution?
Rather than set disabled
on these buttons, we should instead use aria-disabled
. This will leave the buttons focusable, but announced as disabled to assistive technologies.
The most appropriate way to do this is by setting both disabled
and __experimentalIsFocusable
on the Button
component.
Note
There is a problem with focus rings on some focusable disabled buttons, but this is noted and being fixed.
This means that the "reset filters" button, for example, visually appears to have this focus problem, but in fact does not.