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

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