Fix storybook test

app/components/ContentLockup.js

@@ -104,8 +104,9 @@ const ContentLockup = ({
               {variant === "hero" && (
                 <img
                   src="assets/Shapes_1.svg"
-                  alt="Decorative shapes"
+                  alt=""
                   className={styles.shape}
+                  role="presentation"
                 />
               )}
             </div>

app/components/HeaderTab.js

@@ -16,17 +16,20 @@ export default function HeaderTab({
       {children}
       <img
         src="assets/Union_xsm.svg"
-        alt="Union"
+        alt=""
+        role="presentation"
         className="absolute -bottom-[3px] -right-[52px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] sm:hidden -z-10"
       />
       <img
         src="assets/Union_sm_md_lg.svg"
-        alt="Union"
+        alt=""
+        role="presentation"
         className="absolute -bottom-[3.7px] -right-[53px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] hidden sm:block xl:hidden -z-10"
       />
       <img
         src="assets/Union_xlg.svg"
-        alt="Union"
+        alt=""
+        role="presentation"
         className="absolute -bottom-[6px] -right-[94px] w-[105px] h-[53px] hidden xl:block -z-10"
       />
     </div>

stories/Header.responsive.stories.js

@@ -1,5 +1,4 @@
 import Header from "../app/components/Header.js";
-import { within, userEvent } from "@storybook/test";
 
 export default {
   title: "Components/Header/Responsive",
@@ -180,140 +179,6 @@ export const ExtraLarge = {
   },
 };
 
-// Interactive story for testing user interactions
-export const Interactive = {
-  args: {
-    onToggle: () => console.log("Navigation toggled"),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Interactive header for testing user interactions. Check the Actions panel to see triggered events.",
-      },
-    },
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step("Click navigation items", async () => {
-      const useCasesLink = canvas.getByRole("menuitem", { name: /Use cases/i });
-      await userEvent.click(useCasesLink);
-
-      const learnLink = canvas.getByRole("menuitem", { name: /Learn/i });
-      await userEvent.click(learnLink);
-
-      const aboutLink = canvas.getByRole("menuitem", { name: /About/i });
-      await userEvent.click(aboutLink);
-    });
-
-    await step("Click authentication elements", async () => {
-      const loginLink = canvas.getByRole("menuitem", {
-        name: /log in to your account/i,
-      });
-      await userEvent.click(loginLink);
-
-      const createRuleButton = canvas.getByRole("button", {
-        name: /create a new rule with avatar decoration/i,
-      });
-      await userEvent.click(createRuleButton);
-    });
-  },
-};
-
-// Story for testing hover states
-export const HoverStates = {
-  args: {
-    onToggle: () => console.log("Navigation toggled"),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Header with hover states visible. This story captures the visual appearance when elements are hovered.",
-      },
-    },
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step("Hover over navigation items", async () => {
-      const useCasesLink = canvas.getByRole("menuitem", { name: /Use cases/i });
-      await userEvent.hover(useCasesLink);
-      // Wait for hover state to be visible
-      await new Promise((resolve) => setTimeout(resolve, 100));
-
-      const learnLink = canvas.getByRole("menuitem", { name: /Learn/i });
-      await userEvent.hover(learnLink);
-      await new Promise((resolve) => setTimeout(resolve, 100));
-
-      const aboutLink = canvas.getByRole("menuitem", { name: /About/i });
-      await userEvent.hover(aboutLink);
-      await new Promise((resolve) => setTimeout(resolve, 100));
-    });
-
-    await step("Hover over authentication elements", async () => {
-      const loginLink = canvas.getByRole("menuitem", {
-        name: /log in to your account/i,
-      });
-      await userEvent.hover(loginLink);
-      await new Promise((resolve) => setTimeout(resolve, 100));
-
-      const createRuleButton = canvas.getByRole("button", {
-        name: /create a new rule with avatar decoration/i,
-      });
-      await userEvent.hover(createRuleButton);
-      await new Promise((resolve) => setTimeout(resolve, 100));
-    });
-  },
-};
-
-// Story for testing focus states
-export const FocusStates = {
-  args: {
-    onToggle: () => console.log("Navigation toggled"),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Header with focus states visible. This story captures the visual appearance when elements are focused.",
-      },
-    },
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step("Focus on navigation items", async () => {
-      const useCasesLink = canvas.getByRole("menuitem", { name: /Use cases/i });
-      useCasesLink.focus();
-      await new Promise((resolve) => setTimeout(resolve, 100));
-
-      const learnLink = canvas.getByRole("menuitem", { name: /Learn/i });
-      learnLink.focus();
-      await new Promise((resolve) => setTimeout(resolve, 100));
-
-      const aboutLink = canvas.getByRole("menuitem", { name: /About/i });
-      aboutLink.focus();
-      await new Promise((resolve) => setTimeout(resolve, 100));
-    });
-
-    await step("Focus on authentication elements", async () => {
-      const loginLink = canvas.getByRole("menuitem", {
-        name: /log in to your account/i,
-      });
-      loginLink.focus();
-      await new Promise((resolve) => setTimeout(resolve, 100));
-
-      const createRuleButton = canvas.getByRole("button", {
-        name: /create a new rule with avatar decoration/i,
-      });
-      createRuleButton.focus();
-      await new Promise((resolve) => setTimeout(resolve, 100));
-    });
-  },
-};
-
 // Story for testing with long content
 export const WithLongContent = {
   args: {