Skipped items

Skip headings and unavailable items during keyboard navigation while preserving grid positions, or exclude disabled elements entirely.

Add data-keyrove-skip to pass over an item during navigation while keeping its position in the sequence. Try the arrows here: focus skips the headings.

<ul id="files">
  <li data-keyrove-item data-keyrove-skip>Recent</li>
  <li data-keyrove-item tabindex="0">quarterly-report.pdf</li>
  <li data-keyrove-item tabindex="0">budget-v3-final-FINAL.xlsx</li>
  <li data-keyrove-item data-keyrove-skip>Shared with me</li>
  <li data-keyrove-item tabindex="0">roadmap.md</li>
  <!-- … -->
  <li data-keyrove-item tabindex="0">pension-fund.xls</li>
</ul>

The headings keep data-keyrove-item and add data-keyrove-skip. Removing data-keyrove-item also excludes a heading from a list, but in a grid it shifts the positions of later cells. A skipped cell keeps its slot.

Skipping does not remove an item's native Tab stop; set its tabindex as needed. An explicit focusKeys mapping can still reach a skipped target; see configuration differences.

Disabled elements#

Anything carrying the disabled attribute is excluded automatically, with no data-keyrove-skip needed:

<button data-keyrove-item tabindex="0">Rename</button>
<button data-keyrove-item disabled>Delete</button>
<button data-keyrove-item tabindex="0">Duplicate</button>

Excluded items leave the sequence, so in a grid a disabled cell shifts every later cell. To keep its slot, use aria-disabled="true" with data-keyrove-skip instead. Use the same pair for a <li> or <div>, since native disabled behavior applies only to supported form controls. keyrove does not write ARIA states or prevent your activation handlers from running.

Home and End#

Home and End respect skipping too: they land on the first and last navigable items, not on a leading heading or a trailing separator.

If every item is skipped, no move lands anywhere. Arrows pressed from outside the group keep their browser default, and keys pressed from a focused item are consumed without moving. Typeahead and roving initialization behave the same way. See the edge rules.