Fix failing tests

tests/accessibility/Select.a11y.test.jsx

@@ -47,8 +47,8 @@ describe("Select Component Accessibility", () => {
       await user.click(selectButton);
 
       await waitFor(() => {
-        const menu = screen.getByRole("menu");
-        expect(menu).toBeInTheDocument();
+        const listbox = screen.getByRole("listbox");
+        expect(listbox).toBeInTheDocument();
       });
     });
 
@@ -60,7 +60,7 @@ describe("Select Component Accessibility", () => {
       await user.click(selectButton);
 
       await waitFor(() => {
-        const options = screen.getAllByRole("menuitem");
+        const options = screen.getAllByRole("option");
         expect(options).toHaveLength(3);
         expect(options[0]).toHaveTextContent("Option 1");
         expect(options[1]).toHaveTextContent("Option 2");
@@ -79,7 +79,7 @@ describe("Select Component Accessibility", () => {
       await user.keyboard("{Enter}");
 
       await waitFor(() => {
-        expect(screen.getByRole("menu")).toBeInTheDocument();
+        expect(screen.getByRole("listbox")).toBeInTheDocument();
       });
     });
 
@@ -92,7 +92,7 @@ describe("Select Component Accessibility", () => {
       await user.keyboard(" ");
 
       await waitFor(() => {
-        expect(screen.getByRole("menu")).toBeInTheDocument();
+        expect(screen.getByRole("listbox")).toBeInTheDocument();
       });
     });
 
@@ -104,7 +104,7 @@ describe("Select Component Accessibility", () => {
       await user.click(selectButton);
 
       await waitFor(() => {
-        expect(screen.getByRole("menu")).toBeInTheDocument();
+        expect(screen.getByRole("listbox")).toBeInTheDocument();
       });
 
       await user.keyboard("{Escape}");
@@ -123,7 +123,7 @@ describe("Select Component Accessibility", () => {
       await user.click(selectButton);
 
       await waitFor(() => {
-        expect(screen.getByRole("menu")).toBeInTheDocument();
+        expect(screen.getByRole("listbox")).toBeInTheDocument();
       });
 
       await user.click(screen.getByText("Option 1"));
@@ -179,7 +179,7 @@ describe("Select Component Accessibility", () => {
       await user.click(selectButton);
 
       await waitFor(() => {
-        expect(screen.getByRole("menu")).toBeInTheDocument();
+        expect(screen.getByRole("listbox")).toBeInTheDocument();
       });
 
       await user.click(screen.getByText("Option 1"));
@@ -216,7 +216,7 @@ describe("Select Component Accessibility", () => {
 
       const selectButton = screen.getByRole("button");
       expect(selectButton).toHaveClass(
-        "border-[var(--color-border-default-utility-negative)]"
+        "border-[var(--color-border-default-utility-negative)]",
       );
     });
   });
@@ -230,7 +230,7 @@ describe("Select Component Accessibility", () => {
 
     it("meets WCAG standards in disabled state", async () => {
       const { container } = render(
-        <Select {...defaultProps} disabled={true} />
+        <Select {...defaultProps} disabled={true} />,
       );
       const results = await axe(container);
       expect(results).toHaveNoViolations();
@@ -250,7 +250,7 @@ describe("Select Component Accessibility", () => {
       await user.click(selectButton);
 
       await waitFor(() => {
-        expect(screen.getByRole("menu")).toBeInTheDocument();
+        expect(screen.getByRole("listbox")).toBeInTheDocument();
       });
 
       const results = await axe(container);
@@ -264,7 +264,7 @@ describe("Select Component Accessibility", () => {
 
       const selectButton = screen.getByRole("button");
       expect(selectButton).toHaveClass(
-        "text-[var(--color-content-default-primary)]"
+        "text-[var(--color-content-default-primary)]",
       );
     });
 
@@ -273,7 +273,7 @@ describe("Select Component Accessibility", () => {
 
       const label = screen.getByText("Test Select");
       expect(label).toHaveClass(
-        "text-[var(--color-content-default-secondary)]"
+        "text-[var(--color-content-default-secondary)]",
       );
     });
   });
@@ -284,10 +284,10 @@ describe("Select Component Accessibility", () => {
 
       const selectButton = screen.getByRole("button");
       expect(selectButton).toHaveClass(
-        "focus-visible:border-[var(--color-border-default-utility-info)]"
+        "focus-visible:border-[var(--color-border-default-utility-info)]",
       );
       expect(selectButton).toHaveClass(
-        "focus-visible:shadow-[0_0_5px_3px_#3281F8]"
+        "focus-visible:shadow-[0_0_5px_3px_#3281F8]",
       );
     });
 
@@ -297,10 +297,10 @@ describe("Select Component Accessibility", () => {
       const selectButton = screen.getByRole("button");
       // Focus state should be different from hover state
       expect(selectButton).toHaveClass(
-        "focus-visible:border-[var(--color-border-default-utility-info)]"
+        "focus-visible:border-[var(--color-border-default-utility-info)]",
       );
       expect(selectButton).toHaveClass(
-        "hover:shadow-[0_0_0_2px_var(--color-border-default-tertiary)]"
+        "hover:shadow-[0_0_0_2px_var(--color-border-default-tertiary)]",
       );
     });
   });

tests/e2e/ContextMenu.storybook.test.ts

@@ -1,302 +0,0 @@
-import { test, expect } from "@playwright/test";
-
-test.describe("ContextMenu Components Storybook Tests", () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-contextmenu--default",
-    );
-  });
-
-  test("renders default context menu", async ({ page }) => {
-    const menu = page.getByRole("listbox");
-    await expect(menu).toBeVisible();
-
-    const items = page.getByRole("option");
-    const count = await items.count();
-    expect(count).toBeGreaterThan(0);
-  });
-
-  test("renders menu items correctly", async ({ page }) => {
-    const menuItems = page.getByRole("option");
-    const count = await menuItems.count();
-
-    for (let i = 0; i < count; i++) {
-      await expect(menuItems.nth(i)).toBeVisible();
-    }
-  });
-
-  test("handles menu item clicks", async ({ page }) => {
-    const menuItems = page.getByRole("option");
-    const firstItem = menuItems.first();
-
-    await firstItem.click();
-
-    // Check that click was handled (no error should occur)
-    await expect(firstItem).toBeVisible();
-  });
-
-  test("shows selected state correctly", async ({ page }) => {
-    // Navigate to MenuItem story
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-contextmenu--menu-item",
-    );
-
-    const menuItems = page.getByRole("option");
-    const count = await menuItems.count();
-
-    // Check that at least one item has selected state
-    let hasSelected = false;
-    for (let i = 0; i < count; i++) {
-      const isSelected = await menuItems.nth(i).getAttribute("aria-selected");
-      if (isSelected === "true") {
-        hasSelected = true;
-        break;
-      }
-    }
-
-    expect(hasSelected).toBe(true);
-  });
-
-  test("shows submenu indicators", async ({ page }) => {
-    // Navigate to MenuItem story
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-contextmenu--menu-item",
-    );
-
-    const submenuArrows = page.getByTestId("submenu-arrow");
-    const count = await submenuArrows.count();
-
-    if (count > 0) {
-      await expect(submenuArrows.first()).toBeVisible();
-    }
-  });
-
-  test("shows checkmarks for selected items", async ({ page }) => {
-    // Navigate to MenuItem story
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-contextmenu--menu-item",
-    );
-
-    const checkmarks = page.getByTestId("checkmark");
-    const count = await checkmarks.count();
-
-    if (count > 0) {
-      await expect(checkmarks.first()).toBeVisible();
-    }
-  });
-
-  test("renders menu sections correctly", async ({ page }) => {
-    // Navigate to MenuSection story
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-contextmenu--menu-section",
-    );
-
-    const sectionTitles = page.getByText(/Section/);
-    const count = await sectionTitles.count();
-
-    expect(count).toBeGreaterThan(0);
-
-    for (let i = 0; i < count; i++) {
-      await expect(sectionTitles.nth(i)).toBeVisible();
-    }
-  });
-
-  test("renders menu dividers correctly", async ({ page }) => {
-    // Navigate to MenuDivider story
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-contextmenu--menu-divider",
-    );
-
-    const dividers = page.getByTestId("context-menu-divider");
-    const count = await dividers.count();
-
-    expect(count).toBeGreaterThan(0);
-
-    for (let i = 0; i < count; i++) {
-      await expect(dividers.nth(i)).toBeVisible();
-    }
-  });
-
-  test("shows all variants correctly", async ({ page }) => {
-    // Navigate to All Variants story
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-contextmenu--all-variants",
-    );
-
-    const menu = page.getByRole("listbox");
-    await expect(menu).toBeVisible();
-
-    const menuItems = page.getByRole("option");
-    const count = await menuItems.count();
-    expect(count).toBeGreaterThan(0);
-
-    // Check for sections
-    const sectionTitles = page.getByText(/Section/);
-    const sectionCount = await sectionTitles.count();
-    expect(sectionCount).toBeGreaterThan(0);
-
-    // Check for dividers
-    const dividers = page.getByTestId("context-menu-divider");
-    const dividerCount = await dividers.count();
-    expect(dividerCount).toBeGreaterThan(0);
-  });
-
-  test("handles keyboard navigation", async ({ page }) => {
-    const menuItems = page.getByRole("option");
-    const firstItem = menuItems.first();
-
-    await firstItem.focus();
-    await expect(firstItem).toBeFocused();
-
-    // Navigate with arrow keys
-    await page.keyboard.press("ArrowDown");
-    const secondItem = menuItems.nth(1);
-    await expect(secondItem).toBeFocused();
-  });
-
-  test("handles Enter key selection", async ({ page }) => {
-    const menuItems = page.getByRole("option");
-    const firstItem = menuItems.first();
-
-    await firstItem.focus();
-    await page.keyboard.press("Enter");
-
-    // Should handle the selection without error
-    await expect(firstItem).toBeVisible();
-  });
-
-  test("handles Space key selection", async ({ page }) => {
-    const menuItems = page.getByRole("option");
-    const firstItem = menuItems.first();
-
-    await firstItem.focus();
-    await page.keyboard.press(" ");
-
-    // Should handle the selection without error
-    await expect(firstItem).toBeVisible();
-  });
-
-  test("shows hover effects", async ({ page }) => {
-    const menuItems = page.getByRole("option");
-    const firstItem = menuItems.first();
-
-    await firstItem.hover();
-
-    // Check that hover styles are applied
-    const backgroundColor = await firstItem.evaluate((el) => {
-      const styles = window.getComputedStyle(el);
-      return styles.backgroundColor;
-    });
-
-    // Should have some background color change on hover
-    expect(backgroundColor).toBeDefined();
-  });
-
-  test("has correct styling for different sizes", async ({ page }) => {
-    // Navigate to All Variants story
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-contextmenu--all-variants",
-    );
-
-    const menuItems = page.getByRole("option");
-    const count = await menuItems.count();
-
-    for (let i = 0; i < count; i++) {
-      const item = menuItems.nth(i);
-      await expect(item).toBeVisible();
-
-      // Check that items have proper text styling
-      const fontSize = await item.evaluate((el) => {
-        const styles = window.getComputedStyle(el);
-        return styles.fontSize;
-      });
-
-      expect(fontSize).toBeDefined();
-    }
-  });
-
-  test("has proper ARIA attributes", async ({ page }) => {
-    const menu = page.getByRole("listbox");
-    await expect(menu).toBeVisible();
-
-    const menuItems = page.getByRole("option");
-    const count = await menuItems.count();
-
-    for (let i = 0; i < count; i++) {
-      const item = menuItems.nth(i);
-      const ariaSelected = await item.getAttribute("aria-selected");
-      expect(ariaSelected).toBeDefined();
-    }
-  });
-
-  test("handles disabled items correctly", async ({ page }) => {
-    // Navigate to All Variants story
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-contextmenu--all-variants",
-    );
-
-    const menuItems = page.getByRole("option");
-    const count = await menuItems.count();
-
-    // Check for disabled items
-    for (let i = 0; i < count; i++) {
-      const item = menuItems.nth(i);
-      const isDisabled = await item.isDisabled();
-
-      if (isDisabled) {
-        // Disabled items should not respond to clicks
-        await item.click();
-        // Should not cause any errors
-        await expect(item).toBeVisible();
-      }
-    }
-  });
-
-  test("has proper color contrast", async ({ page }) => {
-    const menuItems = page.getByRole("option");
-    const firstItem = menuItems.first();
-
-    const color = await firstItem.evaluate((el) => {
-      const styles = window.getComputedStyle(el);
-      return styles.color;
-    });
-
-    expect(color).toBeDefined();
-    expect(color).not.toBe("rgba(0, 0, 0, 0)"); // Should not be transparent
-  });
-
-  test("renders with custom styling", async ({ page }) => {
-    // Navigate to With Custom Styling story
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-contextmenu--with-custom-styling",
-    );
-
-    const menu = page.getByRole("listbox");
-    await expect(menu).toBeVisible();
-
-    // Check that custom styling is applied
-    const customClass = await menu.getAttribute("class");
-    expect(customClass).toContain("custom-menu");
-  });
-
-  test("handles interactive story correctly", async ({ page }) => {
-    // Navigate to Interactive story
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-contextmenu--interactive",
-    );
-
-    const menuItems = page.getByRole("option");
-    const count = await menuItems.count();
-
-    expect(count).toBeGreaterThan(0);
-
-    // Test interaction with different items
-    for (let i = 0; i < Math.min(count, 3); i++) {
-      const item = menuItems.nth(i);
-      await item.click();
-
-      // Should handle click without error
-      await expect(item).toBeVisible();
-    }
-  });
-});

