Skip to content

[Data Views] Don't fully disable buttons that will change state based on user action #56396

@andrewhayward

Description

@andrewhayward

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.

A set of pagination controls, with disabled buttons for the first page, previous page, next page, and last page, all circled in red.

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.

A disabled button, titled 'Reset', circled in red.

This means that the "reset filters" button, for example, visually appears to have this focus problem, but in fact does not.

Metadata

Metadata

Assignees

Labels

[Feature] DataViewsWork surrounding upgrading and evolving views in the site editor and beyond[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Status] In ProgressTracking issues with work in progress[Type] EnhancementA suggestion for improvement.

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions