@storybook/addon-a11y 10.0.0-rc.2 → 10.0.0-rc.3

package/dist/_browser-chunks/{chunk-ULDMWS76.js → chunk-JZJ5QO7P.js}

@@ -2,6 +2,7 @@
 var ADDON_ID = "storybook/a11y";
 var PANEL_ID = `${ADDON_ID}/panel`;
 var PARAM_KEY = `a11y`;
+var UI_STATE_ID = `${ADDON_ID}/ui`;
 var RESULT = `${ADDON_ID}/result`;
 var REQUEST = `${ADDON_ID}/request`;
 var RUNNING = `${ADDON_ID}/running`;

package/dist/_browser-chunks/{chunk-XD4HDXPO.js → chunk-W2OC36OK.js}

@@ -1,7 +1,7 @@
 import {
   EVENTS,
   PANEL_ID
-} from "./chunk-ULDMWS76.js";
+} from "./chunk-JZJ5QO7P.js";
 import {
   __export,
   __name

package/dist/index.js

@@ -1,9 +1,9 @@
 import {
   preview_exports
-} from "./_browser-chunks/chunk-XD4HDXPO.js";
+} from "./_browser-chunks/chunk-W2OC36OK.js";
 import {
   PARAM_KEY
-} from "./_browser-chunks/chunk-ULDMWS76.js";
+} from "./_browser-chunks/chunk-JZJ5QO7P.js";
 import {
   __name
 } from "./_browser-chunks/chunk-JFJ5UJ7Q.js";

package/dist/manager.js

@@ -6,7 +6,7 @@ import {
   PARAM_KEY,
   STATUS_TYPE_ID_A11Y,
   STATUS_TYPE_ID_COMPONENT_TEST
-} from "./_browser-chunks/chunk-ULDMWS76.js";
+} from "./_browser-chunks/chunk-JZJ5QO7P.js";
 import {
   __name
 } from "./_browser-chunks/chunk-JFJ5UJ7Q.js";
@@ -631,14 +631,16 @@ var A11yContextProvider = /* @__PURE__ */ __name((props) => {
     }
     return value;
   }, [api]);
