Rework button focus/active styling, with extra changes for checks/radios

[patrickhlauke]

This long-overdue PR does a few things concerning buttons:

• for all .btns, it changes the :focus styling to :focus-visible - this way, the focus style doesn't take effect and "stick" (until you click somewhere else) for mouse/touch users
• for button-like checks and radios, the :focus-visible style now doesn't set the background colour, and there is no :hover styling. this stops the very confusing problem of having the mouse, or keyboard focus, on a checkbox, checking/unchecking it, but only being able to see whether they did indeed check/uncheck by moving keyboard focus away/clicking somewhere else. particularly noticeable in our outline button example, where before you simply couldn't tell what was going on.

Closes #33481, closes #31149, closes #34664, closes #36502, Fixes #26804.

Possibly supersedes #28999 (think this approach may be cleaner)

[patrickhlauke]

This is a noticeable change, but don't think we'd class it as a breaking change...more a refinement/more sensible styling.

Video of the before/after, showing checks/radios buttons, check/radio button groups, and regular buttons

bootstrap-pr37026.mp4

[florianlacreuse]

In our team we don't use button-like checks and radios (even though sometimes we really want to) for the reasons you mentioned. This would be a very valued fix for us.

Quick question: Is it intentional to keep the outline (with mouse use / click) on elements like .form-check (checkbox, radio, switch)? I would have thought that .form-check and button-like checks and radios would behave the same way.

[patrickhlauke]

Quick question: Is it intentional to keep the outline (with mouse use / click) on elements like .form-check (checkbox, radio, switch)? I would have thought that .form-check and button-like checks and radios would behave the same way.

@florianlacreuse yeah that's probably something we'll want to revisit as well. admittedly, for this PR, I concentrated solely on the button-like checks/radios which have been problematic for ages. once I get a moment I'll look at all the other places where :focus-visible is probably more appropriate, now that it's mostly supported in browsers

[mdo]

I think we ship this with v5.3.0 as it feels like a larger change than a patch. Let me know if you'd prefer we ship it sooner!

[gemini-git]

Thanks for the work @patrickhlauke.

@mdo Please consider shiping this merge request with v5.2.1. In my opinion it is a bug fix as the current state is not usable as @florianlacreuse already said.
The bug was first mentioned two years ago and v5.3.0 may be a long way off.

[patrickhlauke]

@mdo personally, i'd also prefer pushing this as soon as possible as it's been a known broken/unusable thing for quite a long time (as evidenced by the boatload of issues this PR closes).

if it's felt to be too big, sure it can go in a 5.3, as long as that's not too far off into the future.

[patrickhlauke]

Fixed the merge conflict caused by #36507 ... although to do this I removed the new chunk in buttons.scss that does the :focus:not(:focus-visible) dance, I think that's now superfluous as I switched the actual :focus to :focus-visible in the preceding rules (so rather than setting and then unsetting it per #36507, this now just only sets it for :focus-visible from the start)

[fabiochelly]

My god, do you intend to remove those borders from focused fields also?
Your buttons were far more beautiful before this change. As it's not a big deal for buttons (I prefered the previous style but I can manage), it would break everything I like in Bootstrap if you remove those border from input fields.

At least, give us the choice by adding some classes like form-control-shadow or form-control-noshadow or a simple bs-focus-shadow to all input and buttons that we could add to our fields.

[patrickhlauke]

we aim to make bootstrap accessible out of the box. if you don't want it to be accessible, you're always free to add CSS to override it...

[tom300z]

I gotta say that the "sticky" border around elements that were interacted with was always a big part of the bootstrap design for me.

After this PR buttons feel really flat and lack a visual cue that they were pressed.
I would really appreciate it if you could at least display the border temporarily while a button is clicked.