acot を導入する
odanado opened this issue · comments
部分的にルールを試すなら acot.config.js を
// @ts-check
/** @type {import('@acot/types').Config} */
module.exports = {
// extends: ['@acot'],
rules: {
'@acot/wcag/focusable-has-indicator': 'error'
},
presets: ['@acot/wcag'],
origin: 'http://localhost:3000',
paths: ['/']
};とする
rules だけじゃだめで presets が必要(rule が見つからないと言われる)
--launch-options で headless を false にすると動作確認に便利
yarn acot run --launch-options '{"headless":false, "slowMo": 250}'
@acot/wcag/focusable-has-indicator は 0.0.5 が出れば解決しそう
@acot/acot-runner-sitemap を入れるの良さそう
https://github.com/acot-a11y/acot/tree/canary/packages/acot-runner-sitemap
@acot/wcag/interactive-supports-focus (https://github.com/acot-a11y/acot/blob/canary/packages/acot-preset-wcag/docs/rules/interactive-supports-focus.md) は click イベントを持つ要素は、keydown イベントも持っていないといけないよというルール
多分、キーボードだけで操作する時に困るから
たしかに click イベントだけで、keydown イベントはない
ただ、a タグは keydown イベントがなくても focus 時に enter 押下で遷移するので false positive では...？
https://github.com/reactjs/react-a11y/blob/master/docs/rules/interactive-supports-focus.md だと tabIndex を持つことを強制するルールになっている
目的は同じでキーボード操作の支援
https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_focus_02 には
<!-- Good: anchor element with href is inherently focusable -->
<a href="javascript:void(0);" onclick="doSomething();">Click ALL the things!</a>って書いてるし、false positive っぽいな