v5/docs: reintroduce outline for docs code samples, buttons when :not(:focus-visible)

[patrickhlauke]

closes #36506

[patrickhlauke]

Fixes the issues found in #36506 - need testing more thoroughly throughout though to check that the change to buttons.scss don't have any horrid side effects (though noting that this will be a notable change for keyboard users, as it will reenable the default focus indication in the browser for them, which I'd say is not a bad thing since we've long suffered contrast issues with those fancy button styles)

bootstrap-5-visible-focus-indication-fixed.mp4

[patrickhlauke]

@mdo et al, any thoughts on this?

[patrickhlauke]

any chance we could get this looked at @twbs/css-review @mdo ?

[julien-deramond]

Focus indication on <pre> code samples is now visible. Great!

Note: We should improve the rendering because the focus area is under the copy button

---

Regarding the buttons, the rendering on Chrome is good. On Firefox, however, the box shadow + red outline combination hurts the eyes a little bit. Maybe just because I'm not used to it yet.

---

Off-topic: while playing with the documentation, focus indication for carousels controls; not visible enough IMO.

[patrickhlauke]

in Chrome, there seems to be a tiny bit of overlap as well ... i can have a look at nudging something by a few pixels to compensate.

in my Firefox/Win, it uses blue rather than red for some reason. maybe we should explicitly define the outline colour as well at some point (part of the larger reevaluation of focus/focus-visible styles perhaps)

[julien-deramond]

Let's do it step by step, no problem. In other PRs:

• nudging something by a few pixels to compensate (if too complicated for this PR)
• defining the outline colour to be coherent between browsers (part of the larger reevaluation of focus/focus-visible styles)

[julien-deramond]

LGTM! @mdo I let you check this as well.

[patrickhlauke]

I'll have a look at the subtle nudging now as part of this PR, so hold off merging until I had a crack at it

[patrickhlauke]

Done...added an extra bit of explicit margin on the right-hand side of the pre.

In Firefox now:

In Chrome:

As said, leaving the outline color thing for another time (as it will likely need to be done on a section basis, so the outline will be a light colour in the header, and a dark one in the main section, etc)

So this PR is now ready for final review/merging

[patrickhlauke]

@mdo et al, any news on this?