Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Comments

@classicmike
Copy link

classicmike commented Jan 9, 2024

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: 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:

Screenshot showing the input checkbox with focus:visible state and is checked
Screenshot showing correctly with a focus ring on focus:visible state and is checked

Screenshots when $enable-shadows is set to true:

Note: The middle toggle button is the one that is being checked.
Screenshot showing the input checkbox with focus:visible state and is checked
Screenshot showing incorrectly with no focus ring on focus:visible state and is checked

Minimum steps to replicate

  1. Install Bootstrap as a framework.
  2. Setup the SCSS as per standard instructions
  3. Add an additional line in the SCSS code $enable-shadows to true.
  4. 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.
  5. 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:

https://stackblitz.com/edit/stackblitz-starters-3jpccy?file=index.html

Code demo when $enable-shadows is false 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

@classicmike
Copy link
Author

Thanks @louismaximepiton

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants