@techsio/storybook-better-a11y 0.0.4 → 0.0.6

package/dist/a11yRunnerUtils.js

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,61 @@
+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/{699.js → apcaChecker.js}

@@ -1,44 +1,4 @@
-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',
@@ -325,218 +285,4 @@ function getImpact(contrastValue, threshold, maxContrast) {
     if (difference > 10) return 'moderate';
     return 'minor';
 }
-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("./212.js").then((mod)=>({
-                                toHaveNoViolations: mod.toHaveNoViolations
-                            }));
-                        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 };
+export { runAPCACheck };

package/dist/apcaChecker.test.js

@@ -0,0 +1,124 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,140 @@
+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 };