Improve button accessibility: focus outline and spacing

[fehranbit]

Overview: This PR enhances the primary button's accessibility by refining its focus outline and spacing.

Changes

• Updated the focus outline in src/components/ui/button.tsx for better visibility.
• Adjusted button spacing to meet a11y contrast and focus expectations.
• Ensured changes are isolated to the button.tsx component.

Summary by CodeRabbit

• Style
  • Enhanced button focus indicator styling with refined border and ring appearance for better visual clarity.

[coderabbitai]

Walkthrough

Updated focus-visible styling in the button component. The buttonVariants style string was modified to include border-2, border-ring, and ring-offset-2 properties alongside existing ring styling, enhancing the visual focus state appearance.

Changes

Cohort / File(s)	Summary
Button focus-visible styling src/components/ui/button.tsx	Updated focus-visible CSS classes: added border-2, border-ring, and ring-offset-2 to the existing ring styling for improved focus state visual feedback.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

A button now glows with refined grace,
A border frames its focused face,
With offset rings that dance around,
The focus state's a work renowned! ✨🐰

Pre-merge checks and finishing touches

✅ 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 "Improve button accessibility: focus outline and spacing" directly and specifically summarizes the main changes in the changeset. The raw summary confirms that the modification updates the button's focus-visible styling, changing from a 3px ring to a combination of border-2, border-ring, 2px ring, and ring-offset-2, which precisely aligns with improving both focus outline visibility and spacing. The title is concise, uses clear terminology, and avoids vague language, making it immediately understandable to a teammate reviewing the project history.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/button-a11y-focus

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 38de619 and cc8e853.

📒 Files selected for processing (1)

• src/components/ui/button.tsx (1 hunks)

🔇 Additional comments (1)

src/components/ui/button.tsx (1)

8-8: The review comment contains a factual error. WCAG 2.1 Success Criterion 2.4.7 only requires a visible focus indicator with no numeric contrast ratio requirement. The 3:1 contrast requirement for focus indicators was introduced later in WCAG 2.2 Success Criterion 2.4.13, not in WCAG 2.1.

The code change should be evaluated on its own merits rather than against an incorrect standard. If there are genuine accessibility or UX concerns about the focus styling, those should be raised separately with accurate guidance.

Likely an incorrect or invalid review comment.

---

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.}