tests/e2e/Input.storybook.test.ts

@@ -1,308 +0,0 @@
-import { expect, test } from "@playwright/test";
-
-test.describe("Input Component Storybook", () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--default");
-  });
-
-  test("renders default input correctly", async ({ page }) => {
-    const input = page.getByRole("textbox");
-    await expect(input).toBeVisible();
-    await expect(input).toHaveAttribute("type", "text");
-  });
-
-  test("renders with label", async ({ page }) => {
-    const label = page.getByText("Default Input");
-    await expect(label).toBeVisible();
-  });
-
-  test("renders with placeholder", async ({ page }) => {
-    const input = page.getByPlaceholder("Enter text...");
-    await expect(input).toBeVisible();
-  });
-
-  test("handles text input", async ({ page }) => {
-    const input = page.getByRole("textbox");
-    await input.fill("test input");
-    await expect(input).toHaveValue("test input");
-  });
-
-  test("handles focus and blur", async ({ page }) => {
-    const input = page.getByRole("textbox");
-
-    await input.focus();
-    await expect(input).toBeFocused();
-
-    await input.blur();
-    await expect(input).not.toBeFocused();
-  });
-
-  test("handles keyboard navigation", async ({ page }) => {
-    const input = page.getByRole("textbox");
-
-    await input.focus();
-    await expect(input).toBeFocused();
-
-    await input.press("Tab");
-    // Input should lose focus when tabbing away
-  });
-
-  test("handles different input types", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--interactive");
-
-    const input = page.getByRole("textbox");
-    await expect(input).toBeVisible();
-
-    // Test typing
-    await input.fill("test@example.com");
-    await expect(input).toHaveValue("test@example.com");
-  });
-});
-
-test.describe("Input Component - Size Variants", () => {
-  test("renders small size correctly", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--small");
-
-    const input = page.getByRole("textbox");
-    await expect(input).toBeVisible();
-
-    const label = page.getByText("Small Input");
-    await expect(label).toBeVisible();
-  });
-
-  test("renders medium size correctly", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--medium");
-
-    const input = page.getByRole("textbox");
-    await expect(input).toBeVisible();
-
-    const label = page.getByText("Medium Input");
-    await expect(label).toBeVisible();
-  });
-
-  test("renders large size correctly", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--large");
-
-    const input = page.getByRole("textbox");
-    await expect(input).toBeVisible();
-
-    const label = page.getByText("Large Input");
-    await expect(label).toBeVisible();
-  });
-});
-
-test.describe("Input Component - Label Variants", () => {
-  test("renders default label variant", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--default-label");
-
-    const input = page.getByRole("textbox");
-    await expect(input).toBeVisible();
-
-    const inputId = await input.getAttribute("id");
-    const label = page.locator(`label[for="${inputId}"]`);
-    await expect(label).toBeVisible();
-  });
-
-  test("renders horizontal label variant", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--horizontal-label");
-
-    const input = page.getByRole("textbox");
-    await expect(input).toBeVisible();
-
-    const inputId = await input.getAttribute("id");
-    const label = page.locator(`label[for="${inputId}"]`);
-    await expect(label).toBeVisible();
-  });
-});
-
-test.describe("Input Component - States", () => {
-  test("renders active state", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--active");
-
-    const input = page.getByRole("textbox");
-    await expect(input).toBeVisible();
-
-    const label = page.getByText("Active State");
-    await expect(label).toBeVisible();
-  });
-
-  test("renders hover state", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--hover");
-
-    const input = page.getByRole("textbox");
-    await expect(input).toBeVisible();
-
-    const label = page.getByText("Hover State");
-    await expect(label).toBeVisible();
-  });
-
-  test("renders focus state", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--focus");
-
-    const input = page.getByRole("textbox");
-    await expect(input).toBeVisible();
-
-    const label = page.getByText("Focus State");
-    await expect(label).toBeVisible();
-  });
-
-  test("renders error state", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--error");
-
-    const input = page.getByRole("textbox");
-    await expect(input).toBeVisible();
-
-    const label = page.getByText("Error State");
-    await expect(label).toBeVisible();
-  });
-
-  test("renders disabled state", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--disabled");
-
-    const input = page.getByRole("textbox");
-    await expect(input).toBeVisible();
-    await expect(input).toBeDisabled();
-
-    const label = page.getByText("Disabled State");
-    await expect(label).toBeVisible();
-  });
-});
-
-test.describe("Input Component - Comparison Stories", () => {
-  test("renders all sizes comparison", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--all-sizes");
-
-    // Check that all size variants are present
-    await expect(page.getByText("Small Size")).toBeVisible();
-    await expect(page.getByText("Medium Size")).toBeVisible();
-    await expect(page.getByText("Large Size")).toBeVisible();
-
-    // Check that inputs are present
-    const inputs = page.getByRole("textbox");
-    // Small horizontal story was removed; expect 5 inputs now
-    await expect(inputs).toHaveCount(5);
-  });
-
-  test("renders all states comparison", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--all-states");
-
-    // Check that all state variants are present
-    await expect(page.getByText("Default State")).toBeVisible();
-    await expect(page.getByText("Active State")).toBeVisible();
-    await expect(page.getByText("Hover State")).toBeVisible();
-    await expect(page.getByText("Focus State")).toBeVisible();
-    await expect(page.getByText("Error State")).toBeVisible();
-    await expect(page.getByText("Disabled State")).toBeVisible();
-
-    // Check that inputs are present
-    const inputs = page.getByRole("textbox");
-    await expect(inputs).toHaveCount(6);
-  });
-});
-
-test.describe("Input Component - Interactive Story", () => {
-  test("handles interactive input changes", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--interactive");
-
-    const input = page.getByRole("textbox");
-    await expect(input).toBeVisible();
-
-    // Test typing
-    await input.fill("Hello World");
-    await expect(input).toHaveValue("Hello World");
-
-    // Test clearing
-    await input.fill("");
-    await expect(input).toHaveValue("");
-
-    // Test typing again
-    await input.fill("New text");
-    await expect(input).toHaveValue("New text");
-  });
-
-  test("handles focus and blur in interactive story", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--interactive");
-
-    const input = page.getByRole("textbox");
-
-    await input.focus();
-    await expect(input).toBeFocused();
-
-    await input.blur();
-    await expect(input).not.toBeFocused();
-  });
-});
-
-test.describe("Input Component - Accessibility", () => {
-  test("has proper label association", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--default");
-
-    const input = page.getByRole("textbox");
-    const label = page.getByText("Default Input");
-
-    await expect(input).toBeVisible();
-    await expect(label).toBeVisible();
-
-    // Check that label is properly associated
-    const labelFor = await label.getAttribute("for");
-    const inputId = await input.getAttribute("id");
-    expect(labelFor).toBe(inputId);
-  });
-
-  test("supports keyboard navigation", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--interactive");
-
-    const input = page.getByRole("textbox");
-
-    // Focus with keyboard
-    await input.focus();
-    await expect(input).toBeFocused();
-
-    // Type with keyboard
-    await input.press("a");
-    await expect(input).toHaveValue("a");
-
-    await input.press("b");
-    await expect(input).toHaveValue("ab");
-  });
-
-  test("handles disabled state accessibility", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--disabled");
-
-    const input = page.getByRole("textbox");
-    await expect(input).toBeDisabled();
-
-    // Verify that filling is not allowed by asserting it remains empty without attempting to fill
-    await expect(input).toHaveValue("");
-  });
-});
-
-test.describe("Input Component - Form Integration", () => {
-  test("works within form context", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--interactive");
-
-    const input = page.getByRole("textbox");
-
-    // Test form-like behavior
-    await input.fill("form value");
-    await expect(input).toHaveValue("form value");
-
-    // Test clearing
-    await input.clear();
-    await expect(input).toHaveValue("");
-  });
-
-  test("handles different input types", async ({ page }) => {
-    await page.goto("/iframe.html?id=forms-input--interactive");
-
-    const input = page.getByRole("textbox");
-
-    // Test different input patterns
-    await input.fill("test@example.com");
-    await expect(input).toHaveValue("test@example.com");
-
-    await input.clear();
-    await input.fill("12345");
-    await expect(input).toHaveValue("12345");
-  });
-});

