Skip to content

Apply 'disabled' styling when aria-disabled is set on a Button or IconButton #3991

@iansan5653

Description

@iansan5653

In many cases it's not desirable to fully disable a button control because it can make that button difficult for some users to locate. A disabled button is not focusable and doesn't respond to interaction at all, and it doesn't have any indication of why it's disabled.

While it's generally preferable to just avoid disabling buttons and rely on alternative methods instead, in some cases it may be preferable to use aria-disabled along with CSS styling to disable a button. This is particularly useful in tandem with a tooltip that appears on focus (this tooltip would be inaccessible on a disabled button).

As a component library we should make accessible practices as easy as possible. So I think we shouldn't force consumers to build custom CSS styles in order to use this approach - we should make using aria-disabled as easy as disabled. With that in mind, I propose that aria-disabled should, by default, have the same styling as disabled buttons.

I've focused on buttons here but this actually probably applies to all interactive components that can be disabled.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions