@techsio/storybook-better-a11y 0.0.6 → 0.0.7

package/dist/a11yRunner.js

@@ -1,105 +0,0 @@
-import { ElementA11yParameterError } from "storybook/internal/preview-errors";
-import { global } from "@storybook/global";
-import { addons, waitForAnimations } from "storybook/preview-api";
-import { withLinkPaths } from "./a11yRunnerUtils.js";
-import { runAPCACheck } from "./apcaChecker.js";
-import { EVENTS } from "./constants.js";
-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);
-    }
-});
-export { run };

package/dist/a11yRunner.test.js

@@ -1,21 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { addons } from "storybook/preview-api";
-import { EVENTS } from "./constants.js";
-vi.mock('storybook/preview-api');
-const mockedAddons = vi.mocked(addons);
-describe('a11yRunner', ()=>{
-    let mockChannel;
-    beforeEach(()=>{
-        mockedAddons.getChannel.mockReset();
-        mockChannel = {
-            on: vi.fn(),
-            emit: vi.fn()
-        };
-        mockedAddons.getChannel.mockReturnValue(mockChannel);
-    });
-    it('should listen to events', async ()=>{
-        await import("./a11yRunner.js");
-        expect(mockedAddons.getChannel).toHaveBeenCalled();
-        expect(mockChannel.on).toHaveBeenCalledWith(EVENTS.MANUAL, expect.any(Function));
-    });
-});

package/dist/a11yRunnerUtils.js

@@ -1,30 +0,0 @@
-import { global } from "@storybook/global";
-import { PANEL_ID } from "./constants.js";
-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;
-};
-export { withLinkPaths };

package/dist/a11yRunnerUtils.test.js

@@ -1,61 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { withLinkPaths } from "./a11yRunnerUtils.js";
-describe('a11yRunnerUtils', ()=>{
-    describe('withLinkPaths', ()=>{
-        it('should add link paths to the axe results', ()=>{
-            const axeResults = {
-                violations: [
-                    {
-                        id: 'color-contrast',
-                        nodes: [
-                            {
-                                html: '<button>Click me</button>',
-                                target: [
-                                    '.button'
-                                ]
-                            },
-                            {
-                                html: '<a href="#">Link</a>',
-                                target: [
-                                    '.link'
-                                ]
-                            }
-                        ]
-                    }
-                ],
-                passes: [
-                    {
-                        id: 'button-name',
-                        nodes: [
-                            {
-                                html: '<button>Valid Button</button>',
-                                target: [
-                                    '.valid-button'
-                                ]
-                            }
-                        ]
-                    }
-                ],
-                incomplete: [
-                    {
-                        id: 'aria-valid',
-                        nodes: [
-                            {
-                                html: '<div aria-label="test">Test</div>',
-                                target: [
-                                    '.aria-test'
-                                ]
-                            }
-                        ]
-                    }
-                ],
-                inapplicable: []
-            };
-            const result = withLinkPaths(axeResults, 'test-story-id');
-            expect(result.violations[0].nodes[0].linkPath).toBe('/?path=/story/test-story-id&addonPanel=storybook/a11y/panel&a11ySelection=violations.color-contrast.1');
-            expect(result.violations[0].nodes[1].linkPath).toBe('/?path=/story/test-story-id&addonPanel=storybook/a11y/panel&a11ySelection=violations.color-contrast.2');
-            expect(result.passes[0].nodes[0].linkPath).toBe('/?path=/story/test-story-id&addonPanel=storybook/a11y/panel&a11ySelection=passes.button-name.1');
-            expect(result.incomplete[0].nodes[0].linkPath).toBe('/?path=/story/test-story-id&addonPanel=storybook/a11y/panel&a11ySelection=incomplete.aria-valid.1');
-        });
-    });
-});

package/dist/apcaChecker.test.js

