UX: use default browser focus styling for checkbox and radio inputs (PR #12173)

GitHub

This pull request has been mentioned on Discourse Meta. There might be relevant details there:

This removes the focus styling completely? That’s an accessibility issue. We should provide some indication that given checkbox or radio element is focused.

No, it removes only the additional outline. Both checkbox and radio have native focus styles.

Maybe screenshots explain better; without this PR:

With the PR:

Isn’t that the native :checked state?

This is the :focus style on a checkbox before the PR

image

And I think that’s how it will look after the PR?

image

Right, OK, how about removing the styling only when the input is focused and checked?

That’s no good – :checked elements won’t have the focus style (an a11y issue) while others will have the thin square style focus (the originally reported issue).

To properly tackle this, we’d have to implement a custom styling for checkboxes and radio elements. That will allow to give those elements proper focus styling.

A great example of custom input element CSS is Tailwind’s forms plugin: GitHub - tailwindlabs/tailwindcss-forms See https://tailwindcss-forms.vercel.app for its style in action.

What do you think?

Yeah, maybe a full style override would help. But even the Tailwinds example has inconsistent focus styles for me, here is what it looks like when using the mouse to navigate:

Chrome/Mac

Firefox/Mac

(Safari is its own world.)

Another option is to rollback the custom focus styles for radios and checkboxes and let browsers apply their default styles, which in most cases are reasonable and differentiate quite well between keyboard navigation and mouse navigation. They are not consistent across browsers, but they would be consistent with that user’s experience in that browser, generally-speaking.

Our initial work here was for inputs and select-kit elements, anyway.

The title of this pull request changed from “UX: radio or checkbox inputs should not have an outline on focus” to "UX: use default browser focus styling for checkbox and radio inputs