tests/e2e/Select.storybook.test.ts

@@ -1,280 +0,0 @@
-import { test, expect } from "@playwright/test";
-
-test.describe("Select Component Storybook Tests", () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto("http://localhost:6006/?path=/story/forms-select--default");
-  });
-
-  test("renders default select component", async ({ page }) => {
-    const selectButton = page.getByRole("button", { name: /select/i });
-    await expect(selectButton).toBeVisible();
-
-    const label = page.getByText("Test Select");
-    await expect(label).toBeVisible();
-  });
-
-  test("opens dropdown when clicked", async ({ page }) => {
-    const selectButton = page.getByRole("button", { name: /select/i });
-    await selectButton.click();
-
-    // Wait for dropdown to appear
-    await expect(page.getByRole("listbox")).toBeVisible();
-    await expect(page.getByText("Option 1")).toBeVisible();
-    await expect(page.getByText("Option 2")).toBeVisible();
-    await expect(page.getByText("Option 3")).toBeVisible();
-  });
-
-  test("selects option when clicked", async ({ page }) => {
-    const selectButton = page.getByRole("button", { name: /select/i });
-    await selectButton.click();
-
-    await expect(page.getByRole("listbox")).toBeVisible();
-
-    await page.getByText("Option 1").click();
-
-    // Check that the selected value is displayed
-    await expect(selectButton).toContainText("Option 1");
-
-    // Check that dropdown is closed
-    await expect(page.getByRole("listbox")).not.toBeVisible();
-  });
-
-  test("closes dropdown when clicking outside", async ({ page }) => {
-    const selectButton = page.getByRole("button", { name: /select/i });
-    await selectButton.click();
-
-    await expect(page.getByRole("listbox")).toBeVisible();
-
-    // Click outside the dropdown
-    await page.click("body", { position: { x: 10, y: 10 } });
-
-    await expect(page.getByRole("listbox")).not.toBeVisible();
-  });
-
-  test("handles keyboard navigation", async ({ page }) => {
-    const selectButton = page.getByRole("button", { name: /select/i });
-    await selectButton.focus();
-
-    // Open with Enter key
-    await page.keyboard.press("Enter");
-    await expect(page.getByRole("listbox")).toBeVisible();
-
-    // Close with Escape key
-    await page.keyboard.press("Escape");
-    await expect(page.getByRole("listbox")).not.toBeVisible();
-
-    // Open with Space key
-    await page.keyboard.press(" ");
-    await expect(page.getByRole("listbox")).toBeVisible();
-  });
-
-  test("shows different sizes correctly", async ({ page }) => {
-    // Navigate to All Sizes story
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-select--all-sizes",
-    );
-
-    const selectButtons = page.getByRole("button");
-    const count = await selectButtons.count();
-
-    // Should have multiple select components
-    expect(count).toBeGreaterThan(1);
-
-    // Test that all sizes are visible
-    for (let i = 0; i < count; i++) {
-      await expect(selectButtons.nth(i)).toBeVisible();
-    }
-  });
-
-  test("shows different states correctly", async ({ page }) => {
-    // Navigate to All States story
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-select--all-states",
-    );
-
-    const selectButtons = page.getByRole("button");
-    const count = await selectButtons.count();
-
-    // Should have multiple select components in different states
-    expect(count).toBeGreaterThan(1);
-
-    // Test that all states are visible
-    for (let i = 0; i < count; i++) {
-      await expect(selectButtons.nth(i)).toBeVisible();
-    }
-  });
-
-  test("hover state shows correct styling", async ({ page }) => {
-    // Navigate to Hover story
-    await page.goto("http://localhost:6006/?path=/story/forms-select--hover");
-
-    const selectButton = page.getByRole("button");
-    await expect(selectButton).toBeVisible();
-
-    // Check that hover state is applied (shadow effect)
-    const boxShadow = await selectButton.evaluate((el) => {
-      const styles = window.getComputedStyle(el);
-      return styles.boxShadow;
-    });
-
-    expect(boxShadow).toContain("2px");
-  });
-
-  test("focus state shows correct styling", async ({ page }) => {
-    // Navigate to Focus story
-    await page.goto("http://localhost:6006/?path=/story/forms-select--focus");
-
-    const selectButton = page.getByRole("button");
-    await expect(selectButton).toBeVisible();
-
-    // Check that focus state is applied (blue border and shadow)
-    const borderColor = await selectButton.evaluate((el) => {
-      const styles = window.getComputedStyle(el);
-      return styles.borderColor;
-    });
-
-    const boxShadow = await selectButton.evaluate((el) => {
-      const styles = window.getComputedStyle(el);
-      return styles.boxShadow;
-    });
-
-    expect(boxShadow).toContain("3px");
-  });
-
-  test("error state shows correct styling", async ({ page }) => {
-    // Navigate to Error story
-    await page.goto("http://localhost:6006/?path=/story/forms-select--error");
-
-    const selectButton = page.getByRole("button");
-    await expect(selectButton).toBeVisible();
-
-    // Check that error state is applied (red border)
-    const borderColor = await selectButton.evaluate((el) => {
-      const styles = window.getComputedStyle(el);
-      return styles.borderColor;
-    });
-
-    expect(borderColor).toContain("rgb");
-  });
-
-  test("disabled state prevents interaction", async ({ page }) => {
-    // Navigate to Disabled story
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-select--disabled",
-    );
-
-    const selectButton = page.getByRole("button");
-    await expect(selectButton).toBeVisible();
-    await expect(selectButton).toBeDisabled();
-
-    // Try to click disabled select
-    await selectButton.click();
-
-    // Dropdown should not open
-    await expect(page.getByRole("listbox")).not.toBeVisible();
-  });
-
-  test("interactive story allows selection", async ({ page }) => {
-    // Navigate to Interactive story
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-select--interactive",
-    );
-
-    const selectButton = page.getByRole("button");
-    await selectButton.click();
-
-    await expect(page.getByRole("listbox")).toBeVisible();
-
-    // Select an option
-    await page.getByText("Option 1").click();
-
-    // Check that selection is reflected
-    await expect(selectButton).toContainText("Option 1");
-  });
-
-  test("horizontal label variant displays correctly", async ({ page }) => {
-    // Navigate to Horizontal Label story
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-select--horizontal-label",
-    );
-
-    const selectButton = page.getByRole("button");
-    await expect(selectButton).toBeVisible();
-
-    const label = page.getByText("Test Select");
-    await expect(label).toBeVisible();
-
-    // Check that label and select are in horizontal layout
-    const labelBox = await label.boundingBox();
-    const selectBox = await selectButton.boundingBox();
-
-    expect(labelBox?.y).toBeCloseTo(selectBox?.y || 0, 5);
-  });
-
-  test("small size has correct height", async ({ page }) => {
-    // Navigate to Small story
-    await page.goto("http://localhost:6006/?path=/story/forms-select--small");
-
-    const selectButton = page.getByRole("button");
-    await expect(selectButton).toBeVisible();
-
-    const height = await selectButton.evaluate((el) => {
-      const styles = window.getComputedStyle(el);
-      return styles.height;
-    });
-
-    expect(height).toBe("30px");
-  });
-
-  test("medium size has correct height", async ({ page }) => {
-    // Navigate to Medium story
-    await page.goto("http://localhost:6006/?path=/story/forms-select--medium");
-
-    const selectButton = page.getByRole("button");
-    await expect(selectButton).toBeVisible();
-
-    const height = await selectButton.evaluate((el) => {
-      const styles = window.getComputedStyle(el);
-      return styles.height;
-    });
-
-    expect(height).toBe("36px");
-  });
-
-  test("large size has correct height", async ({ page }) => {
-    // Navigate to Large story
-    await page.goto("http://localhost:6006/?path=/story/forms-select--large");
-
-    const selectButton = page.getByRole("button");
-    await expect(selectButton).toBeVisible();
-
-    const height = await selectButton.evaluate((el) => {
-      const styles = window.getComputedStyle(el);
-      return styles.height;
-    });
-
-    expect(height).toBe("40px");
-  });
-
-  test("focus behavior works correctly", async ({ page }) => {
-    // Navigate to Interactive story
-    await page.goto(
-      "http://localhost:6006/?path=/story/forms-select--interactive",
-    );
-
-    const selectButton = page.getByRole("button");
-
-    // Tab to focus the select
-    await page.keyboard.press("Tab");
-    await expect(selectButton).toBeFocused();
-
-    // Check that focus-visible styles are applied
-    const boxShadow = await selectButton.evaluate((el) => {
-      const styles = window.getComputedStyle(el);
-      return styles.boxShadow;
-    });
-
-    // Should have focus indicator
-    expect(boxShadow).toContain("3px");
-  });
-});

