@techsio/storybook-better-a11y 0.0.5 → 0.0.6

package/dist/components/Tabs.js

@@ -0,0 +1,54 @@
+import { createElement } from "react";
+import { Button, Tabs } from "storybook/internal/components";
+import { CollapseIcon, ExpandAltIcon, EyeCloseIcon, EyeIcon, SyncIcon } from "@storybook/icons";
+import { styled, useTheme } from "storybook/theming";
+import { useA11yContext } from "./A11yContext.js";
+const Container = styled.div({
+    width: '100%',
+    position: 'relative',
+    height: '100%',
+    overflow: 'hidden',
+    display: 'flex',
+    flexDirection: 'column'
+});
+const ActionsWrapper = styled.div({
+    display: 'flex',
+    justifyContent: 'flex-end',
+    gap: 6
+});
+const TabPanel = ({ id, children })=>/*#__PURE__*/ createElement("div", {
+        id: id
+    }, children);
+const Tabs_Tabs = ({ tabs })=>{
+    const { tab, setTab, toggleHighlight, highlighted, handleManual, allExpanded, handleCollapseAll, handleExpandAll } = useA11yContext();
+    const theme = useTheme();
+    return /*#__PURE__*/ createElement(Container, null, /*#__PURE__*/ createElement(Tabs, {
+        backgroundColor: theme.background.app,
+        selected: tab,
+        actions: {
+            onSelect: (id)=>setTab(id)
+        },
+        tools: /*#__PURE__*/ createElement(ActionsWrapper, null, /*#__PURE__*/ createElement(Button, {
+            variant: "ghost",
+            padding: "small",
+            onClick: toggleHighlight,
+            ariaLabel: highlighted ? 'Hide accessibility test result highlights' : 'Highlight elements with accessibility test results'
+        }, highlighted ? /*#__PURE__*/ createElement(EyeCloseIcon, null) : /*#__PURE__*/ createElement(EyeIcon, null)), /*#__PURE__*/ createElement(Button, {
+            variant: "ghost",
+            padding: "small",
+            onClick: allExpanded ? handleCollapseAll : handleExpandAll,
+            ariaLabel: allExpanded ? 'Collapse all results' : 'Expand all results',
+            "aria-expanded": allExpanded
+        }, allExpanded ? /*#__PURE__*/ createElement(CollapseIcon, null) : /*#__PURE__*/ createElement(ExpandAltIcon, null)), /*#__PURE__*/ createElement(Button, {
+            variant: "ghost",
+            padding: "small",
+            onClick: handleManual,
+            ariaLabel: "Rerun accessibility scan"
+        }, /*#__PURE__*/ createElement(SyncIcon, null)))
+    }, tabs.map((tabItem)=>/*#__PURE__*/ createElement(TabPanel, {
+            key: tabItem.type,
+            id: tabItem.type,
+            title: tabItem.label
+        }, tabItem.panel))));
+};
+export { Tabs_Tabs as Tabs };

package/dist/components/TestDiscrepancyMessage.js

