Before / After: Roving Tabindex

// Roving tabindex implementation const rg = document.getElementById('rg-old'); const items = [...rg.querySelectorAll('[role=radio]')]; rg.addEventListener('keydown', e => { const idx = items.indexOf(document.activeElement); if (idx === -1) return; let next = -1; if (e.key === 'ArrowDown' || e.key === 'ArrowRight') { next = (idx + 1) % items.length; } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') { next = (idx - 1 + items.length) % items.length; } else if (e.key === 'Home') { next = 0; } else if (e.key === 'End') { next = items.length - 1; } if (next !== -1) { e.preventDefault(); // Remove old active tabindex items.forEach(el => { el.setAttribute('tabindex', '-1'); el.setAttribute('aria-checked', 'false'); }); // Set new active item items[next].setAttribute('tabindex', '0'); items[next].setAttribute('aria-checked', 'true'); items[next].focus(); } }); // Also handle click items.forEach((item, i) => { item.addEventListener('click', () => { items.forEach(el => { el.setAttribute('tabindex', '-1'); el.setAttribute('aria-checked', 'false'); }); items[i].setAttribute('tabindex', '0'); items[i].setAttribute('aria-checked', 'true'); }); });

<!-- The entire keyboard navigation is declared here --> <div role="radiogroup" focusgroup="radiogroup block nomemory"> <div role="radio" tabindex="0" aria-checked="true" focusgroupstart> Newest first </div> <div role="radio" tabindex="0" aria-checked="false"> Oldest first </div> <div role="radio" tabindex="0" aria-checked="false"> Most popular </div> <div role="radio" tabindex="0" aria-checked="false"> Alphabetical </div> </div> <!-- No JavaScript for focus management -->