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


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


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

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


内製UIコンポーネントについて
 5

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


アクセシビリティテストを支えるOSSについて
 7

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


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について


● 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について


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


アクセシビリティテストの仕組みについて
 12

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 アクセシビリティテストの仕組みについて


● importしたstoryを@storybook/testing-vue3のcomposeStoriesに渡すことでstory名とstory functionを取得している
 ● { : , ... } のようなオブジェクトが返されるので、テストファイルで使 いやすいようにObject.entriesで [[, ], ...] のような入れ子の配列 に変換している
 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)); 


● 取得した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())


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


まとめ
 17

● 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 まとめ