Roving Tabindex Keyboard Nav - Online Accessible List

/** * Roving Tabindex Pattern — Core Logic * Manages focus within a list so only one item is in the Tab order. */ class RovingTabindex { constructor(listEl) { this.list = listEl; this.items = () => this.list.querySelectorAll('[role="option"]'); this.currentIndex = 0; this.bindEvents(); this.updateTabindex(); } bindEvents() { this.list.addEventListener('keydown', (e) => this.handleKey(e)); this.list.addEventListener('click', (e) => { const item = e.target.closest('[role="option"]'); if (item) this.focusItem(item); }); } handleKey(e) { const items = this.items(); if (!items.length) return; const idx = this.currentIndex; let next = idx; switch (e.key) { case 'ArrowDown': next = Math.min(idx + 1, items.length - 1); break; case 'ArrowUp': next = Math.max(idx - 1, 0); break; case 'Home': next = 0; break; case 'End': next = items.length - 1; break; default: return; } e.preventDefault(); if (next !== idx) this.focusItemByIndex(next); } focusItem(item) { const items = this.items(); this.currentIndex = Array.from(items).indexOf(item); this.updateTabindex(); item.focus(); } focusItemByIndex(index) { const items = this.items(); if (index >= 0 && index < items.length) { this.focusItem(items[index]); } } updateTabindex() { const items = this.items(); items.forEach((item, i) => { item.setAttribute('tabindex', i === this.currentIndex ? '0' : '-1'); }); } }