tests/storybook/RadioButton.interactions.test.js

@@ -13,9 +13,10 @@ export const DefaultInteraction = {
     await userEvent.click(radioButton);
     await expect(radioButton).toHaveAttribute("aria-checked", "true");
 
-    // Click to uncheck
+    // Radio buttons can't be unchecked by clicking them again
+    // They stay checked until another radio button in the same group is selected
     await userEvent.click(radioButton);
-    await expect(radioButton).toHaveAttribute("aria-checked", "false");
+    await expect(radioButton).toHaveAttribute("aria-checked", "true");
   },
 };
 
@@ -27,11 +28,8 @@ export const CheckedInteraction = {
     // Should be checked initially
     await expect(radioButton).toHaveAttribute("aria-checked", "true");
 
-    // Click to uncheck
-    await userEvent.click(radioButton);
-    await expect(radioButton).toHaveAttribute("aria-checked", "false");
-
-    // Click to check again
+    // Radio buttons can't be unchecked by clicking them again
+    // They stay checked until another radio button in the same group is selected
     await userEvent.click(radioButton);
     await expect(radioButton).toHaveAttribute("aria-checked", "true");
   },

tests/storybook/RadioGroup.interactions.test.js

@@ -71,18 +71,18 @@ export const InteractiveInteraction = {
     const radioButtons = canvas.getAllByRole("radio");
 
     // Should have radiogroup role
-    expect(radioGroup).toBeInTheDocument();
+    await expect(radioGroup).toBeInTheDocument();
 
     // Should show initial state
-    expect(canvas.getByText("Selected: option1")).toBeVisible();
+    await expect(canvas.getByText("Selected: option1")).toBeVisible();
 
     // Click second option
-    userEvent.click(radioButtons[1]);
-    expect(canvas.getByText("Selected: option2")).toBeVisible();
+    await userEvent.click(radioButtons[1]);
+    await expect(canvas.getByText("Selected: option2")).toBeVisible();
 
     // Click third option
-    userEvent.click(radioButtons[2]);
-    expect(canvas.getByText("Selected: option3")).toBeVisible();
+    await userEvent.click(radioButtons[2]);
+    await expect(canvas.getByText("Selected: option3")).toBeVisible();
   },
 };
 

