[test-chromatic] try decorator solution

Author: beaesguerra

__docs__/wonder-blocks-tabs/navigation-tabs-variants.stories.tsx

@@ -1,4 +1,4 @@
-import type {Meta, StoryObj} from "@storybook/react";
+import type {Meta, StoryFn, StoryObj} from "@storybook/react";
 import * as React from "react";
 
 import {StyleSheet} from "aphrodite";
@@ -168,6 +168,19 @@ const columns = [
 
 type Story = StoryObj<typeof NavigationTabs>;
 
+const createPseudoStatesDecorator = (state: string) => (Story: StoryFn) => {
+    React.useEffect(() => {
+        // Apply classes directly after a short delay
+        const timer = setTimeout(() => {
+            document?.querySelectorAll("a").forEach((a) => {
+                a.classList.add(`pseudo-${state}`);
+            });
+        }, 200);
+        return () => clearTimeout(timer);
+    }, []);
+    return <Story />;
+};
+
 /**
  * The following stories are used to generate the pseudo states for the Switch
  * component. This is only used for visual testing in Chromatic.
@@ -212,39 +225,45 @@ export const Default: Story = {};
 
 export const Hover: Story = {
     parameters: {
-        pseudo: {hover: true},
+        // pseudo: {hover: true},
         chromatic: {
             // TODO(WB-1917): Temporarily disabled since snapshots with
             // NavigationTabs and pseudo states are flaky. We still get state
             // style coverage in NavigationTabItem AllVariants stories
             // disableSnapshot: true,
         },
     },
+    decorators: [createPseudoStatesDecorator("hover")],
 };
 
 export const Focus: Story = {
     parameters: {
-        pseudo: {focusVisible: true},
+        // pseudo: {focusVisible: true},
         chromatic: {
             // TODO(WB-1917): Temporarily disabled since snapshots with
             // NavigationTabs and pseudo states are flaky. We still get state
             // style coverage in NavigationTabItem AllVariants stories
             // disableSnapshot: true,
         },
     },
+    decorators: [createPseudoStatesDecorator("focus-visible")],
 };
 
 export const HoverFocus: Story = {
     name: "Hover + Focus",
     parameters: {
-        pseudo: {hover: true, focusVisible: true},
+        // pseudo: {hover: true, focusVisible: true},
         chromatic: {
             // TODO(WB-1917): Temporarily disabled since snapshots with
             // NavigationTabs and pseudo states are flaky. We still get state
             // style coverage in NavigationTabItem AllVariants stories
             // disableSnapshot: true,
         },
     },
+    decorators: [
+        createPseudoStatesDecorator("hover"),
+        createPseudoStatesDecorator("focus-visible"),
+    ],
 };
 
 export const Active: Story = {
@@ -257,6 +276,7 @@ export const Active: Story = {
             // disableSnapshot: true,
         },
     },
+    decorators: [createPseudoStatesDecorator("active")],
 };
 
 export const Zoom: Story = {