@@ -0,0 +1,55 @@
+import react, { useMemo } from "react";
+import { Link } from "storybook/internal/components";
+import { useStorybookApi } from "storybook/manager-api";
+import { styled } from "storybook/theming";
+import { DOCUMENTATION_DISCREPANCY_LINK } from "../constants.js";
+const Wrapper = styled.div(({ theme: { color, typography, background } })=>({
+        textAlign: 'start',
+        padding: '11px 15px',
+        fontSize: `${typography.size.s2}px`,
+        fontWeight: typography.weight.regular,
+        lineHeight: '1rem',
+        background: background.app,
+        borderBottom: `1px solid ${color.border}`,
+        color: color.defaultText,
+        backgroundClip: 'padding-box',
+        position: 'relative',
+        code: {
+            fontSize: `${typography.size.s1 - 1}px`,
+            color: 'inherit',
+            margin: '0 0.2em',
+            padding: '0 0.2em',
+            background: 'rgba(255, 255, 255, 0.8)',
+            borderRadius: '2px',
+            boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1)'
+        }
+    }));
+const TestDiscrepancyMessage = ({ discrepancy })=>{
+    const api = useStorybookApi();
+    const docsUrl = api.getDocsUrl({
+        subpath: DOCUMENTATION_DISCREPANCY_LINK,
+        versioned: true,
+        renderer: true
+    });
+    const message = useMemo(()=>{
+        switch(discrepancy){
+            case 'browserPassedCliFailed':
+                return 'Accessibility checks passed in this browser but failed in the CLI.';
+            case 'cliPassedBrowserFailed':
+                return 'Accessibility checks passed in the CLI but failed in this browser.';
+            case 'cliFailedButModeManual':
+                return 'Accessibility checks failed in the CLI. Run the tests manually to see the results.';
+            default:
+                return null;
+        }
+    }, [
+        discrepancy
+    ]);
+    if (!message) return null;
+    return /*#__PURE__*/ react.createElement(Wrapper, null, message, ' ', /*#__PURE__*/ react.createElement(Link, {
+        href: docsUrl,
+        target: "_blank",
+        withArrow: true
+    }, "Learn what could cause this"));
+};
+export { TestDiscrepancyMessage };

package/dist/components/TestDiscrepancyMessage.stories.js

@@ -0,0 +1,40 @@
+import react from "react";
+import { ManagerContext } from "storybook/manager-api";
+import { fn } from "storybook/test";
+import preview from "../../../../.storybook/preview";
+import { TestDiscrepancyMessage } from "./TestDiscrepancyMessage.js";
+const managerContext = {
+    state: {},
+    api: {
+        getDocsUrl: fn().mockName('api::getDocsUrl'),
+        getCurrentParameter: fn().mockName('api::getCurrentParameter')
+    }
+};
+const meta = preview.meta({
+    title: 'TestDiscrepancyMessage',
+    component: TestDiscrepancyMessage,
+    parameters: {
+        layout: 'fullscreen'
+    },
+    decorators: [
+        (storyFn)=>/*#__PURE__*/ react.createElement(ManagerContext.Provider, {
+                value: managerContext
+            }, storyFn())
+    ]
+});
+const BrowserPassedCliFailed = meta.story({
+    args: {
+        discrepancy: 'browserPassedCliFailed'
+    }
+});
+const CliPassedBrowserFailed = meta.story({
+    args: {
+        discrepancy: 'cliPassedBrowserFailed'
+    }
+});
+const CliFailedButModeManual = meta.story({
+    args: {
+        discrepancy: 'cliFailedButModeManual'
+    }
+});
+export { BrowserPassedCliFailed, CliFailedButModeManual, CliPassedBrowserFailed };

package/dist/components/VisionSimulator.js

