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 fromtrue
, - 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