You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
btn-check: When $enable-shadows is true, all checkboxes and radio buttons using the button toggles when checked and is focus-visible do not show a focus ring box shadow around the button toggle.
#39569
Closed
3 tasks done
classicmike opened this issue
Jan 9, 2024
· 1 comment
· Fixed by #39595
I have been using these button toggle buttons (https://getbootstrap.com/docs/5.3/forms/checks-radios/#toggle-buttons) for our checkboxes and radios. There seems to be a bug where if in your SCSS you set the $enable-shadows to true, these radio toggles when checked will not show a box shadow whenever a user is using a keyboard and focuses on the checkbox/radio for the toggle buttons like you normally see for standard buttons. i.e: on focus-visible and checked state at the same time, no focus ring box shadow is shown. These button toggles are fine on unchecked focused state.
This is an accessibility issue and will for sure fail WCAG focus-visible criteria, if kept in the current state.
This bug can be replicated on the default SCSS styles that you get out of the box from the bootstrap framework, as long as you then set the $enable-shadows to true. I've had a check and it seems like by default $enable-shadows is set to false and when it is set to false, the focus ring box shadow works perfectly on checked state. Below is are screenshots with HTML based on what was provided in BS documentation:
Screenshots when $enable-shadows is set to false:
Screenshots when $enable-shadows is set to true:
Note: The middle toggle button is the one that is being checked.
Minimum steps to replicate
Install Bootstrap as a framework.
Setup the SCSS as per standard instructions
Add an additional line in the SCSS code $enable-shadows to true.
Load the page, open up the inspector and set the checkbox/radio with the btn-check CSS class to have a focus-visible state. Make sure the checkbox is checked. This will simulate a situation when the user is using a keyboard to tab through the checkboxes/radios.
You should be able to see that there is no focus ring around the button toggle.
Reduced test cases
Code demo when $enable-shadows is true and the bug shows itself:
Prerequisites
Describe the issue
I have been using these button toggle buttons (https://getbootstrap.com/docs/5.3/forms/checks-radios/#toggle-buttons) for our checkboxes and radios. There seems to be a bug where if in your SCSS you set the
$enable-shadows
to true, these radio toggles when checked will not show a box shadow whenever a user is using a keyboard and focuses on the checkbox/radio for the toggle buttons like you normally see for standard buttons. i.e: onfocus-visible
andchecked
state at the same time, no focus ring box shadow is shown. These button toggles are fine on unchecked focused state.This is an accessibility issue and will for sure fail WCAG focus-visible criteria, if kept in the current state.
This bug can be replicated on the default SCSS styles that you get out of the box from the bootstrap framework, as long as you then set the
$enable-shadows
to true. I've had a check and it seems like by default$enable-shadows
is set to false and when it is set to false, the focus ring box shadow works perfectly on checked state. Below is are screenshots with HTML based on what was provided in BS documentation:Screenshots when
$enable-shadows
is set to false:Screenshots when
$enable-shadows
is set to true:Note: The middle toggle button is the one that is being checked.
Minimum steps to replicate
$enable-shadows
totrue
.btn-check
CSS class to have afocus-visible
state. Make sure the checkbox is checked. This will simulate a situation when the user is using a keyboard to tab through the checkboxes/radios.Reduced test cases
Code demo when
$enable-shadows
istrue
and the bug shows itself:https://stackblitz.com/edit/stackblitz-starters-3jpccy?file=index.html
Code demo when
$enable-shadows
isfalse
and the toggle checkboxes work fine:https://stackblitz.com/edit/stackblitz-starters-uaqdud?file=index.html
What operating system(s) are you seeing the problem on?
Windows, macOS, Android, iOS, Linux
What browser(s) are you seeing the problem on?
Chrome
What version of Bootstrap are you using?
5.3.2
The text was updated successfully, but these errors were encountered: