Checkbox/radio focus rings are hard to see on Windows

[mauritskorse]

Reposting this issue as I have done some digging.

On chrome-based browsers on my windows machine (in dark mode) the focus state of any input field is a black border (it doesnt seem to be an outline that thickens the appearance of the border). On checkboxes and radiobuttons this cases the issue that when tabbing through the ui and a currently selected checkbox or radiobutton is focussed, this is not visible to the user. In case either the fill color of a selected checkbox or radiobutton is non black, or the color and thickness of the outline on focus-visible state is adjusted, this issue is fixed.

Yes I have this on the lastest version of Flux, as well as on the flux website. I am on Windows, dark mode. tried with Vivaldi, Bing, Chrome and Firefox.

On Firefox it works. So it seems to be an issue with chrome-based browser here. Adding the following in devtools gives me the correct behaviour in chrome

ui-checkbox:focus-visible {
  outline: 2px solid blue
}

Originally posted by @mauritskorse in #262

[jeffchown]

@mauritskorse Do you have the Tailwind forms plugin installed? (https://github.com/tailwindlabs/tailwindcss-forms)
I did and it was causing styling issues/collisions with Flux.

Once I removed it, cleared my caches and recompiled my assets with Vite, my dark mode forms looked much better.

[mauritskorse]

Nope. But I have the same issue on https://fluxui.dev/components/checkbox. so it's not my implementation only.. I have tested it on chrome, edge, firefox and vivaldi. Only on vivaldi (my default browser) I have extensions installed the others (chrome, edge, firefox) are clean installs. Only on Firefox it works as it should.

[jeffchown]

Interesting, @mauritskorse

I looked at https://fluxui.dev/components/checkbox in my browser (Brave) and, when clicking on the checkbox or the label, I do not get the blue focus outline. When clicking on it, then using the tab key to focus the next element, then shift-tab to refocus the checkbox, the blue outline does appear.

So it looks like, for me, when using the keyboard to navigate the form, the focus styling works, but in response to a click, it doesn't.

[mauritskorse]

I just found this: https://blog.chromium.org/2020/03/updates-to-form-controls-and-focus.html Apparently all chrome browsers after update 83 should show a black border on focus state. I indeed have it in Brave as well. @jeffchown, interesting that you do have a blue outline in Brave. What version are you using?

When reading the chromium blog they write:

The new focus indicator uses a thick dark ring with a thin white outline, which should improve visibility on both light and dark backgrounds. This is an easy accessibility win that automatically improves the keyboarding experience on a number of sites without developers needing to write any new code. Note that there are still some scenarios where the focus ring may be hard to perceive—for example, if a black button is on a white background, or if the focus ring is clipped by elements that are positioned closely together. If you run into a scenario where the focus ring is hard to perceive, or if the new focus indicator does not match the design of your site, there are ways to style focus including the new :focus-visible pseudo-class, which provides fine-grained control over when the focus indicator is displayed.

I have the issue in both light and dark mode of flux: In the images below I have tabbed onto the "Push notifactions", but you can't tell:

In these images I have tabbed to "In-app alert" which is clearly focussed:

[calebporzio]

Ok, this seems valid but hard for me to test. Just bought a windows machine, comes tomorrow, hopefully can test by next week. Stay tuned!