CngxRovingTabindex

Implements the WAI-ARIA roving tabindex pattern for composite widgets.

Only the active item in the group has tabindex="0" - all others get tabindex="-1". Arrow keys move focus within the group; Tab leaves it. Home/End jump to first/last item.

Works for toolbars, tab lists, card grids, menu bars, and any composite widget where only one item should be in the tab order at a time.

Virtual mode#

When virtualCount is set, activeIndex ranges from 0 to virtualCount - 1 instead of being bounded by contentChildren.length. Items are matched by data-cngx-recycle-index attribute. When the target item is not in the DOM (out of rendered range), pendingFocus is set so a wiring function like connectRecyclerToRoving() can scroll it into view.

Horizontal toolbar#

<div cngxRovingTabindex orientation="horizontal" #rv="cngxRovingTabindex">
  <button cngxRovingItem>Cut</button>
  <button cngxRovingItem>Copy</button>
  <button cngxRovingItem>Paste</button>
</div>

Vertical menu with controlled index#

<ul cngxRovingTabindex orientation="vertical" [(activeIndex)]="selectedIdx">
  @for (item of items(); track item.id) {
    <li cngxRovingItem>{{ item.label }}</li>
  }
</ul>

Virtual scroll integration#

<div cngxRovingTabindex orientation="vertical" [virtualCount]="recycler.ariaSetSize()">
  @for (item of visibleItems(); track item.id; let i = $index) {
    <div cngxRovingItem [cngxVirtualItem]="recycler" [cngxVirtualItemIndex]="recycler.start() + i">
      {{ item.name }}
    </div>
  }
</div>

https://cngxjs.github.io/cngx/examples/#/common/a11y/roving-tabindex/horizontal-toolbar https://cngxjs.github.io/cngx/examples/#/common/a11y/roving-tabindex/vertical-menu