Updated navbar focus styles are an accessibility regression

[nwalters512]

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

The updated navbar focus styles introduced in #33125 provide insufficient contrast with the background.

Here's what the focus indicators looked like prior to that change when using the browser's default focus styles:

The focus indicator may not be pretty, but it's very very visible!

Reduced test cases

It's reproducible in the "Color schemes" section of the Navbar documentation: https://getbootstrap.com/docs/5.3/components/navbar/#color-schemes. In the following screenshot, I've forced the <a> elements for "Home" to display as :focus-visible:

In the first and third ones, the contrast is insufficient (1.29:1 and 1.37:1, respectively), and in the second, the focus indicator is completely invisible.

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

macOS

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

Chrome, Safari, Firefox

What version of Bootstrap are you using?

v5.3.5

[julien-deramond]

I'm mentioning this here as it could offer a more global solution: in Boosted at Orange (fork of Bootstrap), we implemented a double outline for visible focus states, ensuring there's always a fallback "security" outline. Since the Orange brand colors are mostly black/white or white/black, usually only one outline color is visible — but on colored backgrounds, both outlines show up, improving accessibility.

You can see the relevant implementation here:

https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/blob/c06298eb9b4e6d026aef26fa49ead2c96ec29a44/scss/_variables.scss#L653-L662

I haven't tested it yet, but we could potentially set the outer border color to primary and the inner one to "bg body", which should cover most use cases. Something along those lines could work for a generic approach, but still customizable by users.

If we want to be more confident in the results, considering that most of Bootstrap's users don't use Sass to customize the rendering, defaulting to white and black — regardless of the brand — is probably the safest approach, as it tends probably to be more visible in any case.

[nwalters512]

A double black/white outline is pretty close to what the auto style does, at least in Chrome + Firefox (Safari uses a single blue color by default, which isn't super accessible). I think this is a very good option.

If it's possible, it'd be nice for the colors involved to be CSS variables that we could override, either globally or in a particular context based on our knowledge of what would be accessible, look visually appealing, etc.