:focus-visible not supported by all old browsers

[MewenLeHo]

Hello all,

I am currently working on focus for Boosted and I have a problem with the PR "Rework button focus/active styling, with extra changes for checks/radios #37026".

@patrickhlauke switched from ':focus' to ':focus-visible' arguing that ':focus-visible' is now supported by most browsers.

According to https://caniuse.com/?search=focus-visible it is mostly true.

But for Firefox 4-84, it is mentioned that it needs the prefix -moz-focusring.
According to https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring, this prefix is non-standard and is not on a standards track so we should not use it on production.
In addition, it may not work even after adding the prefix -moz-focusring as I tested on Browserstack.

For Chrome, it seems not supported by default too.

Howewer if we refer to .browserslistrc file Bootstrap is supposed to support old browsers (e.g. Firefox 68, etc.).

So what to do here?

Stop using ':focus-visible' since it's not supported by all old browsers?
Keep using it and add a fallback for some browsers like Firefox 60 to 84?
Keep using it and update the list of supported browsers on .browserslistrc file?

Best regards.
Mewen

[patrickhlauke]

Ah, good point. I believe the browserlist should have been updated a bit, as Fx84 (which needs -moz-focus-visible) and Chrome 85 (which still needs the option enabled from experimental) are now 2+ years old. @mdo thoughts?

[julien-deramond]

My 2 cents. Few elements that could help figuring out what to do next.

Option 1: Update .browserlistrc

Current browser support

npx autoprefixer --info (0.000001 hrs)

Browsers:
Chrome for Android: 105
Firefox for Android: 104
QQ Browser: 13.1
UC for Android: 13.4
Android: 105
Chrome: 106, 105, 104, 103, 102, 101, 100, 99, 98, 97, 96, 95, 94, 93, 92, 91, 90, 89, 88, 87, 86, 85, 84, 83, 81, 80, 79, 78, 77, 76, 75, 74, 73, 72, 71, 70, 69, 68, 67, 66, 65, 64, 63, 62, 61, 60
Edge: 105, 104, 103
Firefox: 105, 104, 103, 102, 101, 100, 99, 98, 97, 96, 95, 94, 93, 92, 91, 90, 89, 88, 87, 86, 85, 84, 83, 82, 81, 80, 79, 78, 77, 76, 75, 74, 73, 72, 71, 70, 69, 68, 67, 66, 65, 64, 63, 62, 61, 60
iOS Safari: 16.0, 15.6, 15.5, 15.4, 15.2-15.3, 15.0-15.1, 14.5-14.8, 14.0-14.4, 13.4-13.7, 13.3, 13.2, 13.0-13.1, 12.2-12.5, 12.0-12.1
KaiOS Browser: 2.5
Opera Mini: all
Opera Mobile: 64
Opera: 91, 90, 89
Safari: 16.0, 15.6, 15.5, 15.4, 15.2-15.3, 15.1, 15, 14.1, 14, 13.1, 13, 12.1, 12
Samsung Internet: 18.0, 17.0

These browsers account for 95.97% of all users globally

By updating to Chrome >= 86 + Firefox >= 85 (and letting Firefox ESR) we got

Updated .browserlistrc

Browsers: Chrome for Android: 105 Firefox for Android: 104 QQ Browser: 13.1 UC for Android: 13.4 Android: 105 Chrome: 106, 105, 104, 103, 102, 101, 100, 99, 98, 97, 96, 95, 94, 93, 92, 91, 90, 89, 88, 87, 86 Edge: 105, 104, 103 Firefox: 105, 104, 103, 102, 101, 100, 99, 98, 97, 96, 95, 94, 93, 92, 91, 90, 89, 88, 87, 86, 85 iOS Safari: 16.0, 15.6, 15.5, 15.4, 15.2-15.3, 15.0-15.1, 14.5-14.8, 14.0-14.4, 13.4-13.7, 13.3, 13.2, 13.0-13.1, 12.2-12.5, 12.0-12.1 KaiOS Browser: 2.5 Opera Mini: all Opera Mobile: 64 Opera: 91, 90, 89 Safari: 16.0, 15.6, 15.5, 15.4, 15.2-15.3, 15.1, 15, 14.1, 14, 13.1, 13, 12.1, 12 Samsung Internet: 18.0, 17.0

These browsers account for 94.91% of all users globally

So we'd loose 1.06% of all users globally.
I haven't done the exercise but maybe some other browsers versions could need an update in this file as well (it would increase this number obviously).
I don't have the answer but I'm raising the question: would it be "OK"?

If we update the file, when do we do it?

IMO updating this file shouldn't be in a dot version of Bootstrap.
Correct me if I'm wrong but we plan to use prefers-color-scheme for the dark mode support in v5.3.0 that seems to need at least Firefox 67 and Chrome 76 (source: https://caniuse.com/?search=prefers-color-scheme). So we'd need here an update of this .browserlistrc as well.

Extra-question here. If we don't update the file right now, do we need to rollback the modifications already merged for :focus-visible? (might be not so simple)

Option 2: focus-visible polyfill

If we consider that this .browserlistrc should remain the same for now, another option is to use the focus-visible polyfill: https://github.com/WICG/focus-visible (that's what we use in Boosted actually). The drawbacks for this solution are the following:

• this polyfill is always enabled even if the user's browser support :focus-visible
• the syntax is a bit different than :focus-visible (see https://github.com/WICG/focus-visible#2-update-your-css)