@techsio/storybook-better-a11y 0.0.6 → 0.0.7

package/dist/{visionSimulatorFilters.js → 100.js}

@@ -1,3 +1,25 @@
+const ADDON_ID = 'storybook/a11y';
+const PANEL_ID = `${ADDON_ID}/panel`;
+"a11y";
+"vision";
+const RESULT = `${ADDON_ID}/result`;
+const REQUEST = `${ADDON_ID}/request`;
+const RUNNING = `${ADDON_ID}/running`;
+const ERROR = `${ADDON_ID}/error`;
+const MANUAL = `${ADDON_ID}/manual`;
+const SELECT = `${ADDON_ID}/select`;
+const DOCUMENTATION_LINK = 'writing-tests/accessibility-testing';
+const DOCUMENTATION_DISCREPANCY_LINK = `${DOCUMENTATION_LINK}#why-are-my-tests-failing-in-different-environments`;
+const EVENTS = {
+    RESULT: RESULT,
+    REQUEST: REQUEST,
+    RUNNING: RUNNING,
+    ERROR: ERROR,
+    MANUAL: MANUAL,
+    SELECT: SELECT
+};
+const STATUS_TYPE_ID_COMPONENT_TEST = 'storybook/component-test';
+const STATUS_TYPE_ID_A11Y = 'storybook/a11y';
 const filters = {
     blurred: {
         label: 'Blurred vision',
@@ -97,4 +119,4 @@ const filterDefs = `<svg id="storybook-a11y-vision-filters" style="display: none
     </filter>
   </defs>
 </svg>`;
-export { filterDefs, filters };
+export { ADDON_ID, DOCUMENTATION_DISCREPANCY_LINK, EVENTS, PANEL_ID, STATUS_TYPE_ID_A11Y, STATUS_TYPE_ID_COMPONENT_TEST, filterDefs, filters };

package/dist/{apcaChecker.js → 699.js}

@@ -1,4 +1,44 @@
+import { __webpack_require__ } from "./rslib-runtime.js";
+import { expect } from "storybook/test";
+import { ElementA11yParameterError } from "storybook/internal/preview-errors";
 import { global } from "@storybook/global";
+import { addons, useCallback, useEffect, waitForAnimations } from "storybook/preview-api";
+import { EVENTS, filters, filterDefs, PANEL_ID } from "./100.js";
+var preview_namespaceObject = {};
+__webpack_require__.r(preview_namespaceObject);
+__webpack_require__.d(preview_namespaceObject, {
+    afterEach: ()=>afterEach,
+    decorators: ()=>decorators,
+    initialGlobals: ()=>initialGlobals,
+    parameters: ()=>preview_parameters
+});
+const { document: a11yRunnerUtils_document } = global;
+const withLinkPaths = (results, storyId)=>{
+    const pathname = a11yRunnerUtils_document.location.pathname.replace(/iframe\.html$/, '');
+    const enhancedResults = {
+        ...results
+    };
+    const propertiesToAugment = [
+        'incomplete',
+        'passes',
+        'violations'
+    ];
+    propertiesToAugment.forEach((key)=>{
+        if (Array.isArray(results[key])) enhancedResults[key] = results[key].map((result)=>({
+                ...result,
+                nodes: result.nodes.map((node, index)=>{
+                    const id = `${key}.${result.id}.${index + 1}`;
+                    const linkPath = `${pathname}?path=/story/${storyId}&addonPanel=${PANEL_ID}&a11ySelection=${id}`;
+                    return {
+                        id,
+                        ...node,
+                        linkPath
+                    };
+                })
+            }));
+    });
+    return enhancedResults;
+};
 const { document: apcaChecker_document } = global;
 const DEFAULT_APCA_OPTIONS = {
     level: 'bronze',
@@ -285,4 +325,216 @@ function getImpact(contrastValue, threshold, maxContrast) {
     if (difference > 10) return 'moderate';
     return 'minor';
 }
-export { runAPCACheck };
+const { document: a11yRunner_document } = global;
+const channel = addons.getChannel();
+const DEFAULT_PARAMETERS = {
+    config: {},
+    options: {}
+};
+const DISABLED_RULES = [
+    'region'
+];
+const queue = [];
+let isRunning = false;
+const runNext = async ()=>{
+    if (0 === queue.length) {
+        isRunning = false;
+        return;
+    }
+    isRunning = true;
+    const next = queue.shift();
+    if (next) await next();
+    runNext();
+};
+const run = async (input = DEFAULT_PARAMETERS, storyId)=>{
+    const axeCore = await import("axe-core");
+    const axe = axeCore?.default || globalThis.axe;
+    const { config = {}, options = {} } = input;
+    if (input.element) throw new ElementA11yParameterError();
+    const context = {
+        include: a11yRunner_document?.body,
+        exclude: [
+            '.sb-wrapper',
+            '#storybook-docs',
+            '#storybook-highlights-root'
+        ]
+    };
+    if (input.context) {
+        const hasInclude = 'object' == typeof input.context && 'include' in input.context && void 0 !== input.context.include;
+        const hasExclude = 'object' == typeof input.context && 'exclude' in input.context && void 0 !== input.context.exclude;
+        if (hasInclude) context.include = input.context.include;
+        else if (!hasInclude && !hasExclude) context.include = input.context;
+        if (hasExclude) context.exclude = context.exclude.concat(input.context.exclude);
+    }
+    axe.reset();
+    const configWithDefault = {
+        ...config,
+        rules: [
+            ...DISABLED_RULES.map((id)=>({
+                    id,
+                    enabled: false
+                })),
+            ...config?.rules ?? []
+        ]
+    };
+    axe.configure(configWithDefault);
+    return new Promise((resolve, reject)=>{
+        const highlightsRoot = a11yRunner_document?.getElementById('storybook-highlights-root');
+        if (highlightsRoot) highlightsRoot.style.display = 'none';
+        const task = async ()=>{
+            try {
+                const result = await axe.run(context, options);
+                let contextElement = a11yRunner_document;
+                if (context.include instanceof Element) contextElement = context.include;
+                else if (Array.isArray(context.include)) {
+                    const first = context.include[0];
+                    if (first instanceof Element) contextElement = first;
+                    else if ('string' == typeof first) contextElement = a11yRunner_document.querySelector(first) || a11yRunner_document;
+                } else if ('string' == typeof context.include) contextElement = a11yRunner_document.querySelector(context.include) || a11yRunner_document;
+                const excludeSelectors = Array.isArray(context.exclude) ? context.exclude.filter((value)=>'string' == typeof value) : 'string' == typeof context.exclude ? [
+                    context.exclude
+                ] : [];
+                const apcaResult = await runAPCACheck(contextElement, input.apca, excludeSelectors);
+                if (apcaResult.nodes.length > 0) result.violations.push(apcaResult);
+                else result.passes.push(apcaResult);
+                const resultWithLinks = withLinkPaths(result, storyId);
+                globalThis.__TECHSIO_A11Y_RESULTS__ = {
+                    storyId,
+                    results: resultWithLinks,
+                    timestamp: Date.now()
+                };
+                resolve(resultWithLinks);
+            } catch (error) {
+                reject(error);
+            }
+        };
+        queue.push(task);
+        if (!isRunning) runNext();
+        if (highlightsRoot) highlightsRoot.style.display = '';
+    });
+};
+channel.on(EVENTS.MANUAL, async (storyId, input = DEFAULT_PARAMETERS)=>{
+    try {
+        await waitForAnimations();
+        const result = await run(input, storyId);
+        const resultJson = JSON.parse(JSON.stringify(result));
+        channel.emit(EVENTS.RESULT, resultJson, storyId);
+    } catch (error) {
+        channel.emit(EVENTS.ERROR, error);
+    }
+});
+function getIsVitestStandaloneRun() {
+    try {
+        return 'false' === ({
+            MODE: "production",
+            DEV: false,
+            PROD: true,
+            BASE_URL: "/",
+            ASSET_PREFIX: "auto"
+        }).VITEST_STORYBOOK;
+    } catch (e) {
+        return false;
+    }
+}
+const knownFilters = Object.values(filters).map((f)=>f.filter);
+const knownFiltersRegExp = new RegExp(`\\b(${knownFilters.join('|')})\\b`, 'g');
+const withVisionSimulator = (StoryFn, { globals })=>{
+    const { vision } = globals;
+    const applyVisionFilter = useCallback(()=>{
+        const existingFilters = document.body.style.filter.replaceAll(knownFiltersRegExp, '').trim();
+        const visionFilter = filters[vision]?.filter;
+        if (visionFilter && document.body.classList.contains('sb-show-main')) if (existingFilters && 'none' !== existingFilters) document.body.style.filter = `${existingFilters} ${visionFilter}`;
+        else document.body.style.filter = visionFilter;
+        else document.body.style.filter = existingFilters || 'none';
+        return ()=>document.body.style.filter = existingFilters || 'none';
+    }, [
+        vision
+    ]);
+    useEffect(()=>{
+        const cleanup = applyVisionFilter();
+        const observer = new MutationObserver(()=>applyVisionFilter());
+        observer.observe(document.body, {
+            attributeFilter: [
+                'class'
+            ]
+        });
+        return ()=>{
+            cleanup();
+            observer.disconnect();
+        };
+    }, [
+        applyVisionFilter
+    ]);
+    useEffect(()=>{
+        document.body.insertAdjacentHTML('beforeend', filterDefs);
+        return ()=>{
+            const filterDefsElement = document.getElementById('storybook-a11y-vision-filters');
+            filterDefsElement?.parentElement?.removeChild(filterDefsElement);
+        };
+    }, []);
+    return StoryFn();
+};
+let vitestMatchersExtended = false;
+const decorators = [
+    withVisionSimulator
+];
+const afterEach = async ({ id: storyId, reporting, parameters, globals, viewMode })=>{
+    const a11yParameter = parameters.a11y;
+    const a11yGlobals = globals.a11y;
+    const shouldRunEnvironmentIndependent = a11yParameter?.disable !== true && a11yParameter?.test !== 'off' && a11yGlobals?.manual !== true;
+    const getMode = ()=>{
+        switch(a11yParameter?.test){
+            case 'todo':
+                return 'warning';
+            case 'error':
+            default:
+                return 'failed';
+        }
+    };
+    if (shouldRunEnvironmentIndependent && 'story' === viewMode) try {
+        const result = await run(a11yParameter, storyId);
+        if (result) {
+            const hasViolations = (result?.violations.length ?? 0) > 0;
+            reporting.addReport({
+                type: 'a11y',
+                version: 1,
+                result,
+                status: hasViolations ? getMode() : 'passed'
+            });
+            if (getIsVitestStandaloneRun()) {
+                if (hasViolations && 'failed' === getMode()) {
+                    if (!vitestMatchersExtended) {
+                        const { toHaveNoViolations } = await import("vitest-axe/matchers");
+                        expect.extend({
+                            toHaveNoViolations
+                        });
+                        vitestMatchersExtended = true;
+                    }
+                    expect(result).toHaveNoViolations();
+                }
+            }
+        }
+    } catch (e) {
+        reporting.addReport({
+            type: 'a11y',
+            version: 1,
+            result: {
+                error: e
+            },
+            status: 'failed'
+        });
+        if (getIsVitestStandaloneRun()) throw e;
+    }
+};
+const initialGlobals = {
+    a11y: {
+        manual: false
+    },
+    vision: void 0
+};
+const preview_parameters = {
+    a11y: {
+        test: 'todo'
+    }
+};
+export { afterEach, decorators, initialGlobals, preview_namespaceObject, preview_parameters as parameters };

package/dist/index.js

@@ -1,6 +1,7 @@
 import { definePreviewAddon } from "storybook/internal/csf";
-import { PARAM_KEY } from "./constants.js";
-export * from "./params.js";
-import * as __rspack_external__preview_js_3b21eac2 from "./preview.js";
-const src = ()=>definePreviewAddon(__rspack_external__preview_js_3b21eac2);
-export { PARAM_KEY, src as default };
+import { preview_namespaceObject } from "./699.js";
+import "./100.js";
+const src = ()=>definePreviewAddon(preview_namespaceObject);
+var src_PARAM_KEY = "a11y";
+export default src;
+export { src_PARAM_KEY as PARAM_KEY };