Skip to content

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

@zelliott

Description

@zelliott
Contributor

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}

Activity

zelliott

zelliott commented on Jul 9, 2024

@zelliott
ContributorAuthor

I think it makes most sense to align with chip for now and expose it as always-focusable. Then we can always change both chip and button to aria-disabled if we want in the future.

added a commit that references this issue on Jul 10, 2024
1e56236
added 2 commits that reference this issue on Jul 10, 2024
24da379
f6c66aa
added 5 commits that reference this issue on Jul 11, 2024
766feae
0901384
07f2532
a54fbd0
aea7781
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

    Participants

    @zelliott

    Issue actions

      Add aria-disabled support to button and icon button · Issue #5672 · material-components/material-web