Roving Focus (Roving Tabindex) 🚶‍♂️➡️🚶‍♀️

Hey Keyboard Navigator! ⌨️💨

The roving-focus module (or RovingFocusGroup) implements the "roving tabindex" pattern. This is a clever accessibility technique used for managing focus in a group of related elements (like toolbar buttons, tabs, or radio group items) where only one item in the group should be focusable at a time via the Tab key.

Think of it like a single spotlight 🔦 that moves between actors on a stage. Only one is in the spotlight (tab-focusable), but you can move the spotlight (focus) to others using arrow keys!

Why Roving Tabindex?

• Accessibility: Prevents "tab traps" where users have to press Tab many times to get past a large group of items.
• Intuitive Keyboard Navigation: Allows users to navigate within the group using arrow keys (or other custom keys) once one item in the group has focus.

How it Works:

1. Only one item in the group has tabindex="0" (making it part of the page's tab sequence).
2. All other items in the group have tabindex="-1" (making them focusable programmatically but not via Tab).
3. When the user navigates within the group (e.g., with arrow keys), the tabindex="0" is "roved" to the newly focused item, and the previously focused item gets tabindex="-1".

Conceptual Usage:

import { RovingFocusGroup, RovingFocusItem } from '@ryvora/react-roving-focus'; // Assuming component names

function MyToolbar() {
  return (
    <RovingFocusGroup orientation="horizontal" loop>
      <RovingFocusItem asChild>
        <button>Cut</button>
      </RovingFocusItem>
      <RovingFocusItem asChild>
        <button>Copy</button>
      </RovingFocusItem>
      <RovingFocusItem asChild>
        <button>Paste</button>
      </RovingFocusItem>
    </RovingFocusGroup>
  );
}

Keep your keyboard navigation smooth and accessible! ✨🎹