単体テストでスクリーンリーダーをシミュレートする Virtual Screen Reader

npm install -D @guidepup/jest @guidepup/virtual-screen-reader

import "@guidepup/jest";

import React, { useId } from "react";
 
export const Form: React.FC = () => {
  const formTitleId = useId();
  return (
    <form aria-labelledby={formTitleId}>
      <h2 id={formTitleId}>Sign up for our newsletter</h2>
      <div>
        <label htmlFor="email">Email</label>
        <input type="email" id="email" name="email" required />
      </div>
 
      <div>
        <label htmlFor="agree">I agree to the terms and conditions</label>
        <input type="checkbox" id="agree" name="agree" required />
      </div>
 
      <div>
        <button type="submit">Sign up</button>
      </div>
    </form>
  );
};

import { Form } from "./Form";
import { render } from "@testing-library/react";
import { virtual } from "@guidepup/virtual-screen-reader";
 
describe("Form", () => {
  it("should traverse the page announcing the expected roles and content", async () => {
    const { container } = render(<Form />);
 
    // スクリーンリーダーを起動
    await virtual.start({ container });
 
    // スクリーンリーダーのカーソルを次の要素に移動
    await virtual.next();
    await virtual.next();
    await virtual.next();
 
    // 読み上げられた内容を確認
    expect(await virtual.spokenPhraseLog()).toEqual([
      "form, Sign up for our newsletter", // <form> 要素と `aria-labelledby` によるアクセシブルな名前
      "heading, Sign up for our newsletter, level 2", // <h2> 要素とその内容
      "textbox, Email, required", // 入力欄、`<label>` 属性によるアクセシブルな名前と `required` 属性で必須入力であることが読み上げられる
    ]);
 
    // スクリーンリーダーを終了
    await virtual.stop();
  });
});

import { Form } from "./Form";
import { render } from "@testing-library/react";
import { virtual } from "@guidepup/virtual-screen-reader";
 
describe("Form", () => {
  test("should match the snapshot of expected screen reader spoken phrases", async () => {
    render(<Form />);
 
    await expect(document.body).toMatchScreenReaderSnapshot();
  });
});

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Form should match the snapshot of expected screen reader spoken phrases: toMatchScreenReaderSnapshot 1`] = `
Array [
  "document",
  "form, Sign up for our newsletter",
  "heading, Sign up for our newsletter, level 2",
  "Email",
  "textbox, Email, required",
  "I agree to the terms and conditions",
  "checkbox, I agree to the terms and conditions, not checked, required",
  "button, Sign up",
  "end of form, Sign up for our newsletter",
  "end of document",
]
`;

import { Form } from "./Form";
import { render } from "@testing-library/react";
import { virtual } from "@guidepup/virtual-screen-reader";
 
test("メールアドレスの入力に不正な値を入力した場合、不正なメールアドレスである旨が読み上げられる", async () => {
  const { container } = render(<Form />);
 
  await virtual.start({ container });
 
  // メールアドレスの入力欄まで移動
 
  await virtual.next();
  await virtual.next();
  await virtual.next();
 
  // 現在の読み上げ内容を確認
  expect(await virtual.lastSpokenPhrase()).toBe("textbox, Email, required");
 
  // メールアドレスの入力欄に不正な値を入力
  // virtual.type() は現在のフォーカス位置に入力を行う
  await virtual.type("invalid-email");
 
  // エラーメッセージが読み上げられる
  expect(await virtual.lastSpokenPhrase()).toBe(
    "textbox, Email, invalid-email, required"
  );
});

import React from "react";
 
export const App: React.FC = () => {
  return (
    <div>
      <header>
        <h1>My Site</h1>
        <nav aria-label="site navigation">
          <ul>
            <li>
              <a href="/">Home</a>
            </li>
            <li>
              <a href="/about">About</a>
            </li>
            <li>
              <a href="/contact">Contact</a>
            </li>
          </ul>
        </nav>
        <search aria-label="site search">
          <label htmlFor="search">Search</label>
          <input type="search" id="search" name="search" />
          <button type="submit">Search</button>
        </search>
      </header>
      <main>
        <h2>About</h2>
        <p>...</p>
      </main>
      <footer>
        <p>© 2024 My Site</p>
      </footer>
    </div>
  );
};

test("ランドマーク間を移動する", async () => {
  const { container } = render(<App />);
 
  await virtual.start({ container });
 
  await virtual.perform(virtual.commands.moveToNextLandmark);
  expect(await virtual.lastSpokenPhrase()).toBe("navigation, site navigation");
 
  await virtual.perform(virtual.commands.moveToNextLandmark);
  expect(await virtual.lastSpokenPhrase()).toBe("main");
 
  await virtual.perform(virtual.commands.moveToNextLandmark);
  expect(await virtual.lastSpokenPhrase()).toBe("contentinfo");
 
  await virtual.stop();
});

test("本文にジャンプする", async () => {
  const { container } = render(<App />);
 
  await virtual.start({ container });
 
  await virtual.perform(virtual.commands.moveToNextMain);
  expect(await virtual.lastSpokenPhrase()).toBe("main");
 
  await virtual.stop();
});