Overview

• Original feature request: [EuiButton] Disabled buttons are invisible to screen readers, creating a UX gap #5666
• Implementation PR: [EuiButton] Support focusable disabled behavior with hasAriaDisabled prop #9201

We introduced an update that adds a new hasAriaDisabled prop to all base button components:

• EuiButton
• EuiButtonEmpty
• EuiButtonIcon
• EuiButtonGroup
• EuiFilterButton

This new prop is currently in beta and disabled by default. Since the prop changes a native behavior towards a custom implementation, this approach ensures that we can enable it as opt-in feature and test it in scoped scenarios and adjust as needed.

Feature description

The hasAriaDisabled toggles the usage of default disabled attribute with aria-disabled. This results in a custom disabled behavior instead of the native one handled by browsers.

This functionality enabled users to preserve focusability of disabled buttons while also keeping them semantically and functionally disabled. This is useful when wanting to e.g. add tooltips on disabled buttons to provide additional information why the button is disabled.

Usage Notes (optional)

At the time of rolling this out, there are currently no usages as this feature is introduced as opt-in feature.

ℹ️ Consumers that want to start using hasAriaDisabled on EUI button components, will need to update the following if used:

• test assertions checking for disabled attribute -> use the new EUI test helpers instead (docs)
• style selectors using :disabled pseudo-selector -> use euiDisabledSelector in CSS-in-JS/JS or :disabled, [aria-disabled="true"] in CSS instead

Next Steps

To facilitate the transition, we should:

• Monitor updates to use hasAriaDisabled
• Monitor usages of the added test helpers
• Monitor if any issues or bugs are reported that are caused by the custom disabled behavior