إدارة roving tabindex في الأدوات

In a toolbar or radio group, Tab should reach the widget once, not every item. Roving tabindex is the pattern that makes this work.

Exactly one item holds tabindex="0" at a time. Every other item gets tabindex="-1", so Tab enters the group at a single point.

On load, give the first or selected item tabindex="0" and set the rest to tabindex="-1". That is the resting state of the group.

Once focus is inside, the user moves between items with the arrow keys, not Tab. Tab still exits the whole widget.

On an arrow press you do two things: set the old item to -1 and the new item to 0, then call focus() on the new one. 🧭

Keeping a single tabindex="0" means Tab always lands on the item the user last used, so returning to the widget feels natural.

The ARIA Authoring Practices Guide specifies the exact keys for each widget. Follow its keyboard map rather than inventing one.

Many widgets wrap arrow movement: pressing right on the last item loops to the first. Check the APG for whether your pattern should wrap.

Composite widgets often add Home and End to jump to the first and last items, a small touch that speeds up navigation.

Roving tabindex moves real DOM focus. The alternative, aria-activedescendant, keeps focus on a container and points to a virtual active item.

Tab in, arrow through every item, Tab back out, then Tab in again and confirm focus returns to the last-used item.

In a roving tabindex toolbar, how many items have tabindex="0" at any moment?

You mastered roving tabindex: one item at 0, the rest at -1, arrow keys rove the 0 between them, and Tab moves past the whole widget. 🚀