@@ -0,0 +1,83 @@
+import react from "react";
+import { Button } from "storybook/internal/components";
+import { AccessibilityIcon } from "@storybook/icons";
+import { useGlobals } from "storybook/manager-api";
+import { styled } from "storybook/theming";
+import { VISION_GLOBAL_KEY } from "../constants.js";
+import { filterDefs, filters } from "../visionSimulatorFilters.js";
+const Hidden = styled.div({
+    '&, & svg': {
+        position: 'absolute',
+        width: 0,
+        height: 0
+    }
+});
+const ColorIcon = styled.span({
+    background: 'linear-gradient(to right, #F44336, #FF9800, #FFEB3B, #8BC34A, #2196F3, #9C27B0)',
+    borderRadius: 14,
+    display: 'block',
+    flexShrink: 0,
+    height: 14,
+    width: 14
+}, ({ $filter })=>({
+        filter: filters[$filter]?.filter || 'none'
+    }), ({ theme })=>({
+        boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`
+    }));
+const SelectRow = styled.div(({ theme })=>({
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        padding: '6px 10px',
+        border: `1px solid ${theme.appBorderColor}`,
+        borderRadius: theme.appBorderRadius,
+        background: theme.background.content
+    }));
+const SelectInput = styled.select(({ theme })=>({
+        flex: 1,
+        minWidth: 0,
+        padding: '4px 6px',
+        border: `1px solid ${theme.appBorderColor}`,
+        borderRadius: theme.appBorderRadius,
+        background: theme.background.app,
+        color: theme.color.defaultText,
+        fontSize: theme.typography.size.s2
+    }));
+const ResetButton = styled(Button)({
+    whiteSpace: 'nowrap'
+});
+const VisionSimulator = ()=>{
+    const [globals, updateGlobals] = useGlobals();
+    const value = globals[VISION_GLOBAL_KEY];
+    const options = Object.entries(filters).map(([key, { label, percentage }])=>({
+            label: percentage ? `${label} (${percentage}% of users)` : label,
+            value: key
+        }));
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(SelectRow, {
+        "aria-label": "Vision simulator"
+    }, /*#__PURE__*/ react.createElement(AccessibilityIcon, null), /*#__PURE__*/ react.createElement(ColorIcon, {
+        $filter: String(value || 'none')
+    }), /*#__PURE__*/ react.createElement(SelectInput, {
+        value: value ?? '',
+        onChange: (event)=>updateGlobals({
+                [VISION_GLOBAL_KEY]: event.target.value || void 0
+            })
+    }, /*#__PURE__*/ react.createElement("option", {
+        value: ""
+    }, "No filter"), options.map((option)=>/*#__PURE__*/ react.createElement("option", {
+            key: option.value,
+            value: option.value
+        }, option.label))), /*#__PURE__*/ react.createElement(ResetButton, {
+        variant: "ghost",
+        padding: "small",
+        onClick: ()=>updateGlobals({
+                [VISION_GLOBAL_KEY]: void 0
+            }),
+        ariaLabel: "Reset color filter"
+    }, "Reset")), /*#__PURE__*/ react.createElement(Hidden, {
+        dangerouslySetInnerHTML: {
+            __html: filterDefs
+        }
+    }));
+};
+export { VisionSimulator };

package/dist/components/VisionSimulator.stories.js

@@ -0,0 +1,56 @@
+import { ManagerContext } from "storybook/manager-api";
+import { expect, fn, screen } from "storybook/test";
+import preview from "../../../../.storybook/preview";
+import { VisionSimulator } from "./VisionSimulator.js";
+const managerContext = {
+    state: {},
+    api: {
+        getGlobals: fn(()=>({
+                vision: void 0
+            })),
+        updateGlobals: fn(),
+        getStoryGlobals: fn(()=>({
+                vision: void 0
+            })),
+        getUserGlobals: fn(()=>({
+                vision: void 0
+            }))
+    }
+};
+const meta = preview.meta({
+    title: 'Vision Simulator',
+    component: VisionSimulator,
+    decorators: [
+        (Story)=>/*#__PURE__*/ React.createElement(ManagerContext.Provider, {
+                value: managerContext
+            }, /*#__PURE__*/ React.createElement(Story, null))
+    ]
+});
+const VisionSimulator_stories = meta;
+const openMenu = async ({ canvas, userEvent })=>{
+    await userEvent.click(canvas.getByRole('button', {
+        name: 'Vision simulator'
+    }));
+};
+const Default = meta.story({
+    play: openMenu
+});
+const WithFilter = meta.story({
+    play: openMenu,
+    globals: {
+        vision: 'achromatopsia'
+    }
+});
+const Selection = meta.story({
+    play: async (context)=>{
+        await openMenu(context);
+        await context.userEvent.click(await screen.findByText('Blurred vision'));
+        await expect(managerContext.api.updateGlobals).toHaveBeenCalledWith({
+            vision: 'blurred'
+        });
+        await expect(context.canvas.getByRole('button', {
+            name: 'Vision simulator Blurred vision'
+        })).toBeVisible();
+    }
+});
+export { Default, Selection, WithFilter, VisionSimulator_stories as default };

package/dist/constants.js

@@ -0,0 +1,25 @@
+const ADDON_ID = 'storybook/a11y';
+const PANEL_ID = `${ADDON_ID}/panel`;
+const PARAM_KEY = "a11y";
+const VISION_GLOBAL_KEY = "vision";
+const UI_STATE_ID = `${ADDON_ID}/ui`;
+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 TEST_PROVIDER_ID = 'storybook/addon-a11y/test-provider';
+const EVENTS = {
+    RESULT,
+    REQUEST,
+    RUNNING,
+    ERROR,
+    MANUAL,
+    SELECT
+};
+const STATUS_TYPE_ID_COMPONENT_TEST = 'storybook/component-test';
+const STATUS_TYPE_ID_A11Y = 'storybook/a11y';
+export { ADDON_ID, DOCUMENTATION_DISCREPANCY_LINK, DOCUMENTATION_LINK, EVENTS, PANEL_ID, PARAM_KEY, STATUS_TYPE_ID_A11Y, STATUS_TYPE_ID_COMPONENT_TEST, TEST_PROVIDER_ID, UI_STATE_ID, VISION_GLOBAL_KEY };

package/dist/manager.test.js

@@ -0,0 +1,86 @@
+import { describe, expect, it, vi } from "vitest";
+import { PANEL_ID } from "./constants.js";
+import "./manager.js";
+import * as __rspack_external_storybook_manager_api_d834c1f5 from "storybook/manager-api";
+vi.mock('storybook/manager-api');
+const mockedApi = vi.mocked(__rspack_external_storybook_manager_api_d834c1f5);
+mockedApi.useStorybookApi = vi.fn(()=>({
+        getSelectedPanel: vi.fn()
+    }));
+mockedApi.useAddonState = vi.fn();
+const mockedAddons = vi.mocked(__rspack_external_storybook_manager_api_d834c1f5.addons);
+const registrationImpl = mockedAddons.register.mock.calls[0][1];
+const isPanel = (input)=>input.type === __rspack_external_storybook_manager_api_d834c1f5.types.PANEL;
+describe('A11yManager', ()=>{
+    it('should register the panels', ()=>{
+        registrationImpl(mockedApi);
+        expect(mockedAddons.add.mock.calls).toHaveLength(2);
+        expect(mockedAddons.add).toHaveBeenCalledWith(PANEL_ID, expect.anything());
+        const panel = mockedAddons.add.mock.calls.map(([_, def])=>def).find(({ type })=>type === __rspack_external_storybook_manager_api_d834c1f5.types.PANEL);
+        const tool = mockedAddons.add.mock.calls.map(([_, def])=>def).find(({ type })=>type === __rspack_external_storybook_manager_api_d834c1f5.types.TOOL);
+        expect(panel).toBeDefined();
+        expect(tool).toBeDefined();
+    });
+    it('should compute title with no issues', ()=>{
+        mockedApi.useAddonState.mockImplementation(()=>[
+                {
+                    results: void 0
+                }
+            ]);
+        registrationImpl(__rspack_external_storybook_manager_api_d834c1f5);
+        const title = mockedAddons.add.mock.calls.map(([_, def])=>def).find(isPanel)?.title;
+        expect(title()).toMatchInlineSnapshot(`
+      <div
+        style={
+          {
+            "alignItems": "center",
+            "display": "flex",
+            "gap": 6,
+          }
+        }
+      >
+        <span>
+          Accessibility
+        </span>
+      </div>
+    `);
+    });
+    it('should compute title with issues', ()=>{
+        mockedApi.useAddonState.mockImplementation(()=>[
+                {
+                    results: {
+                        violations: [
+                            {}
+                        ],
+                        incomplete: [
+                            {},
+                            {}
+                        ]
+                    }
+                }
+            ]);
+        registrationImpl(mockedApi);
+        const title = mockedAddons.add.mock.calls.map(([_, def])=>def).find(isPanel)?.title;
+        expect(title()).toMatchInlineSnapshot(`
+      <div
+        style={
+          {
+            "alignItems": "center",
+            "display": "flex",
+            "gap": 6,
+          }
+        }
+      >
+        <span>
+          Accessibility
+        </span>
+        <Badge
+          compact={true}
+          status="neutral"
+        >
+          3
+        </Badge>
+      </div>
+    `);
+    });
+});

package/dist/preview.test.js

@@ -0,0 +1,215 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { run } from "./a11yRunner.js";
+import { afterEach } from "./preview.js";
+import { getIsVitestRunning, getIsVitestStandaloneRun } from "./utils.js";
+const mocks = vi.hoisted(()=>({
+        getIsVitestRunning: vi.fn(),
+        getIsVitestStandaloneRun: vi.fn()
+    }));
+vi.mock(import("./a11yRunner.js"));
+vi.mock(import("./utils.js"), async (importOriginal)=>{
+    const mod = await importOriginal();
+    return {
+        ...mod,
+        getIsVitestRunning: mocks.getIsVitestRunning,
+        getIsVitestStandaloneRun: mocks.getIsVitestStandaloneRun
+    };
+});
+const mockedRun = vi.mocked(run);
+const violations = [
+    {
+        id: 'color-contrast',
+        impact: 'serious',
+        tags: '_duplicate_["args","0","reporters","0","result","passes","12","tags"]',
+        description: 'Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds',
+        help: 'Elements must meet minimum color contrast ratio thresholds',
+        helpUrl: 'https://dequeuniversity.com/rules/axe/4.8/color-contrast?application=axeAPI',
+        nodes: [
+            {
+                any: [
+                    {
+                        id: 'color-contrast',
+                        data: {
+                            fgColor: '#029cfd',
+                            bgColor: '#f6f9fc',
+                            contrastRatio: 2.76,
+                            fontSize: '10.5pt (14px)',
+                            fontWeight: 'normal',
+                            messageKey: null,
+                            expectedContrastRatio: '4.5:1',
+                            shadowColor: '_undefined_'
+                        },
+                        relatedNodes: [
+                            {
+                                html: '<div class="css-1av19vu">',
+                                target: [
+                                    '.css-1av19vu'
+                                ]
+                            }
+                        ],
+                        impact: 'serious',
+                        message: 'Element has insufficient color contrast of 2.76 (foreground color: #029cfd, background color: #f6f9fc, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1',
+                        '_constructor-name_': 'CheckResult'
+                    }
+                ],
+                all: [],
+                none: [],
+                impact: 'serious',
+                html: '<span class="css-1mjgzsp">',
+                target: [
+                    '.css-1mjgzsp'
+                ],
+                failureSummary: 'Fix any of the following:\n  Element has insufficient color contrast of 2.76 (foreground color: #029cfd, background color: #f6f9fc, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1'
+            }
+        ]
+    }
+];
+describe('afterEach', ()=>{
+    beforeEach(()=>{
+        vi.mocked(getIsVitestRunning).mockReturnValue(false);
+        vi.mocked(getIsVitestStandaloneRun).mockReturnValue(true);
+    });
+    const createContext = (overrides = {})=>({
+            viewMode: 'story',
+            reporting: {
+                reports: [],
+                addReport: vi.fn()
+            },
+            parameters: {
+                a11y: {
+                    test: 'error'
+                }
+            },
+            globals: {
+                a11y: {}
+            },
+            ...overrides
+        });
+    it('should run accessibility checks and report results', async ()=>{
+        const context = createContext();
+        const result = {
+            violations
+        };
+        mockedRun.mockResolvedValue(result);
+        await expect(()=>afterEach(context)).rejects.toThrow();
+        expect(mockedRun).toHaveBeenCalledWith(context.parameters.a11y, context.id);
+        expect(context.reporting.addReport).toHaveBeenCalledWith({
+            type: 'a11y',
+            version: 1,
+            result,
+            status: 'failed'
+        });
+    });
+    it('should run accessibility checks and report results without throwing', async ()=>{
+        const context = createContext();
+        const result = {
+            violations
+        };
+        mockedRun.mockResolvedValue(result);
+        mocks.getIsVitestStandaloneRun.mockReturnValue(false);
+        await afterEach(context);
+        expect(mockedRun).toHaveBeenCalledWith(context.parameters.a11y, context.id);
+        expect(context.reporting.addReport).toHaveBeenCalledWith({
+            type: 'a11y',
+            version: 1,
+            result,
+            status: 'failed'
+        });
+    });
+    it('should run accessibility checks and should report them as warnings', async ()=>{
+        const context = createContext({
+            parameters: {
+                a11y: {
+                    test: 'todo'
+                }
+            }
+        });
+        const result = {
+            violations
+        };
+        mockedRun.mockResolvedValue(result);
+        mocks.getIsVitestStandaloneRun.mockReturnValue(false);
+        await afterEach(context);
+        expect(mockedRun).toHaveBeenCalledWith(context.parameters.a11y, context.id);
+        expect(context.reporting.addReport).toHaveBeenCalledWith({
+            type: 'a11y',
+            version: 1,
+            result,
+            status: 'warning'
+        });
+    });
+    it('should report passed status when there are no violations', async ()=>{
+        const context = createContext();
+        const result = {
+            violations: []
+        };
+        mockedRun.mockResolvedValue(result);
+        await afterEach(context);
+        expect(mockedRun).toHaveBeenCalledWith(context.parameters.a11y, context.id);
+        expect(context.reporting.addReport).toHaveBeenCalledWith({
+            type: 'a11y',
+            version: 1,
+            result,
+            status: 'passed'
+        });
+    });
+    it('should not run accessibility checks when disable is true', async ()=>{
+        const context = createContext({
+            parameters: {
+                a11y: {
+                    disable: true
+                }
+            }
+        });
+        await afterEach(context);
+        expect(mockedRun).not.toHaveBeenCalled();
+        expect(context.reporting.addReport).not.toHaveBeenCalled();
+    });
+    it('should not run accessibility checks when globals manual is true', async ()=>{
+        const context = createContext({
+            globals: {
+                a11y: {
+                    manual: true
+                }
+            }
+        });
+        await afterEach(context);
+        expect(mockedRun).not.toHaveBeenCalled();
+        expect(context.reporting.addReport).not.toHaveBeenCalled();
+    });
+    it('should not run accessibility checks when parameters.a11y.test is "off"', async ()=>{
+        const context = createContext({
+            parameters: {
+                a11y: {
+                    test: 'off'
+                }
+            }
+        });
+        await afterEach(context);
+        expect(mockedRun).not.toHaveBeenCalled();
+        expect(context.reporting.addReport).not.toHaveBeenCalled();
+    });
+    it('should report error when run throws an error', async ()=>{
+        const context = createContext();
+        const error = new Error('Test error');
+        mockedRun.mockRejectedValue(error);
+        await expect(()=>afterEach(context)).rejects.toThrow();
+        expect(mockedRun).toHaveBeenCalledWith(context.parameters.a11y, context.id);
+        expect(context.reporting.addReport).toHaveBeenCalledWith({
+            type: 'a11y',
+            version: 1,
+            result: {
+                error
+            },
+            status: 'failed'
+        });
+    });
+    it('should not run in docs mode', async ()=>{
+        const context = createContext({
+            viewMode: 'docs'
+        });
+        await afterEach(context);
+        expect(mockedRun).not.toHaveBeenCalled();
+        expect(context.reporting.addReport).not.toHaveBeenCalled();
+    });
+});