Skip to content

fix(ui): arrow key navigation does not move focus between sidebar items #178

@mpiton

Description

@mpiton

Bug Report

Description

Arrow key (Up/Down) navigation does not move focus between sidebar navigation items. Only Tab key moves focus. The useKeyboard hook handles arrow keys for list navigation in content views but the sidebar buttons don't participate in this pattern.

Steps to Reproduce

  1. Press Tab to focus the first sidebar button ("Overview")
  2. Press ArrowDown
  3. Focus stays on "Overview" instead of moving to "To Review"

Expected Behavior

ArrowDown should move focus to the next sidebar item, ArrowUp to the previous — following the roving tabindex pattern for toolbar/menu navigation.

Proposed Fix

Implement the roving tabindex pattern on sidebar nav items:

  • Only the active/focused item has tabindex="0"
  • All other items have tabindex="-1"
  • Arrow keys move focus between items
  • Home/End jump to first/last item

References

Files to Modify

  • src/components/Sidebar/Sidebar.tsx
  • src/components/Sidebar/NavItem.tsx
  • src/hooks/useKeyboard.ts — potentially extend for sidebar context

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions