@d-zero/a11y-check-scenarios 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 D-ZERO Co., Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# `@d-zero/a11y-check-scenarios`

package/dist/axe-puppeteer.d.ts

@@ -0,0 +1,3 @@
+import type { AxeResults } from 'axe-core';
+import type { Page } from 'puppeteer';
+export declare function runAxePuppeteer(page: Page, lang: string, log: (log: string) => void): Promise<AxeResults>;

package/dist/axe-puppeteer.js

@@ -0,0 +1,17 @@
+import { AxePuppeteer } from '@axe-core/puppeteer';
+import { delay } from '@d-zero/shared/delay';
+export async function runAxePuppeteer(page, lang, log) {
+    const mod = await import(`axe-core/locales/${lang}.json`, {
+        with: { type: 'json' },
+    });
+    const locale = mod.default;
+    log(`Analyze%dots%`);
+    const axeResults = await new AxePuppeteer(page)
+        .configure({
+        locale,
+    })
+        .analyze();
+    log(`Found ${axeResults.violations.length} violations, ${axeResults.incomplete.length} incomplete issues`);
+    await delay(600);
+    return axeResults;
+}

package/dist/axe.d.ts

@@ -0,0 +1,3 @@
+import type { A11yCheckAxeOptions } from './types.js';
+declare const _default: import("@d-zero/a11y-check-core").A11yCheckScenario<A11yCheckAxeOptions>;
+export default _default;

package/dist/axe.js

@@ -0,0 +1,25 @@
+import { createScenario } from '@d-zero/a11y-check-core';
+import { Cache } from '@d-zero/shared/cache';
+import { runAxePuppeteer } from './axe-puppeteer.js';
+import { convertResultsFromViolations } from './convert-results-from-violations.js';
+const cache = new Cache('a11y-check/axe', '.cache');
+export default createScenario((options) => {
+    return async (page, sizeName, log) => {
+        if (options?.cache === false) {
+            await cache.clear();
+        }
+        const axeLog = (message) => log(`🪓 ${message}`);
+        const key = page.url() + '#' + sizeName;
+        const cached = await cache.load(key, (key, value) => {
+            if (key === 'timestamp') {
+                return new Date(Date.parse(value));
+            }
+            return value;
+        });
+        if (cached) {
+            return convertResultsFromViolations(page, cached, sizeName, options?.screenshot ?? false, axeLog);
+        }
+        const axeResults = await runAxePuppeteer(page, options?.lang ?? 'ja', axeLog);
+        return convertResultsFromViolations(page, axeResults, sizeName, options?.screenshot ?? false, axeLog);
+    };
+});

package/dist/convert-results-from-node.d.ts

@@ -0,0 +1,8 @@
+import type { Style } from '@d-zero/a11y-check-core';
+import type { NodeResult } from 'axe-core';
+import type { Page } from 'puppeteer';
+export declare function convertResultsFromNode(page: Page, node: NodeResult, screenshot: boolean, log: (log: string) => void): Promise<{
+    screenshot: string | null;
+    style: Style | null;
+    landmark: string | null;
+} | null>;

package/dist/convert-results-from-node.js

@@ -0,0 +1,89 @@
+import path from 'node:path';
+import { hash } from '@d-zero/shared/hash';
+export async function convertResultsFromNode(page, node, screenshot, log) {
+    const target = node.target[0] && typeof node.target[0] === 'string' ? node.target[0] : null;
+    if (!target) {
+        return null;
+    }
+    log(`Node: ${target}`);
+    let screenshotName = null;
+    if (screenshot && target) {
+        log(`Screenshot: ${target}`);
+        const fileElement = await page.waitForSelector(target);
+        if (fileElement) {
+            const url = page.url();
+            const ssName = hash(url + target) + '.png';
+            const el = await fileElement
+                .screenshot({
+                path: path.resolve(process.cwd(), '.cache', ssName),
+            })
+                .catch(() => null);
+            if (el) {
+                screenshotName = ssName;
+            }
+        }
+    }
+    log(`Get style: ${target}`);
+    const style = await page.evaluate((selector) => {
+        const el = document.querySelector(selector);
+        if (!el) {
+            return null;
+        }
+        const style = globalThis.getComputedStyle(el);
+        const closest = {
+            closestBackgroundColor: null,
+            closestBackgroundImage: null,
+        };
+        let current = el.parentElement;
+        while (current) {
+            const currentStyle = globalThis.getComputedStyle(current);
+            if (currentStyle.backgroundColor !== 'rgba(0, 0, 0, 0)') {
+                closest.closestBackgroundColor = currentStyle.backgroundColor;
+            }
+            if (currentStyle.backgroundImage !== 'none') {
+                closest.closestBackgroundImage = currentStyle.backgroundImage;
+            }
+            if (closest.closestBackgroundColor || closest.closestBackgroundImage) {
+                break;
+            }
+            current = current.parentElement;
+        }
+        return {
+            color: style.color,
+            backgroundColor: style.backgroundColor,
+            backgroundImage: style.backgroundImage,
+            ...closest,
+        };
+    }, target);
+    const landmark = await page.evaluate((selector) => {
+        const el = document.querySelector(selector);
+        if (!el) {
+            return null;
+        }
+        if (el.closest('header, [role="banner"]')) {
+            return 'header';
+        }
+        if (el.closest('footer, [role="contentinfo"]')) {
+            return 'footer';
+        }
+        if (el.closest('nav, [role="navigation"]')) {
+            return 'nav';
+        }
+        if (el.closest('main, [role="main"]')) {
+            return 'main';
+        }
+        if (el.closest('aside, [role="complementary"]')) {
+            return 'aside';
+        }
+        const identicalComponent = el.closest('[id]');
+        if (identicalComponent) {
+            return `#${identicalComponent.id}`;
+        }
+        return null;
+    }, target);
+    return {
+        screenshot: screenshotName,
+        style,
+        landmark,
+    };
+}

