search

illright / attractions

A pretty cool UI kit for Svelte
https://illright.github.io/attractions
MIT License
1.03k stars 37 forks source link

Swap button attribute disabled to aria-disabled #352

Open Dmkk01 opened 2 years ago

Dmkk01 commented 2 years ago

As the title suggests, I have swapped the current disabled attribute to the aria-disabled on the button as that makes the component more inclusive for users with assistive technologies.

illright commented 2 years ago

Could you please provide a reference as to why that makes the component more accessible? To my knowledge, this change has the opposite effect

Dmkk01 commented 2 years ago

Sure, I read this article some time ago while I was working on my other projects: https://css-tricks.com/making-disabled-buttons-more-inclusive/.

Some of the main points include: image image

illright commented 2 years ago

I see, thanks for the reference. I've noticed that a similar PR (https://github.com/mui/material-ui/pull/27719) has been opened for Material-UI, a very popular component library. They have put this PR on hold because these two behaviors are kind of hard to compare — they both have a place and a use case.

That said, the current changes you've made are insufficient as the clicks will suddenly start going through for everyone. So to roll out this change, we'd have to bake in click prevention into the component itself.

That's still going to be a breaking change since some people want one behavior and others want the other. And as the article rightfully states, disabled buttons mostly suck anyway.

I think that we should keep the current behavior, since it's still possible to implement accessible disabling yourself with the current design, bypassing the disabled prop. Perhaps we should add a warning to the docs about disabled buttons, but logic-wise, I think it should stay as it is

illright commented 2 years ago

Alternatively, we could implement this behavior with a separate prop, something like accessiblyDisabled