elastic / elastic/eui

[BETA] `hasAriaDisabled` for button components

Open
#9,214 0 comments 0 reactions 1 assignee Claimed by @mgadewoll View on GitHub
beta meta
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 11h
Merged PRs (30d)
65

Description

### Overview

- Original feature request: https://github.com/elastic/eui/issues/5666
- Implementation PR: https://github.com/elastic/eui/pull/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.

| new prop | type | default value | description |
|---|---|---|---|
| `hasAriaDisabled` | `boolean` | `false` | Changes the native `disabled` attribute to `aria-disabled` to preserve focusability. This results in a semantically disabled button with a custom disabled state behavior instead of the default browser one. |

https://github.com/user-attachments/assets/fd2ce08c-e5c8-4d19-acaa-96e312cfa37e

### 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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.