Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
内製UIコンポーネントのアクセシビリティテストを支えるOSS
Search
Yutaro Adachi
November 05, 2023
0
1.1k
内製UIコンポーネントのアクセシビリティテストを支えるOSS
「Lightning TechTalks #2 〜フロントエンドで導入してよかったOSS〜」の登壇資料です。
https://hireroo.connpass.com/event/297090/
Yutaro Adachi
November 05, 2023
Tweet
Share
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Code Review Best Practice
trishagee
66
17k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Speed Design
sergeychernyshev
25
780
Code Reviewing Like a Champion
maltzj
521
39k
Practical Orchestrator
shlominoach
186
10k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Scaling GitHub
holman
459
140k
Transcript
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を取得している • { <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));
• 取得した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 まとめ