Consistent focus-visible ring styles

[ravisuhag]

Summary

Several interactive components lack :focus-visible styles, which is a WCAG 2.4.7 violation — keyboard users cannot see which element has focus. Components that do have focus styles use inconsistent approaches.

Goal

Apply a unified :focus-visible focus ring pattern to all interactive components.

Affected Components

Component	Issue	Details
Sidebar (#637)	item 1	No focus indication on items or resize handle
Radio (#630)	item 1	No focus indicator for keyboard navigation
Link (#625)	item 3	No :focus-visible state in CSS
Checkbox (#604)	item 17	No visible focus indicator
Accordion (#592)	item 7	Only background color changes on focus — needs proper outline/ring

Proposed Standard

/* Consistent focus ring using design tokens */
:focus-visible {
  outline: 2px solid var(--rs-color-focus-ring);
  outline-offset: 2px;
}

/* For components where outline doesn't work (e.g., rounded elements) */
:focus-visible {
  box-shadow: 0 0 0 2px var(--rs-color-background), 0 0 0 4px var(--rs-color-focus-ring);
}

Components to Audit

All interactive components should be checked:

• Buttons: Button, IconButton, CopyButton
• Form controls: Checkbox, Radio, Switch, Slider, Select, Combobox
• Navigation: Link, Tabs, Breadcrumb, Sidebar items, Navbar items
• Overlays: Dialog triggers, Popover triggers, DropdownMenu triggers
• Other: Accordion triggers, Chip (dismissible), Search

Acceptance Criteria

• All interactive components have visible :focus-visible styles
• Focus ring uses consistent design tokens
• Focus ring is visible in both light and dark themes
• No :focus styles that show on mouse click (use :focus-visible only)
• WCAG 2.4.7 compliance for all interactive elements