Composite Widgets: Arrow Keys vs Tab Key

In modern web applications, not every interactive item should be reached via the Tab key.

The W3C WAI-ARIA Authoring Practices Guide (APG) defines the Composite Widget Pattern:

• Tab Key: Moves focus into and out of the widget container.
• Arrow Keys (Left/Right/Up/Down): Navigate between items within the widget.

Examples of Composite Widgets:

• Tab Lists (role="tablist"): Tab key focuses the active tab; Left/Right arrow keys switch between tabs.
• Radio Groups (<fieldset> with radio buttons): Tab key enters the group; Up/Down arrow keys select options.
• Dropdown Menus (role="menu"): Tab key exits the menu; Up/Down arrow keys move between menu items.

This pattern prevents a tablist with 15 tabs from cluttering the global tab order.