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

modern-normalize/modern-normalize.css

Lines 195 to 202 in 1fc6b5a

	/**
	Remove the inner border and padding in Firefox.
	*/
	::-moz-focus-inner {
	border-style: none;
	padding: 0;
	}

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: mozilla/gecko-dev@217ddbe#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 tailwindlabs/tailwindcss#4769 has been fixed 🎉 (PR: tailwindlabs/tailwindcss#4780)

Findings which might be just as relevant here in modern-normalize: tailwindlabs/tailwindcss#4724

[LeoniePhiline]

This might be something for modern-normalize to add a workaround for: tailwindlabs/tailwindcss#4769 (comment)