package/dist/convert-results-from-violations.d.ts

@@ -0,0 +1,4 @@
+import type { A11yCheckResult } from '@d-zero/a11y-check-core';
+import type { AxeResults } from 'axe-core';
+import type { Page } from 'puppeteer';
+export declare function convertResultsFromViolations(page: Page, axeResults: AxeResults, sizeName: string, screenshot: boolean, log: (log: string) => void): Promise<A11yCheckResult[]>;

package/dist/convert-results-from-violations.js

@@ -0,0 +1,41 @@
+import { convertResultsFromNode } from './convert-results-from-node.js';
+import { detectLevel } from './detect-level.js';
+import { inferExplanation } from './infer-explanation.js';
+import { p } from './pargraph.js';
+import { tagsToSCs } from './tags-to-scs.js';
+export async function convertResultsFromViolations(page, axeResults, sizeName, screenshot, log) {
+    const results = [];
+    const violations = [...axeResults.incomplete, ...axeResults.violations];
+    for (const violation of violations) {
+        const nodeResults = violation.nodes;
+        for (const node of nodeResults) {
+            const nodeResult = await convertResultsFromNode(page, node, screenshot, log);
+            const explanation = inferExplanation(violation.id, node, nodeResult?.style ?? null);
+            results.push({
+                id: '',
+                url: page.url(),
+                tool: `${axeResults.testEngine.name} (v${axeResults.testEngine.version})`,
+                timestamp: new Date(axeResults.timestamp),
+                component: nodeResult?.landmark ?? null,
+                environment: sizeName,
+                targetNode: {
+                    value: node.html,
+                },
+                asIs: {
+                    value: p(`${violation.help}\n(${violation.helpUrl})`, violation.description, node.failureSummary),
+                },
+                toBe: {
+                    value: p(explanation?.main),
+                },
+                explanation: {
+                    value: p(explanation?.help),
+                },
+                wcagVersion: violation.tags.includes('wcag2a') ? 'WCAG2.0' : 'WCAG2.1',
+                scNumber: tagsToSCs(violation.tags),
+                level: detectLevel(violation.tags),
+                screenshot: nodeResult?.screenshot ?? null,
+            });
+        }
+    }
+    return results;
+}

package/dist/detect-level.d.ts

@@ -0,0 +1 @@
+export declare function detectLevel(tags: readonly string[]): "A" | "AA" | "AAA" | null;

package/dist/detect-level.js

@@ -0,0 +1,9 @@
+export function detectLevel(tags) {
+    return tags.includes('wcag2a')
+        ? 'A'
+        : tags.includes('wcag2aa')
+            ? 'AA'
+            : tags.includes('wcag2aaa')
+                ? 'AAA'
+                : null;
+}

package/dist/detect-version.d.ts

@@ -0,0 +1 @@
+export declare function detectLevel(tags: readonly string[]): "A" | "AA" | "AAA" | null;

package/dist/detect-version.js

@@ -0,0 +1,9 @@
+export function detectLevel(tags) {
+    return tags.includes('wcag2')
+        ? 'A'
+        : tags.includes('wcag21')
+            ? 'AA'
+            : tags.includes('wcag2aaa')
+                ? 'AAA'
+                : null;
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as scenario01 } from './scenario.js';
+export { default as scenario02 } from './scenario2.js';
+export * from './types.js';

package/dist/index.js

@@ -0,0 +1,3 @@
+export { default as scenario01 } from './scenario.js';
+export { default as scenario02 } from './scenario2.js';
+export * from './types.js';

package/dist/infer-explanation.d.ts

@@ -0,0 +1,4 @@
+import type { AxeRuleId, Explanation } from './types.js';
+import type { NodeResult } from 'axe-core';
+import { type Style } from '@d-zero/a11y-check-core';
+export declare function inferExplanation(id: AxeRuleId, node: NodeResult, style: Style | null): Explanation | null;

package/dist/infer-explanation.js

@@ -0,0 +1,390 @@
+import { colorContrastCheck, ColorContrastError, } from '@d-zero/a11y-check-core';
+import { br, p } from './pargraph.js';
+export function inferExplanation(id, node, style) {
+    switch (id) {
+        case 'accesskeys': {
+            return null;
+        }
+        case 'area-alt': {
+            return {
+                main: 'alt属性に「______」を設定してください。',
+                help: '',
+            };
+        }
+        case 'aria-allowed-attr': {
+            return {
+                main: 'aria属性に「______」を設定してください。',
+                help: '',
+            };
+        }
+        case 'aria-allowed-role': {
+            return null;
+        }
+        case 'aria-braille-equivalent': {
+            return null;
+        }
+        case 'aria-command-name': {
+            return null;
+        }
+        case 'aria-conditional-attr': {
+            return null;
+        }
+        case 'aria-deprecated-role': {
+            return null;
+        }
+        case 'aria-dialog-name': {
+            return null;
+        }
+        case 'aria-hidden-body': {
+            return null;
+        }
+        case 'aria-hidden-focus': {
+            return null;
+        }
+        case 'aria-input-field-name': {
+            return null;
+        }
+        case 'aria-meter-name': {
+            return null;
+        }
+        case 'aria-progressbar-name': {
+            return null;
+        }
+        case 'aria-prohibited-attr': {
+            return null;
+        }
+        case 'aria-required-attr': {
+            return null;
+        }
+        case 'aria-required-children': {
+            return null;
+        }
+        case 'aria-required-parent': {
+            return null;
+        }
+        case 'aria-roledescription': {
+            return null;
+        }
+        case 'aria-roles': {
+            return null;
+        }
+        case 'aria-text': {
+            return null;
+        }
+        case 'aria-toggle-field-name': {
+            return null;
+        }
+        case 'aria-tooltip-name': {
+            return null;
+        }
+        case 'aria-treeitem-name': {
+            return null;
+        }
+        case 'aria-valid-attr-value': {
+            return null;
+        }
+        case 'aria-valid-attr': {
+            return null;
+        }
+        case 'audio-caption': {
+            return null;
+        }
+        case 'autocomplete-valid': {
+            return null;
+        }
+        case 'avoid-inline-spacing': {
+            return null;
+        }
+        case 'blink': {
+            return null;
+        }
+        case 'button-name': {
+            return null;
+        }
+        case 'bypass': {
+            return null;
+        }
+        case 'color-contrast-enhanced': {
+            return null;
+        }
+        case 'color-contrast': {
+            if (node.any?.[0]) {
+                let main = '';
+                let contrastResult = style ? colorContrastCheck(style) : null;
+                let needCheck = null;
+                let message = null;
+                switch (contrastResult) {
+                    case null: {
+                        needCheck = 'N/A';
+                        message = '要素のスタイル取得に失敗しました。';
+                        break;
+                    }
+                    case ColorContrastError.DOES_NOT_DETERMINE_FOREGROUND: {
+                        needCheck = 'N/A';
+                        message = 'フォントの色が判定できません。';
+                        break;
+                    }
+                    case ColorContrastError.DOES_NOT_DETERMINE_BACKGROUND: {
+                        needCheck = 'WARNING';
+                        message = '背景色が判定できないかったので#FFFFFFとして判定しています。';
+                        contrastResult = style
+                            ? colorContrastCheck({
+                                ...style,
+                                backgroundColor: 'rgb(255, 255, 255)',
+                            })
+                            : null;
+                        break;
+                    }
+                    case ColorContrastError.FOREGROUND_COLOR_HAS_ALPHA: {
+                        needCheck = 'N/A';
+                        message = 'フォントの色に透明度が設定されています。';
+                        break;
+                    }
+                    case ColorContrastError.BACKGROUND_COLOR_HAS_ALPHA: {
+                        needCheck = 'N/A';
+                        message = '背景色に透明度が設定されています。';
+                        break;
+                    }
+                    default: {
+                        if (node.any[0].message.includes('判定できません')) {
+                            needCheck = 'WARNING';
+                        }
+                        if (contrastResult.AA === false) {
+                            main = p('AAのコントラスト比を満たしていません。', br(`前景色: ${contrastResult.foreground.hex}`, `背景色: ${contrastResult.background.hex}`, `コントラスト比: ${contrastResult.ratioText}`), 'コントラスト比は4.5:1を満たすようにしてください。');
+                        }
+                    }
+                }
+                return {
+                    main,
+                    help: p(needCheck ? `${needCheck} 目視で確認してください。` : null, node.any[0].message, message, typeof contrastResult === 'number'
+                        ? null
+                        : br(`前景色: ${contrastResult?.foreground.hex ?? '判定不可'}`, `背景色: ${contrastResult?.background.hex ?? '判定不可'}`, `コントラスト比: ${contrastResult?.ratioText ?? '判定不可'}`, `AA: ${contrastResult?.AA ? '適合' : '不適合'}`, `AAA: ${contrastResult?.AAA ? '適合' : '不適合'}`), br(`font-size: ${node.any[0].data.fontSize}`, `font-weight: ${node.any[0].data.fontWeight}`, `color: ${style?.color ?? null}`, `background-color: ${style?.backgroundColor ?? null}`, `background-image: ${style?.backgroundImage ?? null}`, `先祖要素 background-color: ${style?.closestBackgroundColor ?? null}`, `先祖要素 background-image: ${style?.closestBackgroundImage ?? null}`)),
+                };
+            }
+            return null;
+        }
+        case 'css-orientation-lock': {
+            return null;
+        }
+        case 'definition-list': {
+            return null;
+        }
+        // cspell:disable-next-line
+        case 'dlitem': {
+            return null;
+        }
+        case 'document-title': {
+            return null;
+        }
+        case 'duplicate-id-active': {
+            return null;
+        }
+        case 'duplicate-id-aria': {
+            return null;
+        }
+        case 'duplicate-id': {
+            return null;
+        }
+        case 'empty-heading': {
+            return null;
+        }
+        case 'empty-table-header': {
+            // td要素に変更してください。
+            return null;
+        }
+        case 'focus-order-semantics': {
+            return null;
+        }
+        case 'form-field-multiple-labels': {
+            // 「性別」のラベルはfieldset/legend要素をつかって複数のラジオボタンをグルーピングするように修正してください。
+            return null;
+        }
+        case 'frame-focusable-content': {
+            return null;
+        }
+        case 'frame-tested': {
+            return null;
+        }
+        case 'frame-title-unique': {
+            return null;
+        }
+        case 'frame-title': {
+            return null;
+        }
+        case 'heading-order': {
+            return null;
+        }
+        case 'hidden-content': {
+            return null;
+        }
+        case 'html-has-lang': {
+            return {
+                main: 'html要素にlang属性を設定してください。日本語の場合は「ja」、英語の場合は「en」を設定してください。',
+                help: '',
+            };
+        }
+        case 'html-lang-valid': {
+            return null;
+        }
+        case 'html-xml-lang-mismatch': {
+            return null;
+        }
+        case 'identical-links-same-purpose': {
+            return null;
+        }
+        case 'image-alt': {
+            return null;
+        }
+        case 'image-redundant-alt': {
+            return null;
+        }
+        case 'input-button-name': {
+            return null;
+        }
+        case 'input-image-alt': {
+            return null;
+        }
+        case 'label-content-name-mismatch': {
+            return null;
+        }
+        case 'label-title-only': {
+            return null;
+        }
+        case 'label': {
+            return null;
+        }
+        case 'landmark-banner-is-top-level': {
+            return null;
+        }
+        case 'landmark-complementary-is-top-level': {
+            return null;
+        }
+        case 'landmark-contentinfo-is-top-level': {
+            return null;
+        }
+        case 'landmark-main-is-top-level': {
+            return null;
+        }
+        case 'landmark-no-duplicate-banner': {
+            return null;
+        }
+        case 'landmark-no-duplicate-contentinfo': {
+            return null;
+        }
+        case 'landmark-no-duplicate-main': {
+            return null;
+        }
+        case 'landmark-one-main': {
+            return {
+                main: 'ページのメインコンテンツをmain要素で囲んでください。header要素やfooter要素とは別の領域が望ましいです。',
+                help: '',
+            };
+        }
+        case 'landmark-unique': {
+            return null;
+        }
+        case 'link-in-text-block': {
+            return null;
+        }
+        case 'link-name': {
+            return null;
+        }
+        case 'list': {
+            return null;
+        }
+        case 'listitem': {
+            return null;
+        }
+        case 'marquee': {
+            return null;
+        }
+        case 'meta-refresh-no-exceptions': {
+            return null;
+        }
+        case 'meta-refresh': {
+            return null;
+        }
+        case 'meta-viewport-large': {
+            return null;
+        }
+        case 'meta-viewport': {
+            return null;
+        }
+        case 'nested-interactive': {
+            return null;
+        }
+        case 'no-autoplay-audio': {
+            return null;
+        }
+        case 'object-alt': {
+            return null;
+        }
+        case 'p-as-heading': {
+            return null;
+        }
+        case 'page-has-heading-one': {
+            return null;
+        }
+        case 'presentation-role-conflict': {
+            return null;
+        }
+        case 'region': {
+            return {
+                main: 'main要素、header要素、footer要素などのランドマーク要素のいずれかの中にあるようにしてください。',
+                help: '',
+            };
+        }
+        case 'role-img-alt': {
+            return null;
+        }
+        case 'scope-attr-valid': {
+            return null;
+        }
+        case 'scrollable-region-focusable': {
+            // tabindex="0"を設定してください。
+            return null;
+        }
+        case 'select-name': {
+            return null;
+        }
+        case 'server-side-image-map': {
+            return null;
+        }
+        case 'skip-link': {
+            return null;
+        }
+        case 'summary-name': {
+            return null;
+        }
+        case 'svg-img-alt': {
+            return null;
+        }
+        case 'tabindex': {
+            return null;
+        }
+        case 'table-duplicate-name': {
+            return null;
+        }
+        case 'table-fake-caption': {
+            return null;
+        }
+        case 'target-size': {
+            return null;
+        }
+        case 'td-has-header': {
+            return null;
+        }
+        case 'td-headers-attr': {
+            return null;
+        }
+        case 'th-has-data-cells': {
+            return null;
+        }
+        case 'valid-lang': {
+            return null;
+        }
+        case 'video-caption': {
+            return null;
+        }
+    }
+}

