@storybook/addon-a11y 10.0.0-beta.5 → 10.0.0-beta.7

package/dist/manager.js

@@ -791,10 +791,11 @@ var A11yContextProvider = /* @__PURE__ */ __name((props) => {
   useEffect(() => {
     setStatus(getInitialStatus(manual));
   }, [getInitialStatus, manual]);
+  const isInitial = status === "initial";
   useEffect(() => {
     emit(REMOVE_HIGHLIGHT, `${ADDON_ID}/selected`);
     emit(REMOVE_HIGHLIGHT, `${ADDON_ID}/others`);
-    if (!highlighted) {
+    if (!highlighted || isInitial) {
       return;
     }
     const selected = Array.from(selectedItems.values()).flatMap((key) => {
@@ -806,75 +807,79 @@ var A11yContextProvider = /* @__PURE__ */ __name((props) => {
       const target = result?.nodes[Number(number) - 1]?.target;
       return target ? [String(target)] : [];
     });
-    emit(HIGHLIGHT, {
-      id: `${ADDON_ID}/selected`,
-      priority: 1,
-      selectors: selected,
-      styles: {
-        outline: `1px solid color-mix(in srgb, ${colorsByType[tab]}, transparent 30%)`,
-        backgroundColor: "transparent"
-      },
-      hoverStyles: {
-        outlineWidth: "2px"
-      },
-      focusStyles: {
-        backgroundColor: "transparent"
-      },
-      menu: results?.[tab].map((result) => {
-        const selectors = result.nodes.flatMap((n) => n.target).map(String).filter((e) => selected.includes(e));
-        return [
-          {
-            id: `${tab}.${result.id}:info`,
-            title: getTitleForAxeResult(result),
-            description: getFriendlySummaryForAxeResult(result),
-            selectors
-          },
-          {
-            id: `${tab}.${result.id}`,
-            iconLeft: "info",
-            iconRight: "shareAlt",
-            title: "Learn how to resolve this violation",
-            clickEvent: EVENTS.SELECT,
-            selectors
-          }
-        ];
-      })
-    });
+    if (selected.length) {
+      emit(HIGHLIGHT, {
+        id: `${ADDON_ID}/selected`,
+        priority: 1,
+        selectors: selected,
+        styles: {
+          outline: `1px solid color-mix(in srgb, ${colorsByType[tab]}, transparent 30%)`,
+          backgroundColor: "transparent"
+        },
+        hoverStyles: {
+          outlineWidth: "2px"
+        },
+        focusStyles: {
+          backgroundColor: "transparent"
+        },
+        menu: results?.[tab].map((result) => {
+          const selectors = result.nodes.flatMap((n) => n.target).map(String).filter((e) => selected.includes(e));
+          return [
+            {
+              id: `${tab}.${result.id}:info`,
+              title: getTitleForAxeResult(result),
+              description: getFriendlySummaryForAxeResult(result),
+              selectors
+            },
+            {
+              id: `${tab}.${result.id}`,
+              iconLeft: "info",
+              iconRight: "shareAlt",
+              title: "Learn how to resolve this violation",
+              clickEvent: EVENTS.SELECT,
+              selectors
+            }
+          ];
+        })
+      });
+    }
     const others = results?.[tab].flatMap((r) => r.nodes.flatMap((n) => n.target).map(String)).filter((e) => ![...unhighlightedSelectors, ...selected].includes(e));
-    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%)`
-      },
-      hoverStyles: {
-        outlineWidth: "2px"
-      },
-      focusStyles: {
-        backgroundColor: "transparent"
-      },
-      menu: results?.[tab].map((result) => {
-        const selectors = result.nodes.flatMap((n) => n.target).map(String).filter((e) => !selected.includes(e));
-        return [
-          {
-            id: `${tab}.${result.id}:info`,
-            title: getTitleForAxeResult(result),
-            description: getFriendlySummaryForAxeResult(result),
-            selectors
-          },
-          {
-            id: `${tab}.${result.id}`,
-            iconLeft: "info",
-            iconRight: "shareAlt",
-            title: "Learn how to resolve this violation",
-            clickEvent: EVENTS.SELECT,
-            selectors
-          }
-        ];
-      })
-    });
-  }, [emit, highlighted, results, tab, selectedItems]);
+    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%)`
+        },
+        hoverStyles: {
+          outlineWidth: "2px"
+        },
+        focusStyles: {
+          backgroundColor: "transparent"
+        },
+        menu: results?.[tab].map((result) => {
+          const selectors = result.nodes.flatMap((n) => n.target).map(String).filter((e) => !selected.includes(e));
+          return [
+            {
+              id: `${tab}.${result.id}:info`,
+              title: getTitleForAxeResult(result),
+              description: getFriendlySummaryForAxeResult(result),
+              selectors
+            },
+            {
+              id: `${tab}.${result.id}`,
+              iconLeft: "info",
+              iconRight: "shareAlt",
+              title: "Learn how to resolve this violation",
+              clickEvent: EVENTS.SELECT,
+              selectors
+            }
+          ];
+        })
+      });
+    }
+  }, [isInitial, emit, highlighted, results, tab, selectedItems]);
   const discrepancy = useMemo(() => {
     if (!currentStoryA11yStatusValue) {
       return null;

package/dist/postinstall.js

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_hs62yqx8j3b from 'node:url';
-import CJS_COMPAT_NODE_PATH_hs62yqx8j3b from 'node:path';
-import CJS_COMPAT_NODE_MODULE_hs62yqx8j3b from "node:module";
+import CJS_COMPAT_NODE_URL_3o5932roygk from 'node:url';
+import CJS_COMPAT_NODE_PATH_3o5932roygk from 'node:path';
+import CJS_COMPAT_NODE_MODULE_3o5932roygk from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_hs62yqx8j3b.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_hs62yqx8j3b.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_hs62yqx8j3b.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_3o5932roygk.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_3o5932roygk.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_3o5932roygk.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration

package/dist/preview.d.ts

@@ -1,3 +1,50 @@
-// auto generated file from file:///home/runner/work/storybook/storybook/scripts/build/utils/generate-type-mappers.ts, do not edit
-export * from '../src/preview.tsx';
-export type * from '../src/preview.tsx';
+import { AfterEach } from 'storybook/internal/types';
+import { Selector, SelectorList, RunOptions, Spec } from 'axe-core';
+
+type SelectorWithoutNode = Omit<Selector, 'Node'> | Omit<SelectorList, 'NodeList'>;
+type ContextObjectWithoutNode = {
+    include: SelectorWithoutNode;
+    exclude?: SelectorWithoutNode;
+} | {
+    exclude: SelectorWithoutNode;
+    include?: SelectorWithoutNode;
+};
+type ContextSpecWithoutNode = SelectorWithoutNode | ContextObjectWithoutNode;
+type A11yTest = 'off' | 'todo' | 'error';
+interface A11yParameters {
+    /**
+     * Context parameter for axe-core's run function, except without support for passing Nodes and
+     * NodeLists directly.
+     *
+     * @see https://github.com/dequelabs/axe-core/blob/develop/doc/context.md
+     */
+    context?: ContextSpecWithoutNode;
+    /**
+     * Options for running axe-core.
+     *
+     * @see https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter
+     */
+    options?: RunOptions;
+    /**
+     * Configuration object for axe-core.
+     *
+     * @see https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axeconfigure
+     */
+    config?: Spec;
+    /** Whether to disable accessibility tests. */
+    disable?: boolean;
+    /** Defines how accessibility violations should be handled: 'off', 'todo', or 'error'. */
+    test?: A11yTest;
+}
+
+declare const afterEach: AfterEach<any>;
+declare const initialGlobals: {
+    a11y: {
+        manual: boolean;
+    };
+};
+declare const parameters: {
+    a11y: A11yParameters;
+};
+
+export { afterEach, initialGlobals, parameters };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "10.0.0-beta.5",
+  "version": "10.0.0-beta.7",
   "description": "Storybook Addon A11y: Test UI component compliance with WCAG web accessibility standards",
   "keywords": [
     "a11y",
@@ -64,7 +64,7 @@
   },
   "devDependencies": {
     "@radix-ui/react-tabs": "1.0.4",
-    "@storybook/icons": "^1.4.0",
+    "@storybook/icons": "^1.6.0",
     "@testing-library/react": "^14.0.0",
     "execa": "^9.5.2",
     "react": "^18.2.0",
@@ -74,7 +74,7 @@
     "vitest-axe": "^0.1.0"
   },
   "peerDependencies": {
-    "storybook": "^10.0.0-beta.5"
+    "storybook": "^10.0.0-beta.7"
   },
   "publishConfig": {
     "access": "public"

package/dist/preview.d.tsx

@@ -1,50 +0,0 @@
-import { AfterEach } from 'storybook/internal/types';
-import { Selector, SelectorList, RunOptions, Spec } from 'axe-core';
-
-type SelectorWithoutNode = Omit<Selector, 'Node'> | Omit<SelectorList, 'NodeList'>;
-type ContextObjectWithoutNode = {
-    include: SelectorWithoutNode;
-    exclude?: SelectorWithoutNode;
-} | {
-    exclude: SelectorWithoutNode;
-    include?: SelectorWithoutNode;
-};
-type ContextSpecWithoutNode = SelectorWithoutNode | ContextObjectWithoutNode;
-type A11yTest = 'off' | 'todo' | 'error';
-interface A11yParameters {
-    /**
-     * Context parameter for axe-core's run function, except without support for passing Nodes and
-     * NodeLists directly.
-     *
-     * @see https://github.com/dequelabs/axe-core/blob/develop/doc/context.md
-     */
-    context?: ContextSpecWithoutNode;
-    /**
-     * Options for running axe-core.
-     *
-     * @see https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter
-     */
-    options?: RunOptions;
-    /**
-     * Configuration object for axe-core.
-     *
-     * @see https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axeconfigure
-     */
-    config?: Spec;
-    /** Whether to disable accessibility tests. */
-    disable?: boolean;
-    /** Defines how accessibility violations should be handled: 'off', 'todo', or 'error'. */
-    test?: A11yTest;
-}
-
-declare const afterEach: AfterEach<any>;
-declare const initialGlobals: {
-    a11y: {
-        manual: boolean;
-    };
-};
-declare const parameters: {
-    a11y: A11yParameters;
-};
-
-export { afterEach, initialGlobals, parameters };