tests/unit/Input.test.jsx

@@ -123,7 +123,7 @@ describe("Input Component", () => {
     render(<Input error={true} />);
     const input = screen.getByRole("textbox");
     expect(input).toHaveClass(
-      "border-[var(--color-border-default-utility-negative)]"
+      "border-[var(--color-border-default-utility-negative)]",
     );
   });
 
@@ -138,7 +138,7 @@ describe("Input Component", () => {
     render(<Input state="focus" />);
     const input = screen.getByRole("textbox");
     expect(input).toHaveClass(
-      "border-[var(--color-border-default-utility-info)]"
+      "border-[var(--color-border-default-utility-info)]",
     );
     expect(input).toHaveClass("shadow-[0_0_5px_3px_#3281F8]");
   });
@@ -148,7 +148,7 @@ describe("Input Component", () => {
     const input = screen.getByRole("textbox");
     expect(input).toHaveClass("border-[var(--color-border-default-tertiary)]");
     expect(input).toHaveClass(
-      "shadow-[0_0_0_2px_var(--color-border-default-tertiary)]"
+      "shadow-[0_0_0_2px_var(--color-border-default-tertiary)]",
     );
   });
 
@@ -163,7 +163,7 @@ describe("Input Component", () => {
     const input = screen.getByRole("textbox");
     expect(input).toHaveClass("border-[var(--color-border-default-tertiary)]");
     expect(input).toHaveClass(
-      "hover:shadow-[0_0_0_2px_var(--color-border-default-tertiary)]"
+      "hover:shadow-[0_0_0_2px_var(--color-border-default-tertiary)]",
     );
   });