Automating virtual screen-readers with Guidepup and Jest

test-spec.js

test("should navigate to the input and announce the label and hint", async () => {
  document.body.innerHTML = `
  <form>
    <label for="ref">What is your reference?</label>
    <div class="hint" id="ref-hint">This is 10 characters.</div>
    <input type="text" name="ref" id="ref" aria-describedby="ref-hint" />
    <button>Save</button>
  </form>
  `;

  await virtual.start({ container: document.body });

  // Move to form
  await virtual.perform(virtual.commands.moveToNextForm);
  // Move to the input
  await virtual.next();
  await virtual.next();
  await virtual.next();

  const lastSpokenPhrase = await virtual.lastSpokenPhrase();

  expect(lastSpokenPhrase).toContain("What is your reference?");
  expect(lastSpokenPhrase).toContain("This is 10 characters");

  await virtual.stop();
});