EPMRPP-107962 || Change focus style to focus-visible for checkboxes

[VaheSamsonyan]

Description

Change focus style to focus-visible for checkboxes to enhance accessibility

Summary by CodeRabbit

• Style
  • Updated checkbox component focus styling to provide clearer visual feedback during keyboard navigation, enhancing the interactive experience for keyboard users.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4a30b0a and 90972e2.

📒 Files selected for processing (1)

• src/components/checkbox/checkbox.module.scss

---

Walkthrough

This pull request updates the checkbox component's focus styling selector from :focus to :focus-visible, ensuring focus indicators are only applied when browsers determine focus visibility is appropriate for user interaction patterns.

Changes

Cohort / File(s)	Summary
Checkbox Focus Styling src/components/checkbox/checkbox.module.scss	Replaced :focus with :focus-visible in the control's adjacent selector to improve accessibility semantics by limiting focus styling to visible focus states.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• Change focus style to focus-visible for better accessibility #243: Applies the same :focus to :focus-visible selector change for button components to improve accessibility consistency across multiple component types.

Suggested labels

TMS

Suggested reviewers

• AmsterGet
• maria-hambardzumian
• siarheirazuvalau

Poem

A checkbox sits with clarity bright,
No more focus blaze in the night,
Only when eyes truly see,
The focus ring shines naturally,
Accessibility hops with delight! 🐰✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The pull request title clearly and specifically describes the main change: switching from focus to focus-visible selector for checkbox styling to improve accessibility.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch bugfix/EPMRPP-107962-Remove-focus-border-on-click-for-buttons-and-checkboxes

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}