twbs
v5/docs: reintroduce `outline` for docs code samples, buttons when `:not(:focus-visible)`
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)
https://user-images.githubusercontent.com/895831/172059262-0d06623d-0523-4e14-9a45-9a07b25cdd00.mp4
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.
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)
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)
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
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