package/dist/pargraph.d.ts

@@ -0,0 +1,2 @@
+export declare function p(...texts: (string | null | undefined)[]): string;
+export declare function br(...texts: (string | null | undefined)[]): string;

package/dist/pargraph.js

@@ -0,0 +1,6 @@
+export function p(...texts) {
+    return texts.filter(Boolean).join('\n\n');
+}
+export function br(...texts) {
+    return texts.filter(Boolean).join('\n');
+}

package/dist/sc.d.ts

@@ -0,0 +1 @@
+export declare function sc(tags: string[]): string;

package/dist/sc.js

@@ -0,0 +1,23 @@
+import { wcag } from '@d-zero/db-wcag';
+const scVersions = new Set(
+// @ts-ignore
+Object.keys(wcag.successCriterions['wcag_2.2'].en));
+export function sc(tags) {
+    return tags.map(_sc).filter(Boolean).join('\n');
+}
+function _sc(tag) {
+    if (!tag.startsWith('wcag') || tag.endsWith('a')) {
+        return null;
+    }
+    const num = /\d+/.exec(tag)?.[0];
+    if (!num) {
+        return null;
+    }
+    for (const version of scVersions) {
+        const crushedNum = version.replaceAll('.', '');
+        if (tag === crushedNum) {
+            return version;
+        }
+    }
+    return null;
+}

