[Sidebar] Add focus-visible styles, fix role hierarchy, and replace hardcoded widths

[ravisuhag]

Summary

Sidebar is a custom compound component with collapse/expand, navigation groups, and tooltip support. Has accessibility gaps around focus management and role semantics.

Improvements

1. Add :focus-visible styles

No focus indication on interactive elements (items, resize handle). Critical for keyboard navigation (WCAG 2.4.7).

2. Replace hardcoded pixel widths with CSS variables

220px, 240px, 57px hardcoded in CSS. Should use design token variables.

3. Fix role hierarchy inconsistency

Items have role="menuitem" but are inside <section> elements, not a proper role="menu" container. Inconsistent ARIA role hierarchy.

4. Fix as prop type safety

as?: ReactElement is too permissive — should be React.ElementType with proper generics.

5. Remove inline cursor style

Avatar has inline style={{ cursor: 'pointer' }} in sidebar-item.tsx. Should be a CSS class.

6. Add collapsible sub-sections

Navigation groups cannot collapse independently. Add optional collapsible prop to SidebarNavigationGroup.

7. Use screen-reader-only pattern for collapsed text

Hidden text uses display: none — should use clip/sr-only pattern to remain accessible.

Files

• packages/raystack/raystack/components/sidebar/

[paanSinghCoder]

Scope:
2. Replace hardcoded pixel widths with CSS variables [Dev]
3. Fix role hierarchy inconsistency [Dev]
4. Fix as prop type safety [Dev]
5. Remove inline cursor style [Dev]
6. Use screen-reader-only pattern for collapsed text [Dev]