Skip to content

Add aria-disabled support to button and icon button #5672

@zelliott

Description

@zelliott

Description

Today, button and icon button only support native [disabled]. They should also support aria-disabled.

The chip component exposes an always-focusable attribute for this:

alwaysFocusable = false;

We could copy that same API, or we could add a new aria-disabled attribute to button and icon button.

Pros for always-focusable

  • Aligns with chip

Pros for aria-disabled

  • Aligns with existing web APIs
  • Aligns with other aria-* APIs exposed on button (e.g. aria-label, aria-haspopup, etc)

I also noticed while looking at chip's implementation that it doesn't set aria-disabled on its inner button if it's disabled and always focusable. It probably should?

?disabled=${this.disabled && !this.alwaysFocusable}

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions