@techsio/storybook-better-a11y 0.0.5 → 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/apcaChecker.js

@@ -0,0 +1,288 @@
+import { global } from "@storybook/global";
+const { document: apcaChecker_document } = global;
+const DEFAULT_APCA_OPTIONS = {
+    level: 'bronze',
+    useCase: 'body'
+};
+const APCA_LC_STEPS = [
+    15,
+    20,
+    25,
+    30,
+    35,
+    40,
+    45,
+    50,
+    55,
+    60,
+    65,
+    70,
+    75,
+    80,
+    85,
+    90,
+    95,
+    100,
+    105,
+    110,
+    115,
+    120,
+    125
+];
+const APCA_MAX_CONTRAST_LC = 90;
+function getComputedColor(element, property) {
+    const computed = global.getComputedStyle(element);
+    return computed[property] || '';
+}
+function getEffectiveBackgroundColor(element) {
+    let current = element;
+    while(current && current !== apcaChecker_document.body){
+        const bgColor = getComputedColor(current, 'backgroundColor');
+        if (bgColor && 'rgba(0, 0, 0, 0)' !== bgColor && 'transparent' !== bgColor) return bgColor;
+        current = current.parentElement;
+    }
+    return 'rgb(255, 255, 255)';
+}
+function parseColor(color) {
+    const match = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+    if (!match) return null;
+    return [
+        parseInt(match[1], 10),
+        parseInt(match[2], 10),
+        parseInt(match[3], 10)
+    ];
+}
+function normalizeUseCase(value, fallback) {
+    if (!value) return fallback;
+    const normalized = value.toLowerCase().replace(/\s+/g, '-');
+    if (normalized.includes('body')) return 'body';
+    if (normalized.includes('sub') || normalized.includes('logo')) return 'sub-fluent';
+    if (normalized.includes('non') || normalized.includes('incidental') || normalized.includes('spot')) return 'non-fluent';
+    if (normalized.includes('fluent')) return 'fluent';
+    return fallback;
+}
+function getUseCaseForElement(element, fallback) {
+    const attr = element.getAttribute('data-apca-usecase') ?? element.getAttribute('data-apca-use-case') ?? element.getAttribute('data-apca-usage');
+    return normalizeUseCase(attr, fallback);
+}
+function normalizeWeightBucket(fontWeight) {
+    const weight = Number.isFinite(fontWeight) ? fontWeight : 400;
+    const clamped = Math.max(100, Math.min(900, weight));
+    return 100 * Math.round(clamped / 100);
+}
+function getBronzeThreshold(useCase, fontSize) {
+    if ('body' === useCase) return {
+        threshold: 75,
+        preferred: 90
+    };
+    if ('fluent' === useCase) {
+        if (fontSize > 32) return {
+            threshold: 45
+        };
+        if (fontSize >= 16) return {
+            threshold: 60
+        };
+        return {
+            threshold: 75
+        };
+    }
+    return null;
+}
+function getMinFontSize(level, useCase) {
+    if ('bronze' === level) return;
+    if ('sub-fluent' === useCase) return 'gold' === level ? 12 : 10;
+    if ('fluent' === useCase || 'body' === useCase) return 'gold' === level ? 16 : 14;
+}
+function getMaxContrast(level, useCase, fontSize, fontWeight) {
+    if ('bronze' === level) {
+        if ('fluent' === useCase && fontSize > 32 && fontWeight >= 700) return APCA_MAX_CONTRAST_LC;
+        return;
+    }
+    if (('body' === useCase || 'fluent' === useCase) && fontSize > 36) return APCA_MAX_CONTRAST_LC;
+}
+function getBaseThresholdFromLookup(fontSize, fontWeight, allowNonContent, fontLookupAPCA) {
+    const weightBucket = normalizeWeightBucket(fontWeight);
+    const weightIndex = Math.round(weightBucket / 100);
+    for (const lc of APCA_LC_STEPS){
+        const row = fontLookupAPCA(lc, 2);
+        const requiredSize = Number(row[weightIndex]);
+        if (!Number.isFinite(requiredSize)) continue;
+        if (999 === requiredSize) continue;
+        if (777 === requiredSize && !allowNonContent) continue;
+        const minSize = 777 === requiredSize ? 0 : requiredSize;
+        if (fontSize >= minSize) return lc;
+    }
+    return null;
+}
+function getApcaThreshold(level, useCase, fontSize, fontWeight, fontLookupAPCA) {
+    if ('bronze' === level) {
+        const bronzeThreshold = getBronzeThreshold(useCase, fontSize);
+        if (!bronzeThreshold) return {
+            threshold: null,
+            skip: true
+        };
+        return {
+            threshold: bronzeThreshold.threshold,
+            maxContrast: getMaxContrast(level, useCase, fontSize, fontWeight)
+        };
+    }
+    const minFontSize = getMinFontSize(level, useCase);
+    const baseThreshold = getBaseThresholdFromLookup(fontSize, fontWeight, 'non-fluent' === useCase, fontLookupAPCA);
+    if (null === baseThreshold) return {
+        threshold: null,
+        minFontSize,
+        note: 'Font size/weight is below the minimums in the APCA lookup table for this use case.'
+    };
+    let threshold = baseThreshold;
+    if ('sub-fluent' === useCase) threshold = Math.max(threshold - 15, 'silver' === level ? 40 : 45);
+    else if ('non-fluent' === useCase) threshold = Math.max(threshold - ('silver' === level ? 30 : 20), 30);
+    if ('body' === useCase && 'gold' === level && threshold < 75) threshold += 15;
+    return {
+        threshold,
+        minFontSize,
+        maxContrast: getMaxContrast(level, useCase, fontSize, fontWeight)
+    };
+}
+function hasReadableText(element) {
+    const text = element.textContent?.trim() || '';
+    return text.length > 0 && !element.hasAttribute('aria-hidden');
+}
+function isVisible(element) {
+    const computed = global.getComputedStyle(element);
+    return 'none' !== computed.display && 'hidden' !== computed.visibility && '0' !== computed.opacity;
+}
+async function runAPCACheck(context = apcaChecker_document, options = DEFAULT_APCA_OPTIONS, excludeSelectors = []) {
+    const { APCAcontrast, sRGBtoY, fontLookupAPCA } = await import("apca-w3");
+    const apcaOptions = {
+        ...DEFAULT_APCA_OPTIONS,
+        ...options
+    };
+    const violations = [];
+    const root = context instanceof Document ? context.body : context;
+    const textElements = root.querySelectorAll('p, span, div, h1, h2, h3, h4, h5, h6, a, button, label, td, th, li, input, textarea');
+    textElements.forEach((element)=>{
+        if (excludeSelectors.length > 0) {
+            const isExcluded = excludeSelectors.some((selector)=>{
+                try {
+                    return null !== element.closest(selector);
+                } catch  {
+                    return false;
+                }
+            });
+            if (isExcluded) return;
+        }
+        if (!isVisible(element) || !hasReadableText(element)) return;
+        const foreground = getComputedColor(element, 'color');
+        const background = getEffectiveBackgroundColor(element);
+        const fgColor = parseColor(foreground);
+        const bgColor = parseColor(background);
+        if (!fgColor || !bgColor) return;
+        const computed = global.getComputedStyle(element);
+        const fontSize = parseFloat(computed.fontSize);
+        const fontWeight = parseInt(computed.fontWeight, 10);
+        try {
+            const fgLuminance = sRGBtoY(fgColor);
+            const bgLuminance = sRGBtoY(bgColor);
+            const contrastValue = Math.abs(APCAcontrast(fgLuminance, bgLuminance));
+            const useCase = getUseCaseForElement(element, apcaOptions.useCase);
+            const level = apcaOptions.level;
+            const { threshold, minFontSize, maxContrast, note, skip } = getApcaThreshold(level, useCase, fontSize, fontWeight, fontLookupAPCA);
+            if (skip) return;
+            const messages = [];
+            if (null === threshold) {
+                if (note) messages.push(note);
+            } else {
+                if (contrastValue < threshold) messages.push(`APCA contrast of ${contrastValue.toFixed(1)} Lc is below the minimum of ${threshold} Lc for ${level} ${useCase} text.`);
+                if (void 0 !== maxContrast && contrastValue > maxContrast) messages.push(`APCA contrast of ${contrastValue.toFixed(1)} Lc exceeds the maximum of ${maxContrast} Lc for ${level} ${useCase} text at ${fontSize.toFixed(1)}px.`);
+            }
+            if (minFontSize && fontSize < minFontSize) messages.push(`Font size ${fontSize.toFixed(1)}px is below the minimum ${minFontSize}px for ${level} ${useCase} text.`);
+            if (messages.length > 0) violations.push({
+                element,
+                foreground,
+                background,
+                contrastValue,
+                fontSize,
+                fontWeight,
+                threshold,
+                maxContrast,
+                useCase,
+                level,
+                minFontSize,
+                note
+            });
+        } catch (error) {
+            console.warn('APCA calculation error:', error);
+        }
+    });
+    const nodes = violations.map((violation)=>{
+        const impact = getImpact(violation.contrastValue, violation.threshold, violation.maxContrast);
+        const messages = [];
+        if (violation.note) messages.push(violation.note);
+        else if (null !== violation.threshold && violation.contrastValue < violation.threshold) messages.push(`APCA contrast of ${violation.contrastValue.toFixed(1)} Lc is below the minimum of ${violation.threshold} Lc for ${violation.level} ${violation.useCase} text.`);
+        if (void 0 !== violation.maxContrast && violation.contrastValue > violation.maxContrast) messages.push(`APCA contrast of ${violation.contrastValue.toFixed(1)} Lc exceeds the maximum of ${violation.maxContrast} Lc for ${violation.level} ${violation.useCase} text at ${violation.fontSize.toFixed(1)}px.`);
+        if (violation.minFontSize && violation.fontSize < violation.minFontSize) messages.push(`Font size ${violation.fontSize.toFixed(1)}px is below the minimum ${violation.minFontSize}px for ${violation.level} ${violation.useCase} text.`);
+        const rules = messages.map((message)=>({
+                id: 'apca-contrast',
+                impact,
+                message,
+                data: null,
+                relatedNodes: []
+            }));
+        const failureSummary = `Fix any of the following:\n  ${messages.join('\n  ')}`;
+        return {
+            html: violation.element.outerHTML,
+            target: [
+                getSelector(violation.element)
+            ],
+            any: rules,
+            all: [],
+            none: [],
+            impact,
+            failureSummary
+        };
+    });
+    return {
+        id: 'apca-contrast',
+        impact: nodes.length > 0 ? 'serious' : null,
+        tags: [
+            'wcag3',
+            'wcag30',
+            'apca',
+            'contrast'
+        ],
+        description: 'Ensures text has sufficient contrast using APCA (WCAG 3.0 method)',
+        help: 'Elements must have sufficient color contrast using APCA',
+        helpUrl: 'https://git.apcacontrast.com/',
+        nodes
+    };
+}
+function getSelector(element) {
+    if (element.id) return `#${element.id}`;
+    const path = [];
+    let current = element;
+    while(current && current !== apcaChecker_document.body){
+        let selector = current.tagName.toLowerCase();
+        if (current.className) {
+            const classes = current.className.split(' ').filter(Boolean);
+            if (classes.length > 0) selector += `.${classes[0]}`;
+        }
+        const parent = current.parentElement;
+        if (parent) {
+            const siblings = Array.from(parent.children);
+            const index = siblings.indexOf(current) + 1;
+            selector += `:nth-child(${index})`;
+        }
+        path.unshift(selector);
+        current = parent;
+    }
+    return path.join(' > ');
+}
+function getImpact(contrastValue, threshold, maxContrast) {
+    if (null === threshold && void 0 === maxContrast) return 'serious';
+    const difference = void 0 !== maxContrast && contrastValue > maxContrast ? contrastValue - maxContrast : (threshold ?? 0) - contrastValue;
+    if (difference > 30) return 'critical';
+    if (difference > 20) return 'serious';
+    if (difference > 10) return 'moderate';
+    return 'minor';
+}
+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 };