Suppress focus outline for buttons when it shouldn't be visible in Chromium

[patrickhlauke]

Follow-up to #32631

To see this in action easily, using Chrome, check one of the "Copy" buttons in the documentation. Currently, they end up with the two-tone outline (even though they shouldn't), but with this additional "hack" (more of a restating of what the browser should be doing), the outline only shows if you're setting focus with the keyboard, not mouse or touch tap

Preview: https://deploy-preview-32689--twbs-bootstrap.netlify.app/

[ffoodd]

I'm definetely in, that's a first step at using :focus-visible appropriately.

However regarding your comment on #32631, I think it means a few older WebKit browsers will still show focus outlines (based on Can I Use).

I personnaly don't care that much, but like to at least mention this.

[XhmikosR]

Removed from backporting. @mdo your call

[patrickhlauke]

@mdo thoughts on backporting?

[mdo]

@patrickhlauke I'd say backport this and #32631 for sure.

[XhmikosR]

The only reason I wasn't sure about backporting is due to @ffoodd's comment above which v4 supports, so this will be inconsistent?

[patrickhlauke]

The only reason I wasn't sure about backporting is due to @ffoodd's comment above which v4 supports, so this will be inconsistent?

this is more of a nice-to-have progressive enhancement, so personally think it's ok to use even if it's not supported by all browsers that are targeted by v4

[XhmikosR]

@patrickhlauke feel free to push any backports to my v4-dev-xmr branch which is #32748. Should be the last batch of patches before 4.6.0, hopefully :)

[patrickhlauke]

yup, on it today hopefully.

[edit: done]