package/dist/scenario.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("@d-zero/a11y-check-core").ScenarioCreator<import("@d-zero/a11y-check-core").CoreOptions>;
+export default _default;

package/dist/scenario.js

@@ -0,0 +1,260 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { createScenario } from '@d-zero/a11y-check-core';
+import { BinaryCache } from '@d-zero/shared/cache';
+import { delay } from '@d-zero/shared/delay';
+import { hash } from '@d-zero/shared/hash';
+const scenarioId = 'a11y-check/scenario01';
+export default createScenario((options) => {
+    const cache = new BinaryCache(scenarioId, options?.cacheDir);
+    const tests = [
+        {
+            name: 'SC 2.5.8 Target Size (Minimum)',
+            description: 'Check if the target size is at least 44px by 44px',
+            async test(page) {
+                await page.evaluate(() => {
+                    const hitEl = [
+                        ...document.querySelectorAll('a,button,input,select,textarea,label,summary'),
+                    ].filter((el) => !(el.matches('input,select,textarea') && el.closest('label')));
+                    const hits = [...hitEl]
+                        .map((el) => {
+                        const box = el.getBoundingClientRect();
+                        if (box.width < 0 && box.height < 0) {
+                            return null;
+                        }
+                        if (box.width < 24 || box.height < 24) {
+                            return {
+                                type: 'under',
+                                x: box.left + box.width / 2,
+                                y: box.top + box.height / 2,
+                                rect: box,
+                            };
+                        }
+                        return {
+                            type: 'over',
+                            rect: box,
+                        };
+                    })
+                        .filter((hit) => hit !== null);
+                    const cover = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+                    const width = document.documentElement.scrollWidth;
+                    const height = document.documentElement.scrollHeight;
+                    cover.id = '__a11y-check-scenario01';
+                    cover.viewBox.baseVal.x = 0;
+                    cover.viewBox.baseVal.y = 0;
+                    cover.viewBox.baseVal.width = width;
+                    cover.viewBox.baseVal.height = height;
+                    cover.setAttribute('width', width + 'px');
+                    cover.setAttribute('height', height + 'px');
+                    cover.style.position = 'absolute';
+                    cover.style.top = '0';
+                    cover.style.left = '0';
+                    cover.style.zIndex = '100000';
+                    cover.style.pointerEvents = 'none';
+                    const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+                    for (const hit of hits) {
+                        if (hit.type === 'under') {
+                            const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+                            circle.cx.baseVal.value = hit.x;
+                            circle.cy.baseVal.value = hit.y;
+                            circle.r.baseVal.value = 12;
+                            circle.style.fill = 'rgba(255, 0, 0, 0.5)';
+                            g.append(circle);
+                        }
+                        const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+                        rect.x.baseVal.value = hit.rect.left;
+                        rect.y.baseVal.value = hit.rect.top;
+                        rect.width.baseVal.value = hit.rect.width;
+                        rect.height.baseVal.value = hit.rect.height;
+                        rect.style.fill = 'rgba(255, 0, 0, 0.5)';
+                        g.append(rect);
+                    }
+                    cover.append(g);
+                    document.body.append(cover);
+                });
+            },
+            async cleanUp(page) {
+                await page.evaluate(() => {
+                    const cover = document.getElementById('__a11y-check-scenario01');
+                    if (cover) {
+                        cover.remove();
+                    }
+                });
+            },
+        },
+        {
+            name: 'SC 1.4.4 Text Resize',
+            description: 'Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.',
+            async test(page) {
+                await page.evaluate(() => {
+                    const style = document.createElement('style');
+                    style.id = '__a11y-check-scenario01';
+                    style.textContent = `:root { font-size: 200% !important; }`;
+                    document.head.append(style);
+                });
+            },
+            async cleanUp(page) {
+                await page.evaluate(() => {
+                    const style = document.getElementById('__a11y-check-scenario01');
+                    if (style) {
+                        style.remove();
+                    }
+                });
+            },
+        },
+        {
+            name: 'SC 1.4.12 Text Spacing',
+            description: 'Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.',
+            async test(page) {
+                await page.evaluate(() => {
+                    const style = document.createElement('style');
+                    style.id = '__a11y-check-scenario01';
+                    style.textContent = `* {
+						/* Line height (line spacing) to at least 1.5 times the font size; */
+						line-height: 1.5 !important;
+						/* Spacing following paragraphs to at least 2 times the font size; */
+						margin-block-end: 2em !important;
+						/* Letter spacing (tracking) to at least 0.12 times the font size; */
+						letter-spacing: 0.12em !important;
+						/* Word spacing to at least 0.16 times the font size. */
+						word-spacing: 0.16em !important;
+					}`;
+                    document.head.append(style);
+                });
+            },
+            async cleanUp(page) {
+                await page.evaluate(() => {
+                    const style = document.getElementById('__a11y-check-scenario01');
+                    if (style) {
+                        style.remove();
+                    }
+                });
+            },
+        },
+    ];
+    return {
+        id: scenarioId,
+        async exec(page, sizeName, logger) {
+            // Wait Scroll End
+            await delay(2000);
+            if (options?.cache === false) {
+                await cache.clear();
+            }
+            const needAnalysis = [];
+            for (const test of tests) {
+                const key = page.url() + '#' + sizeName + '@' + test.name + '.png';
+                logger(test.name + ': Check if the key exists in the cache');
+                const exists = await cache.exists(key);
+                if (exists) {
+                    logger(test.name + ': The key exists in the cache');
+                    return {};
+                }
+                logger(`${test.name}: ${test.description}`);
+                await test.test(page);
+                logger(`${test.name}: Screenshot`);
+                let bin;
+                let retry = 0;
+                // eslint-disable-next-line no-constant-condition
+                while (true) {
+                    bin = await page.screenshot({
+                        type: 'png',
+                        fullPage: true,
+                        encoding: 'binary',
+                    });
+                    if (bin.length > 1) {
+                        break;
+                    }
+                    if (retry > 5) {
+                        throw new Error([
+                            //
+                            'Failed to take a screenshot (scenario01)',
+                            `\tURL: ${page.url()}`,
+                            `\tSize: ${sizeName}`,
+                            `\tTest: ${test.name}`,
+                        ].join('\n'));
+                    }
+                    const retryTime = retry * 1000;
+                    logger(`${test.name}: Retry (${retry}times) to take a screenshot%dots% %countdown(${retryTime},${hash(key)}_${retryTime})%ms`);
+                    await delay(retryTime);
+                    retry++;
+                }
+                const cachedFileName = await cache.store(key, bin);
+                logger(`${test.name}: Clean up`);
+                await test.cleanUp(page);
+                needAnalysis.push({
+                    scenarioId,
+                    subKey: test.name,
+                    id: '',
+                    url: await page.url(),
+                    tool: `a11y-check-scenario01: ${test.name}`,
+                    timestamp: new Date(),
+                    component: null,
+                    environment: sizeName,
+                    data: cachedFileName,
+                });
+            }
+            return {
+                needAnalysis,
+            };
+        },
+        async analyze(results, logger) {
+            for (const test of tests) {
+                const element = [];
+                for (const data of results) {
+                    if (!data.data) {
+                        logger(`No screenshot: ${data.url}`);
+                        continue;
+                    }
+                    if (data.subKey !== test.name) {
+                        continue;
+                    }
+                    const img = await cache.loadDirectly(data.data);
+                    if (!img) {
+                        logger(`Failed to load the screenshot: ${data.url}`);
+                        continue;
+                    }
+                    const base64 = Buffer.from(img).toString('base64');
+                    element.push(`
+					<p>${new URL(data.url).pathname} [${data.environment}]: ${data.subKey}</p>
+					<img src="data:image/png;base64,${base64}" alt="${data.tool}" width="100%">
+				`);
+                }
+                const html = `<!DOCTYPE html>
+					<html lang="ja">
+					<head>
+						<meta charset="UTF-8">
+						<title>Accessibility Check Scenario 01: ${test.name}</title>
+						<style>
+							html {
+								font-size: 100%;
+							}
+							body {
+								background: black;
+							}
+							p {
+								position: sticky;
+								top: 0;
+								background: #000;
+								color: #fff;
+								padding: 1em;
+							}
+							img {
+								max-width: 100%;
+								height: auto;
+								width: 100rem;
+								margin: 0 auto;
+								display: block;
+							}
+						</style>
+					</head>
+					<body>
+						${element.join('\n')}
+					</body>
+					</html>`;
+                const fileName = `a11y-check-scenario01_${encodeURI(test.name)}.html`;
+                logger(`Saving the result to ${fileName}`);
+                await fs.writeFile(path.resolve(process.cwd(), fileName), html, 'utf8');
+            }
+        },
+    };
+});

