@techsio/storybook-better-a11y 0.0.6 → 0.0.7

package/dist/components/A11yContext.js

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