Standardize high-contrast focus indicators for ToggleSwitch and CheckBox

[Kalpana-chavhan]

Problem Description

The focus indicators for ToggleSwitch and CheckBox currently rely on legacy shadow definitions that do not consistently utilize the design system's @focus-ring-color token.
This leads to:

• Inconsistency: These inputs look different when focused compared to Button or TextInput.
• Accessibility Gap: On certain background colors (especially in Dark Mode), the focus ring contrast ratio is below the WCAG 2.1 AA requirement of 3:1 for user interface components.

---

Steps to Reproduce:

1. Open the Fuselage Storybook to the ToggleSwitch or CheckBox section.
2. Tab through the components using the keyboard.
3. Observe that the focus ring is either missing or has poor visibility compared to standard Text Inputs.

---

Proposed Solution:

Refactor the focus state styling in the following files to use the global focus ring token:

• packages/fuselage/src/components/ToggleSwitch/ToggleSwitch.styles.scss
• packages/fuselage/src/components/CheckBox/CheckBox.styles.scss

Instead of legacy box-shadow values, implement the standard focus ring behavior:

&:focus + .rcx-toggle-switch__fake,
&:focus + .rcx-check-box__fake {
  @include focus-ring; // Or the equivalent variable/mixin used in the project
}

---

Impact

• Ensures the library meets modern accessibility standards (A11y).
• Reduces technical debt by migrating from hardcoded values to design tokens.

[dikshaa2909]

Hi @Kalpana-chavhan
I’d like to take this up and work on aligning the ToggleSwitch and CheckBox focus states with the design system focus ring token.
Please assign this issue to me if it’s still available. Thanks!

[Pallavi778]

Hi @Kalpana-chavhan and maintainers,

I’d like to work on this issue #1833: Standardize high-contrast focus indicators for ToggleSwitch and CheckBox.

Here’s a visual representation of the current problem and the planned improvement(Before and After Image of Focus Ring):

(Approach)-
Update the focus state styling in:

packages/fuselage/src/components/ToggleSwitch/ToggleSwitch.styles.scss

packages/fuselage/src/components/CheckBox/CheckBox.styles.scss

Replace legacy box-shadow focus styling with the design system’s @focus-ring-color token using the focus-ring mixin:

&:focus + .rcx-toggle-switch__fake,
&:focus + .rcx-check-box__fake {
@include focus-ring;
}
Please let me know if this approach works. I’ll start working on the implementation accordingly.
Thanks!

[Pallavi778]

Hi @Kalpana-chavhan ,
I’ve started working on this issue and will share a PR soon.
Please let me know if anyone else is already working on it.

[aniKet0753]

@Pallavi778
you still working on this ?? if not let mem know !