package/dist/scenario2.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("@d-zero/a11y-check-core").ScenarioCreator<import("@d-zero/a11y-check-core").CoreOptions>;
+export default _default;

package/dist/scenario2.js

@@ -0,0 +1,77 @@
+import { createScenario } from '@d-zero/a11y-check-core';
+import { Cache } from '@d-zero/shared/cache';
+import c from 'ansi-colors';
+const scenarioId = 'a11y-check/scenario02';
+export default createScenario((options) => {
+    const cache = new Cache(scenarioId, options?.cacheDir);
+    return {
+        id: scenarioId,
+        async exec(page, sizeName, logger) {
+            if (options?.cache === false) {
+                await cache.clear();
+            }
+            const key = page.url() + '#' + sizeName + '@' + scenarioId;
+            const cached = await cache.load(key, (key, value) => {
+                if (key === 'timestamp') {
+                    return new Date(Date.parse(value));
+                }
+                return value;
+            });
+            if (cached) {
+                return {
+                    needAnalysis: cached,
+                };
+            }
+            const needAnalysis = [];
+            const navigations = ['header', 'nav', 'footer', "[class*='nav' i]"];
+            for (const selector of navigations) {
+                const logBase = `Finding "${selector}"`;
+                logger(`Finding "${selector}"`);
+                page.on('console', (msg) => {
+                    const msgType = msg.type();
+                    switch (msgType) {
+                        case 'error': {
+                            logger(`${logBase}: ${c.red(msg.text())}`);
+                            break;
+                        }
+                        default: {
+                            logger(`${logBase}: ${c.gray(msg.text())}`);
+                            break;
+                        }
+                    }
+                });
+                const outerHTML = await page.evaluate((selector) => {
+                    return [...document.querySelectorAll(selector)].map((el) => el.outerHTML);
+                }, selector);
+                // get selectorがいる
+                // HTMLの重複をどうにかする
+                if (!outerHTML || outerHTML.length === 0) {
+                    continue;
+                }
+                logger(`Found "${selector}" ${outerHTML.length} elements`);
+                needAnalysis.push({
+                    scenarioId,
+                    id: '',
+                    url: await page.url(),
+                    tool: 'a11y-check-scenario02',
+                    timestamp: new Date(),
+                    component: selector,
+                    environment: sizeName,
+                    data: outerHTML.join('\n\n'),
+                });
+            }
+            await cache.store(key, needAnalysis);
+            return {
+                needAnalysis,
+            };
+        },
+        analyze(results, logger) {
+            for (const data of results) {
+                if (!data.data) {
+                    logger(`No navigations: ${data.url}`);
+                    continue;
+                }
+            }
+        },
+    };
+});