@@ -1,124 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it } from "vitest";
-import { runAPCACheck } from "./apcaChecker.js";
-describe('apcaChecker', ()=>{
-    let container;
-    beforeEach(()=>{
-        container = document.createElement('div');
-        document.body.appendChild(container);
-    });
-    afterEach(()=>{
-        if (container.parentNode) container.parentNode.removeChild(container);
-    });
-    it('should detect low contrast text violations', async ()=>{
-        const textElement = document.createElement('p');
-        textElement.textContent = 'This is test text';
-        textElement.style.color = 'rgb(170, 170, 170)';
-        textElement.style.backgroundColor = 'rgb(255, 255, 255)';
-        textElement.style.fontSize = '16px';
-        textElement.style.fontWeight = '400';
-        container.appendChild(textElement);
-        const result = await runAPCACheck(container);
-        expect(result.id).toBe('apca-contrast');
-        expect(result.nodes.length).toBeGreaterThan(0);
-        expect(result.nodes[0].failureSummary).toContain('Fix any of the following');
-        expect(result.nodes[0].failureSummary).toContain('APCA contrast');
-    });
-    it('should pass for high contrast text', async ()=>{
-        const textElement = document.createElement('p');
-        textElement.textContent = 'This is test text';
-        textElement.style.color = 'rgb(0, 0, 0)';
-        textElement.style.backgroundColor = 'rgb(255, 255, 255)';
-        textElement.style.fontSize = '16px';
-        textElement.style.fontWeight = '400';
-        container.appendChild(textElement);
-        const result = await runAPCACheck(container);
-        expect(result.id).toBe('apca-contrast');
-        expect(result.nodes.length).toBe(0);
-    });
-    it('should skip hidden elements', async ()=>{
-        const textElement = document.createElement('p');
-        textElement.textContent = 'This is test text';
-        textElement.style.color = 'rgb(170, 170, 170)';
-        textElement.style.backgroundColor = 'rgb(255, 255, 255)';
-        textElement.style.display = 'none';
-        container.appendChild(textElement);
-        const result = await runAPCACheck(container);
-        expect(result.nodes.length).toBe(0);
-    });
-    it('should skip aria-hidden elements', async ()=>{
-        const textElement = document.createElement('p');
-        textElement.textContent = 'This is test text';
-        textElement.style.color = 'rgb(170, 170, 170)';
-        textElement.style.backgroundColor = 'rgb(255, 255, 255)';
-        textElement.setAttribute('aria-hidden', 'true');
-        container.appendChild(textElement);
-        const result = await runAPCACheck(container);
-        expect(result.nodes.length).toBe(0);
-    });
-    it('should use appropriate thresholds for large text', async ()=>{
-        const textElement = document.createElement('h1');
-        textElement.textContent = 'Large Heading';
-        textElement.style.color = 'rgb(100, 100, 100)';
-        textElement.style.backgroundColor = 'rgb(255, 255, 255)';
-        textElement.style.fontSize = '32px';
-        textElement.style.fontWeight = '400';
-        container.appendChild(textElement);
-        const result = await runAPCACheck(container);
-        expect(result.id).toBe('apca-contrast');
-    });
-    it('should handle elements with inherited background colors', async ()=>{
-        const parent = document.createElement('div');
-        parent.style.backgroundColor = 'rgb(200, 200, 200)';
-        container.appendChild(parent);
-        const textElement = document.createElement('p');
-        textElement.textContent = 'Nested text';
-        textElement.style.color = 'rgb(180, 180, 180)';
-        textElement.style.fontSize = '16px';
-        parent.appendChild(textElement);
-        const result = await runAPCACheck(container);
-        expect(result.id).toBe('apca-contrast');
-    });
-    it('should enforce gold minimum font size for body text', async ()=>{
-        const textElement = document.createElement('p');
-        textElement.textContent = 'Small body text';
-        textElement.style.color = 'rgb(0, 0, 0)';
-        textElement.style.backgroundColor = 'rgb(255, 255, 255)';
-        textElement.style.fontSize = '12px';
-        textElement.style.fontWeight = '400';
-        container.appendChild(textElement);
-        const result = await runAPCACheck(container, {
-            level: 'gold',
-            useCase: 'body'
-        });
-        expect(result.nodes.length).toBeGreaterThan(0);
-        expect(result.nodes[0].failureSummary).toContain('minimum 16px');
-    });
-    it('should flag excessive contrast for large text at silver', async ()=>{
-        const textElement = document.createElement('h1');
-        textElement.textContent = 'Large heading';
-        textElement.style.color = 'rgb(0, 0, 0)';
-        textElement.style.backgroundColor = 'rgb(255, 255, 255)';
-        textElement.style.fontSize = '40px';
-        textElement.style.fontWeight = '400';
-        container.appendChild(textElement);
-        const result = await runAPCACheck(container, {
-            level: 'silver',
-            useCase: 'body'
-        });
-        expect(result.nodes.length).toBeGreaterThan(0);
-        expect(result.nodes[0].failureSummary).toContain('exceeds the maximum');
-    });
-    it('should include proper metadata in results', async ()=>{
-        const textElement = document.createElement('p');
-        textElement.textContent = 'Test';
-        textElement.style.color = 'rgb(170, 170, 170)';
-        textElement.style.backgroundColor = 'rgb(255, 255, 255)';
-        container.appendChild(textElement);
-        const result = await runAPCACheck(container);
-        expect(result.id).toBe('apca-contrast');
-        expect(result.tags).toContain('wcag3');
-        expect(result.tags).toContain('apca');
-        expect(result.description).toContain('APCA');
-        expect(result.helpUrl).toBeTruthy();
-    });
-});

