内製UIコンポーネントのアクセシビリティテストを支えるOSS

「Lightning TechTalks #2 〜フロントエンドで導入してよかったOSS〜」の登壇資料です。
https://hireroo.connpass.com/event/297090/

Transcript

1. Lightning TechTalks #2 〜フロントエンドで導入してよかったOSS〜
 @yutaroadachi
 内製UIコンポーネントの
 アクセシビリティテストを支えるOSS

2. @yutaroadachi
 • 株式会社メルペイ
 • 2023年5月に中途入社
 • Credit Design Clientチーム
 • フロントエンドエンジニア
 • 画像はShake Treeさんのお肉で挟んだ ハンバーガー
 何かの画像（要著作権配慮）
 2 自己紹介

3. 内製UIコンポーネントの
 アクセシビリティテストを支えるOSS
 3
4. 内製UIコンポーネントについて
 01 02 03 アクセシビリティテストを支えるOSSについて
 アクセシビリティテストの仕組みについて 4 話すこと
 04 まとめ

5. 内製UIコンポーネントについて
 5
6. Vueで書かれた、ボタンやダイアログなどの汎用的に使われるUIが含まれたもので、npm private packagesによって社内で公開されている 
 
 背景
 • メルペイのフロントエンドにはマイクロサービスとして分割された複数の社内向け管理画面 が存在している
 • マイクロサービス化に際して、開発効率やユーザビリティを向上させるためにUIコンポーネ ントを共通パッケージとして切り出した 
 
 参考
 • 1つのアプリケーションを分割するためのコンポーネント管理方法 
 • メルペイの社内向け管理画面を振り返る 
 6 内製UIコンポーネントについて

7. アクセシビリティテストを支えるOSSについて
 7
8. • cypress, cypress/vue
 • cypress-axe
 • axe-core
 • storybook
 • @storybook/testing-vue3
 8 アクセシビリティテストを支えるOSSについて

9. 9 • cypress
 ◦ テストランナーとしてコンポーネントテストを使っている ▪ コンポーネントテストはその名の通り、ページ単位ではなくコンポーネント単位 でテストができる ▪ イメージとしてはjest (or vitestなど) と@vue/test-utils (or @testing-library/reactなど) を使ったテストに近い ▪ ブラウザベースで動き、cypressのqueryやassertionを使えるのが違い ◦ cypress/vue ▪ コンポーネントテストでVue 3のコンポーネントをマウントしてくれる • 内部では@vue/test-utilsが使われている 
 • cypressに含まれているため、別途installする必要はない 
 • cypress-axe
 ◦ cypressで後述するaxe-coreを使いやすいようにcypressのカスタムコマンドに追加し てくれる アクセシビリティテストを支えるOSSについて

10. • axe-core
 ◦ WebサイトやHTMLベースのUIのためのアクセシビリティテストエンジン ◦ さまざまな種類のルールがある
 ▪ WCAG (Web Content Accessibility Guidelines) の各バージョン (2.0、2.1、2.2) の各レベル (A、AA、AAA) に対応したもの 
 ▪ ベストプラクティスをまとめたもの 
 • すべてのページにh1見出しをつけるといった一般的なアクセシビリティの 実践のためのもの
 • ARIA属性が無視されるといったARIAの落とし穴を避けるためのもの ◦ これらのルールをオプションで自由に設定できる ◦ READMEによるとWCAG問題の平均57%を自動的に発見できるとのこと 10 アクセシビリティテストを支えるOSSについて

11. • storybook
 ◦ テスト対象のコンポーネントを定義するのに使っている 
 ▪ とはいえUIコンポーネントカタログやVRT (ビジュアルリグレッションテスト) とし て使っているものを使い回している 
 • @storybook/testing-vue3
 ◦ 単体テストでVue 3のstoryを使い回せるようにするテストユーティリティ ◦ storyをレンダリングするためのstory functionを取得できる 11 アクセシビリティテストを支えるOSSについて

12. アクセシビリティテストの仕組みについて
 12
13. import * as stories from “./SomeComponent.stories” 
 import { composeStories } from “@storybook/testing-vue3”; 
 import { mount } from “cypress/vue”; 
 
 describe(`${stories.default.title}`, () => { 
 const entries = Object.entries(composeStories(stories)); —①
 for (const [storyTitle, storyFunc] of entries) { 
 it(`${storyTitle}`, () => {
 mount(storyFunc()) —②
 cy.checkA11y(); —③
 });
 }
 });
 13 アクセシビリティテストの仕組みについて

14. • importしたstoryを@storybook/testing-vue3のcomposeStoriesに渡すことでstory名とstory functionを取得している
 • { <story名>: <story function>, ... } のようなオブジェクトが返されるので、テストファイルで使 いやすいようにObject.entriesで [[<story名>, <story function>], ...] のような入れ子の配列 に変換している
 14 ①storyから@storybook/testing-vue3でstory functionを取得する
 import * as stories from “./SomeComponent.stories” 
 import { composeStories } from '@storybook/testing-vue3'; 
 
 const entries = Object.entries(composeStories(stories)); 

15. • 取得したstory functionをcypress/vueのmountに渡すことでstoryをマウントしている 
 • また、cypress/vueのmountの第2引数に必要ならば@vue/test-utilsのmountのオプション を渡すこともできる
 ◦ cypress/vueのmountをラップした関数を作り、globalなオプション (プラグインなど) を 共通で渡しておくことができる 15 ②cypressのコンポーネントテストでマウントする
 import { mount } from “cypress/vue”; 
 
 mount(storyFunc())

16. • cy.checkA11yのカスタムコマンドでaxe-coreのrunコマンドを実行できる 
 • また、cy.configureAxeのカスタムコマンドでaxe-coreの設定のカスタマイズもできる 
 ◦ https://github.com/component-driven/cypress-axe#cyconfigureaxe 16 ③axe-coreでアクセシビリティテストを実行する
 cy.checkA11y();

17. まとめ
 17
18. • storyから@storybook/testing-vue3でstory functionを取得し、cypressのコンポーネントテ ストでマウントして、axe-coreでアクセシビリティテストを実行している 
 • UIコンポーネントカタログやVRT (ビジュアルリグレッションテスト) としても使えるstoryを使 い回せるのがメリット
 • 今回紹介したOSSに一部Vue向けのものが含まれているが、cypress/reactや @storybook/testing-reactがあるのでReactでも同じことはできそう 
 ◦ 未検証 ◦ cypress/reactや@storybook/testing-reactのインターフェースはほとんど同じ 18 まとめ