package/dist/tags-to-scs.d.ts

@@ -0,0 +1,2 @@
+export declare function tagsToSCs(tags: string[]): string;
+export declare function tagToSC(tag: string): "1.1.1" | "1.2.1" | "1.2.2" | "1.2.3" | "1.2.4" | "1.2.5" | "1.2.6" | "1.2.7" | "1.2.8" | "1.2.9" | "1.3.1" | "1.3.2" | "1.3.3" | "1.3.4" | "1.3.5" | "1.3.6" | "1.4.1" | "1.4.2" | "1.4.3" | "1.4.4" | "1.4.5" | "1.4.6" | "1.4.7" | "1.4.8" | "1.4.9" | "1.4.10" | "1.4.11" | "1.4.12" | "1.4.13" | "2.1.1" | "2.1.2" | "2.1.3" | "2.1.4" | "2.2.1" | "2.2.2" | "2.2.3" | "2.2.4" | "2.2.5" | "2.2.6" | "2.3.1" | "2.3.2" | "2.3.3" | "2.4.1" | "2.4.2" | "2.4.3" | "2.4.4" | "2.4.5" | "2.4.6" | "2.4.7" | "2.4.8" | "2.4.9" | "2.4.10" | "2.4.11" | "2.4.12" | "2.4.13" | "2.5.1" | "2.5.2" | "2.5.3" | "2.5.4" | "2.5.5" | "2.5.6" | "2.5.7" | "2.5.8" | "3.1.1" | "3.1.2" | "3.1.3" | "3.1.4" | "3.1.5" | "3.1.6" | "3.2.1" | "3.2.2" | "3.2.3" | "3.2.4" | "3.2.5" | "3.2.6" | "3.3.1" | "3.3.2" | "3.3.3" | "3.3.4" | "3.3.5" | "3.3.6" | "3.3.7" | "3.3.8" | "3.3.9" | "4.1.2" | "4.1.3" | null;

