With `forced-colors: active`, focus-rings may be invisible

[AWqxKAWERbXo]

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

While classic hyperlinks remain visible:

buttons like this:

will not:

The reason: The focus-ring is not an outline (which will be set to 0) but a box-shadow.

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

I think this should be, at least for forced-colors: active mode, an outline.

Reduced test cases

<a href="/" class="btn btn-primary">A default button</a>

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

Windows

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

Microsoft Edge

What version of Bootstrap are you using?

v5.3.0

[AWqxKAWERbXo]

This also affects nav-link as well as other classes, so this was my custom fix for that.

@media (forced-colors: active) {
  .focus-ring:focus,
  .btn:focus,
  .form-control:focus,
  .form-select:focus,
  .form-check-input:focus,
  .nav-link:focus,
  a:focus,
  button:focus,
  [tabindex]:focus {
    outline: 2px solid currentColor !important;
    outline-offset: 2px;
  }
}