Documentation hamburger button lacks visible focus indication

[patrickhlauke]

The hamburger menu button in v4 and upcoming v5 documentation on small screen lacks a visible focus indication (e.g. when navigating by keyboard)

incidentally, this would be the sort of thing that would ideally, in future, be tackled using :focus-visible (as you'd want some sort of focus outline, but ideally only when navigating with keyboard and not after clicking with mouse/tapping on touchscreen)

xref #30073 (comment)

[TorRydberg]

Hi @patrickhlauke, I have a fix for this. Can I commit my code?

[ffoodd]

@TorRydberg please do 🙂

[MartijnCuppens]

There seem to be an indication in v5 already: https://twbs-bootstrap.netlify.com/docs/4.3/getting-started/introduction/

[ffoodd]

Confirmed, coming from .btn:focus. And the related PR is using border, which moves the button around on focus…

Don't know what happened here, but I suggest to close both issue and PR. @patrickhlauke Could you check this again?

[MartijnCuppens]

but I suggest to close both issue and PR

This is still an issue in v4

Edit: it's not. https://v4-dev--twbs-bootstrap.netlify.app/docs/4.4/getting-started/introduction/

This is fixed by restoring the outlines to .btn-links. I think we can safely remove the .btn-link classes from these buttons btw

[MartijnCuppens]

Gonna close this, this was fixed by #30036. Opened #30542 to remove the redundant .btn-link class which has no effect.