invisible-page.js

import { keymap } from './keypress-promise';
// import CrapEventEmitter from './crap-event-emitter';

const page = {
  id: 'page',
  speech: 'voiceover-demo, web content',
  children: [
    {
      id: 'main-heading',
      speech: 'heading level 1, Example page',
    },
    {
      id: 'first-paragraph',
      speech: 'This is the first paragraph',
    },
    {
      id: 'second paragraph',
      speech: 'This is another paragraph',
    },
  ],
};

const speak = (text) => {
  speechSynthesis.cancel();
  speechSynthesis.speak(new SpeechSynthesisUtterance(text));
};

const position = [];

function getCurrent() {
  return position.reduce((current, childIndex) => current.children[childIndex], page);
}

document.addEventListener('keydown', (e) => {
  if (e.shiftKey && e.keyCode === keymap.DOWN) {
    const parent = getCurrent();
    position.push(0);
    const current = getCurrent();
    speak(`In ${parent.speech}, ${current.speech}`);
  }

  if (e.keyCode === keymap.RIGHT) {
    position[position.length - 1]++;
    speak(getCurrent().speech);
  }

  if (e.keyCode === keymap.LEFT) {
    position[position.length - 1]--;
    speak(getCurrent().speech);
  }
});