Outdated `:-moz-focusring` makes form elements less accessible

[LeoniePhiline]

The package applies an outdated inaccessible focus ring to form elements in firefox:

/**
Restore the focus styles unset by the previous rule.
*/

:-moz-focusring {
	outline: 1px dotted ButtonText;
}

This thin dotted gray line is inaccessible, outdated. Browsers have updated their default focus styles to be much more accessible, including Firefox.

Here an unstyled, focused textarea (without modern-normalize):

https://codepen.io/rickymetz/pen/ZrbXqJ

It would be fantastic if modern-normalize could undo the custom application of an inaccessible legacy Firefox focus style.

[sindresorhus]

Are you sure https://github.com/sindresorhus/modern-normalize/blob/1fc6b5a86676b7ac8abc62d04d6080f92debc70f/modern-normalize.css#L195-L202 can be safely removed without introducing any regressions?

[LeoniePhiline]

Hi, thanks for your response!

I believe this can be removed.

If you use a current version of Firefox (89.0.1) to view the two-buttons example at https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-focus-inner you will see that the example it does not work any more.

The ::-moz-focus-inner styles apparently have no influence on Firefox's "new style" focus ring, as far as I can see.

The example should show a padding and a dotted red border, but none of that is visible in Firefox 89.

PS: This commit is probably relevant: https://github.com/mozilla/gecko-dev/commit/217ddbe75f1d40c513eeb654c09b12c0c9511acf#diff-92f5675383d4b1d6c842a89578aa87cd5bbdc01ce60603032ba3e63a0cef7bd4 (Confusingly, in this commit, and in the forms.css file at HEAD, you still see a lot of outline: 1px dotted - but Firefox definitely renders a more accessible focus ring by default now (as seen in the OP above).

I am not super deep in the subject, but the change seems to come together with moving towards :focus-visible (https://drafts.csswg.org/selectors/#the-focus-visible-pseudo)

PS 2: Also relevant:

• https://hacks.mozilla.org/2021/01/january-brings-us-firefox-85/
• https://groups.google.com/g/mozilla.dev.platform/c/yA2rL_2keTE/m/V0ZRCykZAAAJ?pli=1
• https://design.firefox.com/photon/components/input-fields.html#behaviors
• https://bugzilla.mozilla.org/show_bug.cgi?id=1284235
• https://css-tricks.com/focus-visible-support-comes-to-firefox/

[LeoniePhiline]

Update: The related tailwindcss bug https://github.com/tailwindlabs/tailwindcss/issues/4769 has been fixed 🎉 (PR: https://github.com/tailwindlabs/tailwindcss/pull/4780)

Findings which might be just as relevant here in modern-normalize: https://github.com/tailwindlabs/tailwindcss/discussions/4724

[LeoniePhiline]

This might be something for modern-normalize to add a workaround for: https://github.com/tailwindlabs/tailwindcss/issues/4769#issuecomment-867728491