Keyboard Navigation

<div class="stage">
  <div class="toolbar">
    <button class="it i1"></button>
    <button class="it i2"></button>
    <button class="it i3"></button>
    <button class="it i4"></button>
  </div>
  <div class="key" id="key"></div>
</div>

.stage{position:relative;width:92%;height:80%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14%}
.toolbar{display:flex;gap:6%;padding:6%;border-radius:14px;border:1px solid var(--line);background:var(--surface)}
.it{width:15vmin;max-width:56px;aspect-ratio:1;border-radius:9px;border:1px solid var(--line);background:var(--bg)}
.ring{box-shadow:0 0 0 3px var(--accent)}
.press{background:var(--accent-3) !important}
.key{font:700 13px/1 ui-monospace,monospace;color:var(--muted);min-height:16px}

const items = [document.querySelector('.i1'), document.querySelector('.i2'), document.querySelector('.i3'), document.querySelector('.i4')];
const key = document.getElementById('key');
const steps = [
  { i: 0, k: '⇥ Tab' },
  { i: 1, k: '→' },
  { i: 2, k: '→' },
  { i: 2, k: '↵ Enter', press: true },
  { i: 3, k: '→' },
];
let s = 0;
function apply(step) {
  items.forEach(function (el) { el.classList.remove('ring'); });
  items[step.i].classList.add('ring');
  key.textContent = step.k;
  if (step.press) {
    items[step.i].classList.add('press');
    setTimeout(function () { items[step.i].classList.remove('press'); }, 260);
  }
}
function tick() {
  apply(steps[s % steps.length]);
  s++;
}
tick();
setInterval(tick, 750);