v5 docs: missing (clear) visible focus indication for version switch button and code samples

[patrickhlauke]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

In the current https://getbootstrap.com/ site, the version switch button in the header has a minimal focus indication (just the text colour getting a bit lighter).

Further down in the page, any <pre> code sample is focusable, but focus indication has been suppressed.

bootstrap-5-visible-focus-indication.mp4

Reduced test cases

https://getbootstrap.com/

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.2

[patrickhlauke]

for the <pre> elements, the problem is localised in docs.scss

.highlight pre:focus {
    outline: 0;
}

---

for the dropdown button, the issue is more fundamental: in buttons.scss the outline is suppressed in favour of the coloured border.

.btn-check:focus+.btn, .btn:focus {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    outline: 0;
    box-shadow: var(--bs-btn-focus-box-shadow);
}

I would actually be tempted to suppress the outline only in case where .btn-check:focus:not(:focus-visible)+.btn, btn:focus:not(:focus-visible) (but keep the other styles there for the more general :focus case

/cc @mdo

[patrickhlauke]

Going to try out how this would look here #36507