Bootrstrap 5.2.3 Issue where $enable-shadows: true removes box-shadow when button is on :focus-visible state.

Created by: classicmike

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

About the issue

There is an issue that is only apparent when a user sets $enable-shadows: true in their SCSS file, whereby .btn-link elements will not show a focus ring when a user attempts to focus on that element using the keyboard.

Steps to Replicate:

Install Bootstrap at least 5.2.3
Import Bootstrap's SCSS via the @import statement. i.e: @import '../node_modules/bootstrap/scss/bootstrap';
Above the import statement, override the $enable-shadows variable from true,
Save and Preview Changes
Inspect Element and trigger :focus-visible to trigger its styles.

Expected

A box shadow around the btn-link should be visible.

Actual

No box shadow is visible on :focus-visible

What's going on?

In the _buttons.scss file inside Bootstrap, CSS custom properties are modified for the .btn-link selector and one place in particular modifies the --#{$prefix}btn-box-shadow: none. When this is then used along with the following code fragment:

&:focus-visible {
  @if $enable-shadows {
    box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
  } @else {
    box-shadow: var(--#{$prefix}btn-focus-box-shadow);
  }
}

the browsers seem not to accept multiple box-shadows when at least one of the shadows is actually set to none.

Possible Solution/ Workaround

I don't know if this is actually a bug in the browsers' implementation of multiple box shadows, but at least for accessibility/usability reasons, we can apply a workaround that instead of using --#{$prefix}btn-box-shadow: none, we should change it to --#{$prefix}btn-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), which effectively puts an invisible box-shadow that's kind of the same as none.

Reduced test cases

Here is a demo and explanation of the problem: https://stackblitz.com/edit/bootstrap-5-royxn6?file=src/styles.scss

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

macOS

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

Chrome, Firefox

What version of Bootstrap are you using?

v5.2.3