package/dist/axeRuleMappingHelper.js

@@ -1,4 +0,0 @@
-import { combinedRulesMap } from "./AccessibilityRuleMaps.js";
-const getTitleForAxeResult = (axeResult)=>combinedRulesMap[axeResult.id]?.title || axeResult.id;
-const getFriendlySummaryForAxeResult = (axeResult)=>combinedRulesMap[axeResult.id]?.friendlySummary || axeResult.description;
-export { getFriendlySummaryForAxeResult, getTitleForAxeResult };

package/dist/components/A11YPanel.js

@@ -1,140 +0,0 @@
-import react, { useMemo } from "react";
-import { Badge, Button } from "storybook/internal/components";
-import { SyncIcon } from "@storybook/icons";
-import { styled } from "storybook/theming";
-import { RuleType } from "../types.js";
-import { useA11yContext } from "./A11yContext.js";
-import { Report } from "./Report/Report.js";
-import { Tabs } from "./Tabs.js";
-import { TestDiscrepancyMessage } from "./TestDiscrepancyMessage.js";
-const RotatingIcon = styled(SyncIcon)(({ theme })=>({
-        animation: `${theme.animation.rotate360} 1s linear infinite;`,
-        margin: 4
-    }));
-const Tab = styled.div({
-    display: 'flex',
-    alignItems: 'center',
-    gap: 6
-});
-const Centered = styled.span(({ theme })=>({
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-        textAlign: 'center',
-        fontSize: theme.typography.size.s2,
-        height: '100%',
-        gap: 24,
-        div: {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            gap: 8
-        },
-        p: {
-            margin: 0,
-            color: theme.textMutedColor
-        },
-        code: {
-            display: 'inline-block',
-            fontSize: theme.typography.size.s2 - 1,
-            backgroundColor: theme.background.app,
-            border: `1px solid ${theme.color.border}`,
-            borderRadius: 4,
-            padding: '2px 3px'
-        }
-    }));
-const A11YPanel = ()=>{
-    const { parameters, tab, results, status, handleManual, error, discrepancy, handleSelectionChange, selectedItems, toggleOpen } = useA11yContext();
-    const tabs = useMemo(()=>{
-        const { passes, incomplete, violations } = results ?? {
-            passes: [],
-            incomplete: [],
-            violations: []
-        };
-        return [
-            {
-                label: /*#__PURE__*/ react.createElement(Tab, null, "Violations", /*#__PURE__*/ react.createElement(Badge, {
-                    compact: true,
-                    status: 'violations' === tab ? 'active' : 'neutral'
-                }, violations.length)),
-                panel: /*#__PURE__*/ react.createElement(Report, {
-                    items: violations,
-                    type: RuleType.VIOLATION,
-                    empty: "No accessibility violations found.",
-                    handleSelectionChange: handleSelectionChange,
-                    selectedItems: selectedItems,
-                    toggleOpen: toggleOpen
-                }),
-                items: violations,
-                type: RuleType.VIOLATION
-            },
-            {
-                label: /*#__PURE__*/ react.createElement(Tab, null, "Passes", /*#__PURE__*/ react.createElement(Badge, {
-                    compact: true,
-                    status: 'passes' === tab ? 'active' : 'neutral'
-                }, passes.length)),
-                panel: /*#__PURE__*/ react.createElement(Report, {
-                    items: passes,
-                    type: RuleType.PASS,
-                    empty: "No passing accessibility checks found.",
-                    handleSelectionChange: handleSelectionChange,
-                    selectedItems: selectedItems,
-                    toggleOpen: toggleOpen
-                }),
-                items: passes,
-                type: RuleType.PASS
-            },
-            {
-                label: /*#__PURE__*/ react.createElement(Tab, null, "Inconclusive", /*#__PURE__*/ react.createElement(Badge, {
-                    compact: true,
-                    status: 'incomplete' === tab ? 'active' : 'neutral'
-                }, incomplete.length)),
-                panel: /*#__PURE__*/ react.createElement(Report, {
-                    items: incomplete,
-                    type: RuleType.INCOMPLETION,
-                    empty: "No inconclusive accessibility checks found.",
-                    handleSelectionChange: handleSelectionChange,
-                    selectedItems: selectedItems,
-                    toggleOpen: toggleOpen
-                }),
-                items: incomplete,
-                type: RuleType.INCOMPLETION
-            }
-        ];
-    }, [
-        tab,
-        results,
-        handleSelectionChange,
-        selectedItems,
-        toggleOpen
-    ]);
-    if (parameters.disable || 'off' === parameters.test) return /*#__PURE__*/ react.createElement(Centered, null, /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement("strong", null, "Accessibility tests are disabled for this story"), /*#__PURE__*/ react.createElement("p", null, "Update", ' ', /*#__PURE__*/ react.createElement("code", null, parameters.disable ? 'parameters.a11y.disable' : 'parameters.a11y.test'), ' ', "to enable accessibility tests.")));
-    return /*#__PURE__*/ react.createElement(react.Fragment, null, discrepancy && /*#__PURE__*/ react.createElement(TestDiscrepancyMessage, {
-        discrepancy: discrepancy
-    }), 'ready' === status || 'ran' === status ? /*#__PURE__*/ react.createElement(Tabs, {
-        key: "tabs",
-        tabs: tabs
-    }) : /*#__PURE__*/ react.createElement(Centered, {
-        style: {
-            marginTop: discrepancy ? '1em' : 0
-        }
-    }, 'initial' === status && /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(RotatingIcon, {
-        size: 12
-    }), /*#__PURE__*/ react.createElement("strong", null, "Preparing accessibility scan"), /*#__PURE__*/ react.createElement("p", null, "Please wait while the addon is initializing...")), 'manual' === status && /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement("strong", null, "Accessibility tests run manually for this story"), /*#__PURE__*/ react.createElement("p", null, "Results will not show when using the testing module. You can still run accessibility tests manually.")), /*#__PURE__*/ react.createElement(Button, {
-        ariaLabel: false,
-        size: "medium",
-        onClick: handleManual
-    }, "Run accessibility scan"), /*#__PURE__*/ react.createElement("p", null, "Update ", /*#__PURE__*/ react.createElement("code", null, "globals.a11y.manual"), " to disable manual mode.")), 'running' === status && /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(RotatingIcon, {
-        size: 12
-    }), /*#__PURE__*/ react.createElement("strong", null, "Accessibility scan in progress"), /*#__PURE__*/ react.createElement("p", null, "Please wait while the accessibility scan is running...")), 'error' === status && /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement("strong", null, "The accessibility scan encountered an error"), /*#__PURE__*/ react.createElement("p", null, 'string' == typeof error ? error : error instanceof Error ? error.toString() : JSON.stringify(error, null, 2))), /*#__PURE__*/ react.createElement(Button, {
-        ariaLabel: false,
-        size: "medium",
-        onClick: handleManual
-    }, "Rerun accessibility scan")), 'component-test-error' === status && /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement("strong", null, "This story's component tests failed"), /*#__PURE__*/ react.createElement("p", null, "Automated accessibility tests will not run until this is resolved. You can still test manually.")), /*#__PURE__*/ react.createElement(Button, {
-        ariaLabel: false,
-        size: "medium",
-        onClick: handleManual
-    }, "Run accessibility scan"))));
-};
-export { A11YPanel };