Navbar/Navs now have a focus ring

[julien-deramond]

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

#33125 introduced a new helper to handle focus rings.

Since then, we can observe a blue outline while focusing the navbar with the mouse and with the keyboard.

First of all, the outline shouldn't be displayed when the focus is given via the mouse; it should remains given by the keyboard. FWIW we removed this kind of behavior from the buttons not a long time ago.

Secondly, IMO the outline doesn't have enough contrast on our docs navbar, plus the rendering (still IMO) too much differs from the focus displayed on the navbar brand logo and from the skip links.

The possibly corresponding code:

bootstrap/scss/_nav.scss

Lines 41 to 44 in 1b39d12

	&:focus {
	outline: 0;
	box-shadow: $nav-link-focus-box-shadow;
	}

Reduced test cases

Reduced tests cases:

• https://twbs-bootstrap.netlify.app (main navbar of the docs)
• https://twbs-bootstrap.netlify.app/docs/5.3/components/navbar/
• https://twbs-bootstrap.netlify.app/docs/5.3/components/navs-tabs/

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

Windows, macOS, Android, iOS, Linux

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

Chrome, Safari, Firefox, Microsoft Edge, Opera

What version of Bootstrap are you using?

main branch