search

tailwindlabs / tailwindcss-custom-forms

A better base for styling form elements with Tailwind CSS.
https://tailwindcss-custom-forms.netlify.app/
MIT License
1.55k stars 72 forks source link

Checkbox a11y #81

Closed kim366 closed 4 years ago

kim366 commented 4 years ago

Hello, you've done great work on these components! Unfortunately, I see, with many libraries that restyle checkboxes, accessibility suffers, as you can't control the checkbox with the keyboard. Radio buttons work well, which is a lot better than other libraries.

While a checkbox has focus, pressing the space bar should toggle it.

adamwathan commented 4 years ago

The space bar does toggle it, it is literally just a regular HTML checkbox:

checkbox

Try it out here:

https://tailwindcss-custom-forms.netlify.app/

There is no JS or anything fancy here, just some CSS around a regular <input type="checkbox"> so all of the standard browser behavior just works 👍🏻

kim366 commented 4 years ago

Hmm, then it must be a bug with my browser, sorry