@techsio/storybook-better-a11y 0.0.4 → 0.0.6

package/dist/components/A11yContext.js

@@ -0,0 +1,438 @@
+import react, { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { STORY_CHANGED, STORY_FINISHED, STORY_HOT_UPDATED, STORY_RENDER_PHASE_CHANGED } from "storybook/internal/core-events";
+import { HIGHLIGHT, REMOVE_HIGHLIGHT, SCROLL_INTO_VIEW } from "storybook/highlight";
+import { experimental_getStatusStore, experimental_useStatusStore, useAddonState, useChannel, useGlobals, useParameter, useStorybookApi, useStorybookState } from "storybook/manager-api";
+import { convert, themes } from "storybook/theming";
+import { getFriendlySummaryForAxeResult, getTitleForAxeResult } from "../axeRuleMappingHelper.js";
+import { ADDON_ID, EVENTS, STATUS_TYPE_ID_A11Y, STATUS_TYPE_ID_COMPONENT_TEST } from "../constants.js";
+import { RuleType } from "../types.js";
+const unhighlightedSelectors = [
+    'html',
+    'body',
+    'main'
+];
+const theme = convert(themes.light);
+const colorsByType = {
+    [RuleType.VIOLATION]: theme.color.negative,
+    [RuleType.PASS]: theme.color.positive,
+    [RuleType.INCOMPLETION]: theme.color.warning
+};
+const A11yContext = /*#__PURE__*/ createContext({
+    parameters: {},
+    results: void 0,
+    highlighted: false,
+    toggleHighlight: ()=>{},
+    tab: RuleType.VIOLATION,
+    handleCopyLink: ()=>{},
+    setTab: ()=>{},
+    setStatus: ()=>{},
+    status: 'initial',
+    error: void 0,
+    handleManual: ()=>{},
+    discrepancy: null,
+    selectedItems: new Map(),
+    allExpanded: false,
+    toggleOpen: ()=>{},
+    handleCollapseAll: ()=>{},
+    handleExpandAll: ()=>{},
+    handleJumpToElement: ()=>{},
+    handleSelectionChange: ()=>{}
+});
+const A11yContextProvider = (props)=>{
+    const parameters = useParameter('a11y', {});
+    const [globals] = useGlobals() ?? [];
+    const api = useStorybookApi();
+    const getInitialStatus = useCallback((manual = false)=>manual ? 'manual' : 'initial', []);
+    const manual = useMemo(()=>globals?.a11y?.manual ?? false, [
+        globals?.a11y?.manual
+    ]);
+    const a11ySelection = useMemo(()=>{
+        const value = api.getQueryParam('a11ySelection');
+        if (value) api.setQueryParams({
+            a11ySelection: ''
+        });
+        return value;
+    }, [
+        api
+    ]);
+    const [state, setState] = useAddonState(ADDON_ID, {
+        ui: {
+            highlighted: false,
+            tab: RuleType.VIOLATION
+        },
+        results: void 0,
+        error: void 0,
+        status: getInitialStatus(manual)
+    });
+    const { ui, results, error, status } = state;
+    const { storyId } = useStorybookState();
+    const currentStoryA11yStatusValue = experimental_useStatusStore((allStatuses)=>allStatuses[storyId]?.[STATUS_TYPE_ID_A11Y]?.value);
+    useEffect(()=>{
+        const unsubscribe = experimental_getStatusStore('storybook/component-test').onAllStatusChange((statuses, previousStatuses)=>{
+            const current = statuses[storyId]?.[STATUS_TYPE_ID_COMPONENT_TEST];
+            const previous = previousStatuses[storyId]?.[STATUS_TYPE_ID_COMPONENT_TEST];
+            if (current?.value === 'status-value:error' && previous?.value !== 'status-value:error') setState((prev)=>({
+                    ...prev,
+                    status: 'component-test-error'
+                }));
+        });
+        return unsubscribe;
+    }, [
+        setState,
+        storyId
+    ]);
+    const handleToggleHighlight = useCallback(()=>{
+        setState((prev)=>({
+                ...prev,
+                ui: {
+                    ...prev.ui,
+                    highlighted: !prev.ui.highlighted
+                }
+            }));
+    }, [
+        setState
+    ]);
+    const [selectedItems, setSelectedItems] = useState(()=>{
+        const initialValue = new Map();
+        if (a11ySelection && /^[a-z]+.[a-z-]+.[0-9]+$/.test(a11ySelection)) {
+            const [type, id] = a11ySelection.split('.');
+            initialValue.set(`${type}.${id}`, a11ySelection);
+        }
+        return initialValue;
+    });
+    const allExpanded = useMemo(()=>{
+        const currentResults = results?.[ui.tab];
+        return currentResults?.every((result)=>selectedItems.has(`${ui.tab}.${result.id}`)) ?? false;
+    }, [
+        results,
+        selectedItems,
+        ui.tab
+    ]);
+    const toggleOpen = useCallback((event, type, item)=>{
+        event.stopPropagation();
+        const key = `${type}.${item.id}`;
+        setSelectedItems((prev)=>new Map(prev.delete(key) ? prev : prev.set(key, `${key}.1`)));
+    }, []);
+    const handleCollapseAll = useCallback(()=>{
+        setSelectedItems(new Map());
+    }, []);
+    const handleExpandAll = useCallback(()=>{
+        setSelectedItems((prev)=>new Map(results?.[ui.tab]?.map((result)=>{
+                const key = `${ui.tab}.${result.id}`;
+                return [
+                    key,
+                    prev.get(key) ?? `${key}.1`
+                ];
+            }) ?? []));
+    }, [
+        results,
+        ui.tab
+    ]);
+    const handleSelectionChange = useCallback((key)=>{
+        const [type, id] = key.split('.');
+        setSelectedItems((prev)=>new Map(prev.set(`${type}.${id}`, key)));
+    }, []);
+    const handleError = useCallback((err)=>{
+        setState((prev)=>({
+                ...prev,
+                status: 'error',
+                error: err
+            }));
+    }, [
+        setState
+    ]);
+    const handleResult = useCallback((axeResults, id)=>{
+        if (storyId === id) {
+            setState((prev)=>({
+                    ...prev,
+                    status: 'ran',
+                    results: axeResults
+                }));
+            setTimeout(()=>{
+                setState((prev)=>{
+                    if ('ran' === prev.status) return {
+                        ...prev,
+                        status: 'ready'
+                    };
+                    return prev;
+                });
+                setSelectedItems((prev)=>{
+                    if (1 === prev.size) {
+                        const [key] = prev.values();
+                        document.getElementById(key)?.scrollIntoView({
+                            behavior: 'smooth',
+                            block: 'center'
+                        });
+                    }
+                    return prev;
+                });
+            }, 900);
+        }
+    }, [
+        storyId,
+        setState,
+        setSelectedItems
+    ]);
+    const handleSelect = useCallback((itemId, details)=>{
+        const [type, id] = itemId.split('.');
+        const { helpUrl, nodes } = results?.[type]?.find((r)=>r.id === id) || {};
+        const openedWindow = helpUrl && window.open(helpUrl, '_blank', 'noopener,noreferrer');
+        if (nodes && !openedWindow) {
+            const index = nodes.findIndex((n)=>details.selectors.some((s)=>s === String(n.target))) ?? -1;
+            if (-1 !== index) {
+                const key = `${type}.${id}.${index + 1}`;
+                setSelectedItems(new Map([
+                    [
+                        `${type}.${id}`,
+                        key
+                    ]
+                ]));
+                setTimeout(()=>{
+                    document.getElementById(key)?.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'center'
+                    });
+                }, 100);
+            }
+        }
+    }, [
+        results
+    ]);
+    const handleReport = useCallback(({ reporters })=>{
+        const a11yReport = reporters.find((r)=>'a11y' === r.type);
+        if (a11yReport) if ('error' in a11yReport.result) handleError(a11yReport.result.error);
+        else handleResult(a11yReport.result, storyId);
+    }, [
+        handleError,
+        handleResult,
+        storyId
+    ]);
+    const handleReset = useCallback(({ newPhase })=>{
+        if ('loading' === newPhase) setState((prev)=>({
+                ...prev,
+                results: void 0,
+                status: manual ? 'manual' : 'initial'
+            }));
+        else if ('afterEach' === newPhase && !manual) setState((prev)=>({
+                ...prev,
+                status: 'running'
+            }));
+    }, [
+        manual,
+        setState
+    ]);
+    const emit = useChannel({
+        [EVENTS.RESULT]: handleResult,
+        [EVENTS.ERROR]: handleError,
+        [EVENTS.SELECT]: handleSelect,
+        [STORY_CHANGED]: ()=>setSelectedItems(new Map()),
+        [STORY_RENDER_PHASE_CHANGED]: handleReset,
+        [STORY_FINISHED]: handleReport,
+        [STORY_HOT_UPDATED]: ()=>{
+            setState((prev)=>({
+                    ...prev,
+                    status: 'running'
+                }));
+            emit(EVENTS.MANUAL, storyId, parameters);
+        }
+    }, [
+        handleReset,
+        handleReport,
+        handleSelect,
+        handleError,
+        handleResult,
+        parameters,
+        storyId
+    ]);
+    const handleManual = useCallback(()=>{
+        setState((prev)=>({
+                ...prev,
+                status: 'running'
+            }));
+        emit(EVENTS.MANUAL, storyId, parameters);
+    }, [
+        emit,
+        parameters,
+        setState,
+        storyId
+    ]);
+    const handleCopyLink = useCallback(async (linkPath)=>{
+        const { createCopyToClipboardFunction } = await import("storybook/internal/components");
+        await createCopyToClipboardFunction()(`${window.location.origin}${linkPath}`);
+    }, []);
+    const handleJumpToElement = useCallback((target)=>emit(SCROLL_INTO_VIEW, target), [
+        emit
+    ]);
+    useEffect(()=>{
+        setState((prev)=>({
+                ...prev,
+                status: getInitialStatus(manual)
+            }));
+    }, [
+        getInitialStatus,
+        manual,
+        setState
+    ]);
+    const isInitial = 'initial' === status;
+    useEffect(()=>{
+        if (!a11ySelection) return;
+        setState((prev)=>{
+            const update = {
+                ...prev.ui,
+                highlighted: true
+            };
+            const [type] = a11ySelection.split('.') ?? [];
+            if (type && Object.values(RuleType).includes(type)) update.tab = type;
+            return {
+                ...prev,
+                ui: update
+            };
+        });
+    }, [
+        a11ySelection
+    ]);
+    useEffect(()=>{
+        emit(REMOVE_HIGHLIGHT, `${ADDON_ID}/selected`);
+        emit(REMOVE_HIGHLIGHT, `${ADDON_ID}/others`);
+        if (!ui.highlighted || isInitial) return;
+        const selected = Array.from(selectedItems.values()).flatMap((key)=>{
+            const [type, id, number] = key.split('.');
+            if (type !== ui.tab) return [];
+            const result = results?.[type]?.find((r)=>r.id === id);
+            const target = result?.nodes[Number(number) - 1]?.target;
+            return target ? [
+                String(target)
+            ] : [];
+        });
+        if (selected.length) emit(HIGHLIGHT, {
+            id: `${ADDON_ID}/selected`,
+            priority: 1,
+            selectors: selected,
+            styles: {
+                outline: `1px solid color-mix(in srgb, ${colorsByType[ui.tab]}, transparent 30%)`,
+                backgroundColor: 'transparent'
+            },
+            hoverStyles: {
+                outlineWidth: '2px'
+            },
+            focusStyles: {
+                backgroundColor: 'transparent'
+            },
+            menu: results?.[ui.tab].map((result)=>{
+                const selectors = result.nodes.flatMap((n)=>n.target).map(String).filter((e)=>selected.includes(e));
+                return [
+                    {
+                        id: `${ui.tab}.${result.id}:info`,
+                        title: getTitleForAxeResult(result),
+                        description: getFriendlySummaryForAxeResult(result),
+                        selectors
+                    },
+                    {
+                        id: `${ui.tab}.${result.id}`,
+                        iconLeft: 'info',
+                        iconRight: 'shareAlt',
+                        title: 'Learn how to resolve this violation',
+                        clickEvent: EVENTS.SELECT,
+                        selectors
+                    }
+                ];
+            })
+        });
+        const others = results?.[ui.tab].flatMap((r)=>r.nodes.flatMap((n)=>n.target).map(String)).filter((e)=>![
+                ...unhighlightedSelectors,
+                ...selected
+            ].includes(e));
+        if (others?.length) emit(HIGHLIGHT, {
+            id: `${ADDON_ID}/others`,
+            selectors: others,
+            styles: {
+                outline: `1px solid color-mix(in srgb, ${colorsByType[ui.tab]}, transparent 30%)`,
+                backgroundColor: `color-mix(in srgb, ${colorsByType[ui.tab]}, transparent 60%)`
+            },
+            hoverStyles: {
+                outlineWidth: '2px'
+            },
+            focusStyles: {
+                backgroundColor: 'transparent'
+            },
+            menu: results?.[ui.tab].map((result)=>{
+                const selectors = result.nodes.flatMap((n)=>n.target).map(String).filter((e)=>!selected.includes(e));
+                return [
+                    {
+                        id: `${ui.tab}.${result.id}:info`,
+                        title: getTitleForAxeResult(result),
+                        description: getFriendlySummaryForAxeResult(result),
+                        selectors
+                    },
+                    {
+                        id: `${ui.tab}.${result.id}`,
+                        iconLeft: 'info',
+                        iconRight: 'shareAlt',
+                        title: 'Learn how to resolve this violation',
+                        clickEvent: EVENTS.SELECT,
+                        selectors
+                    }
+                ];
+            })
+        });
+    }, [
+        isInitial,
+        emit,
+        ui.highlighted,
+        results,
+        ui.tab,
+        selectedItems
+    ]);
+    const discrepancy = useMemo(()=>{
+        if (!currentStoryA11yStatusValue) return null;
+        if ('status-value:success' === currentStoryA11yStatusValue && results?.violations.length) return 'cliPassedBrowserFailed';
+        if ('status-value:error' === currentStoryA11yStatusValue && !results?.violations.length) {
+            if ('ready' === status || 'ran' === status) return 'browserPassedCliFailed';
+            if ('manual' === status) return 'cliFailedButModeManual';
+        }
+        return null;
+    }, [
+        results?.violations.length,
+        status,
+        currentStoryA11yStatusValue
+    ]);
+    return /*#__PURE__*/ react.createElement(A11yContext.Provider, {
+        value: {
+            parameters,
+            results,
+            highlighted: ui.highlighted,
+            toggleHighlight: handleToggleHighlight,
+            tab: ui.tab,
+            setTab: useCallback((type)=>setState((prev)=>({
+                        ...prev,
+                        ui: {
+                            ...prev.ui,
+                            tab: type
+                        }
+                    })), [
+                setState
+            ]),
+            handleCopyLink,
+            status: status,
+            setStatus: useCallback((status)=>setState((prev)=>({
+                        ...prev,
+                        status
+                    })), [
+                setState
+            ]),
+            error: error,
+            handleManual,
+            discrepancy,
+            selectedItems,
+            toggleOpen,
+            allExpanded,
+            handleCollapseAll,
+            handleExpandAll,
+            handleJumpToElement,
+            handleSelectionChange
+        },
+        ...props
+    });
+};
+const useA11yContext = ()=>useContext(A11yContext);
+export { A11yContext, A11yContextProvider, useA11yContext };