search

tailwindlabs / tailwindui-issues

A place to report bugs discovered in Tailwind UI.
234 stars 4 forks source link

Accessibility high contrast white - checked checkboxes not visible #1518

Closed thorstenfleischmann closed 10 months ago

thorstenfleischmann commented 10 months ago

What version of Tailwind CSS are you using?

3.3.3

What version of Node.js are you using?

v18.0.0

What browser are you using?

Chrome, Edge

What operating system are you using?

Windows 10 22H2

Reproduction URL

https://tailwindui.com/components/application-ui/forms/checkboxes

Describe your issue

1) Activate high contrast mode in windows with theme "High Contrast White".

2) Go to: https://tailwindui.com/components/application-ui/forms/checkboxes

It is not possible to distinguish checked and unchecked checkboxes. They always seem to be unchecked. In this screenshot the checkboxes are actually checked:

image

reinink commented 10 months ago

Hey thanks so much for bringing this to our attention.

So this was actually an issue in our @tailwindcss/forms plugin, which we have corrected here: https://github.com/tailwindlabs/tailwindcss-forms/pull/152.

You can fix this in your project by upgrading this plugin by running this command:

npm install @tailwindcss/form@latest

That should solve this issue! 👍

thorstenfleischmann commented 10 months ago

Wow, that was fast 🥇 Works perfectly.