package/dist/tags-to-scs.js

@@ -0,0 +1,23 @@
+import { wcag } from '@d-zero/db-wcag';
+const scVersions = new Set(
+// @ts-ignore
+Object.keys(wcag.successCriterions['wcag_2.2'].en));
+export function tagsToSCs(tags) {
+    return tags.map(tagToSC).filter(Boolean).join('\n');
+}
+export function tagToSC(tag) {
+    if (!tag.startsWith('wcag') || tag.endsWith('a')) {
+        return null;
+    }
+    const num = /\d+/.exec(tag)?.[0];
+    if (!num) {
+        return null;
+    }
+    for (const version of scVersions) {
+        const crushedNum = version.replaceAll('.', '');
+        if (num === crushedNum) {
+            return version;
+        }
+    }
+    return null;
+}

package/dist/types.d.ts

@@ -0,0 +1,2 @@
+import type { CoreOptions } from '@d-zero/a11y-check-core';
+export type ScenarioOptions = CoreOptions & {};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,35 @@
+{
+	"name": "@d-zero/a11y-check-scenarios",
+	"version": "0.2.0",
+	"description": "Accessibility Checker Scenario Collection",
+	"author": "D-ZERO",
+	"license": "MIT",
+	"private": false,
+	"publishConfig": {
+		"access": "public"
+	},
+	"type": "module",
+	"exports": {
+		".": {
+			"import": "./dist/index.js",
+			"types": "./dist/index.d.ts"
+		}
+	},
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"build": "tsc",
+		"watch": "tsc --watch",
+		"clean": "tsc --build --clean"
+	},
+	"dependencies": {
+		"@d-zero/a11y-check-core": "0.2.0",
+		"@d-zero/shared": "0.6.0",
+		"ansi-colors": "4.1.3"
+	},
+	"devDependencies": {
+		"@d-zero/puppeteer-page": "0.2.0"
+	},
+	"gitHead": "1eb1c03400580040119121e11ffb33acd876fe1b"
+}