shwld11 days ago

リッチエディタのテストダブルでも aria 属性を透過する

フォーム入力を textarea からリッチテキストエディタへ差し替えたとき、コンポーネントテストの失敗原因が「機能差」ではなく「アクセシビリティ属性の欠落」になりやすい。今回もモック実装が aria-label を受け渡しておらず、getByRole('textbox', { name: ... }) 系の検証が不安定になった。

テストダブル側で ariaLabel / ariaDescribedBy / ariaInvalid をそのまま textarea へ橋渡しすると、実装を差し替えてもテストの意味を維持しやすい。

vi.mock("../components/rich-text-editor", () => ({
  RichTextEditor: ({ value, onChange, ariaLabel, ariaDescribedBy, ariaInvalid, id }) => (
    <textarea
      id={id}
      role="textbox"
      value={value}
      onChange={(event) => onChange(event.target.value)}
      aria-label={ariaLabel}
      aria-describedby={ariaDescribedBy}
      aria-invalid={ariaInvalid ? "true" : "false"}
    />
  ),
}));

今回やったこと（実施済み）

RichTextEditor のテストモックに ariaLabel を追加した
画面テスト側のモックにも同じ属性透過を追加して挙動を統一した
既存フォームテストを再実行し、ロール＋名前ベースの探索が安定して通ることを確認した

次に試す（任意）

同種のモックに共通ヘルパーを用意して、属性漏れを防ぐ

shwld