-  const [results, setResults] = useAddonState(ADDON_ID);
-  const [tab, setTab] = useState(() => {
-    const [type] = a11ySelection?.split(".") ?? [];
-    return type && Object.values(RuleType).includes(type) ? type : RuleType.VIOLATION;
+  const [state, setState] = useAddonState(ADDON_ID, {
+    ui: {
+      highlighted: false,
+      tab: RuleType.VIOLATION
+    },
+    results: void 0,
+    error: void 0,
+    status: getInitialStatus(manual)
   });
-  const [error, setError] = useState(void 0);
-  const [status, setStatus] = useState(getInitialStatus(manual));
-  const [highlighted, setHighlighted] = useState(!!a11ySelection);
+  const { ui, results, error, status } = state;
   const { storyId } = useStorybookState();
   const currentStoryA11yStatusValue = experimental_useStatusStore(
     (allStatuses) => allStatuses[storyId]?.[STATUS_TYPE_ID_A11Y]?.value
@@ -649,16 +651,15 @@ var A11yContextProvider = /* @__PURE__ */ __name((props) => {
         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") {
-          setStatus("component-test-error");
+          setState((prev) => ({ ...prev, status: "component-test-error" }));
         }
       }
     );
     return unsubscribe;
-  }, [storyId]);
-  const handleToggleHighlight = useCallback(
-    () => setHighlighted((prevHighlighted) => !prevHighlighted),
-    []
-  );
+  }, [setState, storyId]);
+  const handleToggleHighlight = useCallback(() => {
+    setState((prev) => ({ ...prev, ui: { ...prev.ui, highlighted: !prev.ui.highlighted } }));
+  }, [setState]);
   const [selectedItems, setSelectedItems] = useState(() => {
     const initialValue = /* @__PURE__ */ new Map();
     if (a11ySelection && /^[a-z]+.[a-z-]+.[0-9]+$/.test(a11ySelection)) {
@@ -668,9 +669,9 @@ var A11yContextProvider = /* @__PURE__ */ __name((props) => {
     return initialValue;
   });
   const allExpanded = useMemo(() => {
-    const currentResults = results?.[tab];
-    return currentResults?.every((result) => selectedItems.has(`${tab}.${result.id}`)) ?? false;
-  }, [results, selectedItems, tab]);
+    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();
@@ -685,38 +686,45 @@ var A11yContextProvider = /* @__PURE__ */ __name((props) => {
   const handleExpandAll = useCallback(() => {
     setSelectedItems(
       (prev) => new Map(
-        results?.[tab]?.map((result) => {
-          const key = `${tab}.${result.id}`;
+        results?.[ui.tab]?.map((result) => {
+          const key = `${ui.tab}.${result.id}`;
           return [key, prev.get(key) ?? `${key}.1`];
         }) ?? []
       )
     );
-  }, [results, tab]);
+  }, [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) => {
-    setStatus("error");
-    setError(err);
-  }, []);
+  const handleError = useCallback(
+    (err) => {
+      setState((prev) => ({ ...prev, status: "error", error: err }));
+    },
+    [setState]
+  );
   const handleResult = useCallback(
     (axeResults, id) => {
       if (storyId === id) {
-        setStatus("ran");
-        setResults(axeResults);
+        setState((prev) => ({ ...prev, status: "ran", results: axeResults }));
         setTimeout(() => {
-          if (status === "ran") {
-            setStatus("ready");
-          }
-          if (selectedItems.size === 1) {
-            const [key] = selectedItems.values();
-            document.getElementById(key)?.scrollIntoView({ behavior: "smooth", block: "center" });
-          }
+          setState((prev) => {
+            if (prev.status === "ran") {
+              return { ...prev, status: "ready" };
+            }
+            return prev;
+          });
+          setSelectedItems((prev) => {
+            if (prev.size === 1) {
+              const [key] = prev.values();
+              document.getElementById(key)?.scrollIntoView({ behavior: "smooth", block: "center" });
+            }
+            return prev;
+          });
         }, 900);
       }
     },
-    [setResults, status, storyId, selectedItems]
+    [storyId, setState, setSelectedItems]
   );
   const handleSelect = useCallback(
     (itemId, details) => {
@@ -752,14 +760,16 @@ var A11yContextProvider = /* @__PURE__ */ __name((props) => {
   const handleReset = useCallback(
     ({ newPhase }) => {
       if (newPhase === "loading") {
-        setResults(void 0);
-        setStatus(manual ? "manual" : "initial");
-      }
-      if (newPhase === "afterEach" && !manual) {
-        setStatus("running");
+        setState((prev) => ({
+          ...prev,
+          results: void 0,
+          status: manual ? "manual" : "initial"
+        }));
+      } else if (newPhase === "afterEach" && !manual) {
+        setState((prev) => ({ ...prev, status: "running" }));
       }
     },
-    [manual, setResults]
+    [manual, setState]
   );
   const emit = useChannel(
     {
@@ -770,16 +780,16 @@ var A11yContextProvider = /* @__PURE__ */ __name((props) => {
       [STORY_RENDER_PHASE_CHANGED]: handleReset,
       [STORY_FINISHED]: handleReport,
       [STORY_HOT_UPDATED]: () => {
-        setStatus("running");
+        setState((prev) => ({ ...prev, status: "running" }));
         emit(EVENTS.MANUAL, storyId, parameters);
       }
     },
     [handleReset, handleReport, handleSelect, handleError, handleResult, parameters, storyId]
   );
   const handleManual = useCallback(() => {
-    setStatus("running");
+    setState((prev) => ({ ...prev, status: "running" }));
     emit(EVENTS.MANUAL, storyId, parameters);
-  }, [emit, parameters, storyId]);
+  }, [emit, parameters, setState, storyId]);
   const handleCopyLink = useCallback(async (linkPath) => {
     const { createCopyToClipboardFunction } = await import("storybook/internal/components");
     await createCopyToClipboardFunction()(`${window.location.origin}${linkPath}`);
@@ -789,18 +799,31 @@ var A11yContextProvider = /* @__PURE__ */ __name((props) => {
     [emit]
   );
   useEffect(() => {
-    setStatus(getInitialStatus(manual));
-  }, [getInitialStatus, manual]);
+    setState((prev) => ({ ...prev, status: getInitialStatus(manual) }));
+  }, [getInitialStatus, manual, setState]);
   const isInitial = status === "initial";
+  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 (!highlighted || isInitial) {
+    if (!ui.highlighted || isInitial) {
       return;
     }
     const selected = Array.from(selectedItems.values()).flatMap((key) => {
       const [type, id, number] = key.split(".");
-      if (type !== tab) {
+      if (type !== ui.tab) {
         return [];
       }
       const result = results?.[type]?.find((r) => r.id === id);
@@ -813,7 +836,7 @@ var A11yContextProvider = /* @__PURE__ */ __name((props) => {
         priority: 1,
         selectors: selected,
         styles: {
-          outline: `1px solid color-mix(in srgb, ${colorsByType[tab]}, transparent 30%)`,
+          outline: `1px solid color-mix(in srgb, ${colorsByType[ui.tab]}, transparent 30%)`,
           backgroundColor: "transparent"
         },
         hoverStyles: {
@@ -822,17 +845,17 @@ var A11yContextProvider = /* @__PURE__ */ __name((props) => {
         focusStyles: {
           backgroundColor: "transparent"
         },
-        menu: results?.[tab].map((result) => {
+        menu: results?.[ui.tab].map((result) => {
           const selectors = result.nodes.flatMap((n) => n.target).map(String).filter((e) => selected.includes(e));
           return [
             {
-              id: `${tab}.${result.id}:info`,
+              id: `${ui.tab}.${result.id}:info`,
               title: getTitleForAxeResult(result),
               description: getFriendlySummaryForAxeResult(result),
               selectors
             },
             {
-              id: `${tab}.${result.id}`,
+              id: `${ui.tab}.${result.id}`,
               iconLeft: "info",
               iconRight: "shareAlt",
               title: "Learn how to resolve this violation",
@@ -843,14 +866,14 @@ var A11yContextProvider = /* @__PURE__ */ __name((props) => {
         })
       });
     }
-    const others = results?.[tab].flatMap((r) => r.nodes.flatMap((n) => n.target).map(String)).filter((e) => ![...unhighlightedSelectors, ...selected].includes(e));
+    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[tab]}, transparent 30%)`,
-          backgroundColor: `color-mix(in srgb, ${colorsByType[tab]}, transparent 60%)`
+          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"
@@ -858,17 +881,17 @@ var A11yContextProvider = /* @__PURE__ */ __name((props) => {
         focusStyles: {
           backgroundColor: "transparent"
         },
-        menu: results?.[tab].map((result) => {
+        menu: results?.[ui.tab].map((result) => {
           const selectors = result.nodes.flatMap((n) => n.target).map(String).filter((e) => !selected.includes(e));
           return [
             {
-              id: `${tab}.${result.id}:info`,
+              id: `${ui.tab}.${result.id}:info`,
               title: getTitleForAxeResult(result),
               description: getFriendlySummaryForAxeResult(result),
               selectors
             },
             {
-              id: `${tab}.${result.id}`,
+              id: `${ui.tab}.${result.id}`,
               iconLeft: "info",
               iconRight: "shareAlt",
               title: "Learn how to resolve this violation",
@@ -879,7 +902,7 @@ var A11yContextProvider = /* @__PURE__ */ __name((props) => {
         })
       });
     }
-  }, [isInitial, emit, highlighted, results, tab, selectedItems]);
+  }, [isInitial, emit, ui.highlighted, results, ui.tab, selectedItems]);
   const discrepancy = useMemo(() => {
     if (!currentStoryA11yStatusValue) {
       return null;
@@ -903,13 +926,19 @@ var A11yContextProvider = /* @__PURE__ */ __name((props) => {
       value: {
         parameters,
         results,
-        highlighted,
+        highlighted: ui.highlighted,
         toggleHighlight: handleToggleHighlight,
-        tab,
-        setTab,
+        tab: ui.tab,
+        setTab: useCallback(
+          (type) => setState((prev) => ({ ...prev, ui: { ...prev.ui, tab: type } })),
+          [setState]
+        ),
         handleCopyLink,
         status,
-        setStatus,
+        setStatus: useCallback(
+          (status2) => setState((prev) => ({ ...prev, status: status2 })),
+          [setState]
+        ),
         error,
         handleManual,
         discrepancy,
@@ -3377,9 +3406,17 @@ var VisionSimulator = /* @__PURE__ */ __name(() => {
 var Title3 = /* @__PURE__ */ __name(() => {
   const api = useStorybookApi3();
   const selectedPanel = api.getSelectedPanel();
-  const [addonState] = useAddonState2(ADDON_ID);
-  const violationsNb = addonState?.violations?.length || 0;
-  const incompleteNb = addonState?.incomplete?.length || 0;
+  const [{ results }] = useAddonState2(ADDON_ID, {
+    ui: {
+      highlighted: false,
+      tab: RuleType.VIOLATION
+    },
+    results: void 0,
+    error: void 0,
+    status: "initial"
+  });
+  const violationsNb = results?.violations?.length ?? 0;
+  const incompleteNb = results?.incomplete?.length ?? 0;
   const count = violationsNb + incompleteNb;
   const suffix = count === 0 ? null : React10.createElement(Badge3, { compact: true, status: selectedPanel === PANEL_ID ? "active" : "neutral" }, count);
   return React10.createElement("div", { style: { display: "flex", alignItems: "center", gap: 6 } }, React10.createElement("span", null, "Accessibility"), suffix);

package/dist/postinstall.js

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_onsvx9lim3 from 'node:url';
-import CJS_COMPAT_NODE_PATH_onsvx9lim3 from 'node:path';
-import CJS_COMPAT_NODE_MODULE_onsvx9lim3 from "node:module";
+import CJS_COMPAT_NODE_URL_g32lnsegga7 from 'node:url';
+import CJS_COMPAT_NODE_PATH_g32lnsegga7 from 'node:path';
+import CJS_COMPAT_NODE_MODULE_g32lnsegga7 from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_onsvx9lim3.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_onsvx9lim3.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_onsvx9lim3.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_g32lnsegga7.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_g32lnsegga7.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_g32lnsegga7.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration

package/dist/preview.js

@@ -2,8 +2,8 @@ import {
   afterEach,
   initialGlobals,
   parameters
-} from "./_browser-chunks/chunk-XD4HDXPO.js";
-import "./_browser-chunks/chunk-ULDMWS76.js";
+} from "./_browser-chunks/chunk-W2OC36OK.js";
+import "./_browser-chunks/chunk-JZJ5QO7P.js";
 import "./_browser-chunks/chunk-JFJ5UJ7Q.js";
 export {
   afterEach,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "10.0.0-rc.2",
+  "version": "10.0.0-rc.3",
   "description": "Storybook Addon A11y: Test UI component compliance with WCAG web accessibility standards",
   "keywords": [
     "a11y",
@@ -74,7 +74,7 @@
     "vitest-axe": "^0.1.0"
   },
   "peerDependencies": {
-    "storybook": "^10.0.0-rc.2"
+    "storybook": "^10.0.0-rc.3"
   },
   "publishConfig": {
     "access": "public"