Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
zelliott opened this issue Jul 9, 2024 · 1 comment · Fixed by #5675 · May be fixed by #5673
Closed

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

zelliott opened this issue Jul 9, 2024 · 1 comment · Fixed by #5675 · May be fixed by #5673
Assignees
@zelliott

Comments

@zelliott
Copy link
Contributor

zelliott commented Jul 9, 2024 •
edited
Loading

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:

material-web/chips/internal/chip.ts

Line 46 in 7867674

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?

material-web/chips/internal/filter-chip.ts

Line 64 in 7867674

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

@zelliott
Copy link
Contributor Author

zelliott commented Jul 9, 2024

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.

copybara-service bot pushed a commit that referenced this issue Jul 10, 2024
@material-web-copybara @copybara-github
feat: add alwaysFocusable property to button and iconbutton
1e56236 
Aligns with the `alwaysFocusable` property that's currently provided by chip. Fixes #5672.

PiperOrigin-RevId: 650632329
@copybara-service copybara-service bot mentioned this issue Jul 10, 2024
Open
copybara-service bot pushed a commit that referenced this issue Jul 10, 2024
@material-web-copybara @copybara-github
feat: add alwaysFocusable property to button and iconbutton
24da379 
Aligns with the `alwaysFocusable` property that's currently provided by chip. Fixes #5672.

PiperOrigin-RevId: 650632329
copybara-service bot pushed a commit that referenced this issue Jul 11, 2024
@zelliott @copybara-github
feat: add soft-disabled property to button and iconbutton
f6c66aa 
Fixes #5672.

PiperOrigin-RevId: 651409230
@copybara-service copybara-service bot mentioned this issue Jul 11, 2024
Merged
copybara-service bot pushed a commit that referenced this issue Jul 11, 2024
@zelliott @copybara-github
feat: add soft-disabled property to button and iconbutton
766feae 
Fixes #5672.

PiperOrigin-RevId: 651409230
copybara-service bot pushed a commit that referenced this issue Jul 11, 2024
@zelliott @copybara-github
docs(button,iconbutton): add docs for soft-disabled attribute
0901384 
Fixes #5672

PiperOrigin-RevId: 651409230
copybara-service bot pushed a commit that referenced this issue Jul 11, 2024
@zelliott @copybara-github
docs(button,iconbutton): add docs for soft-disabled attribute
07f2532 
Fixes #5672

PiperOrigin-RevId: 651409230
copybara-service bot pushed a commit that referenced this issue Jul 12, 2024
@zelliott @copybara-github
docs(button,iconbutton): add docs for soft-disabled attribute
a54fbd0 
Fixes #5672

PiperOrigin-RevId: 651409230
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@zelliott zelliott

Labels
None yet
Projects
None yet
Milestone
No milestone
1 participant
@zelliott