fix transparent navbar in windows high contrast mode

[MohamadSalman11]

Description

The navbar in Windows High Contrast mode becomes transparent, which makes everything behind it visible when you scroll. It was not challenging to solve it.

Before:

After:

Motivation & Context

This ensures a better user experience for users who use Windows High Contrast mode. Making the navbar and other elements visible and easy to use helps everyone navigate the site more effectively.

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-40911--twbs-bootstrap.netlify.app/

Related issues

• Closes bootstrap docs: Windows high contrast: navbar has transparent background #40757

[rr-it]

Please implement one of the solutions provided here:
#40757 (comment)

E.g. this one does the trick:
In forced-colors mode a background-color other than transparent is set - the user/system still can (and will) override this background as needed.

Edit: use @coliff Canvas-color.

.bd-navbar {
  background-color: transparent;
  @media (forced-colors) {
    background-color: Canvas;
  }

  // Here comes the part that stays as-is: setting the background in an after-pseudo-element *shrug*
  &::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    content: "";
    background-image: linear-gradient(rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
  }
}

[rr-it]

Setting forced-color-adjust: none might not go well with "user choices to be respected".

See https://developer.mozilla.org/en-US/docs/Web/CSS/forced-color-adjust#usage_notes

This property should only be used to makes changes that will support a user's color and contrast requirements. For example, if you become aware that the color optimizations made by the user agent result in a poor experience when in a high contrast or dark mode. Using this property would enable tweaking of the result in that mode to provide a better experience. It should not be used to prevent user choices being respected.

[coliff]

Agreed. I think the PR should have this:

@media (forced-colors) {
    background-color: Canvas;
}

(I did a lot of research and testing on this for: https://github.com/coliff/bootstrap-forced-colors-css#readme)

[MohamadSalman11]

Hi @coliff , @rr-it . Thanks for the suggestion! I’ve made the changes. Thank you!

[julien-deramond]

This looks like a solid patch for the documentation. Thanks to everyone for the PR and the valuable discussions; they really helped speed up the review and testing process.

On my end, I tested the changes using BrowserStack on various Windows versions, where switching to high-contrast mode was straightforward. Everything worked seamlessly!

The rendering remains the same without the query.

There's definitely more work ahead in v6 to address this topic within the components, likely drawing from the progress made by @coliff and his work in https://github.com/coliff/bootstrap-forced-colors-css#readme, as noted in #35941.

In the meantime, I'll leave it to @twbs/css-review and/or @patrickhlauke for any final checks. If there are no objections, I'll go ahead and merge the PR.

[louismaximepiton]

Works like a charm, well done folks !