+ Context Menu Examples
+
+
+
+ Context Menu Demo
+
+
+
+ Context Menu Item
+ Context Menu Item
+ Context Menu Item
+ Context Menu Item
+ Context Menu Item
+ Context Menu Item
+
+ Context Menu Item
+ Context Menu Item
+
+
+ Context Menu Item
+ Context Menu Item
+ Context Menu Item
+ Context Menu Item
+ Context Menu Item
+ Context Menu Item
+
+ Context Menu Item
+ Context Menu Item
+
+
+);
+
+export const Default = Template.bind({});
+
+export const WithCustomStyling = Template.bind({});
+WithCustomStyling.args = {
+ className: "min-w-[250px]",
+};
+
+// Individual component stories
+export const MenuItem = () => (
+
+ Default Menu Item
+ Selected Menu Item
+ Menu Item with Submenu
+ Disabled Menu Item
+
+);
+
+export const MenuSection = () => (
+
+
+ Item 1
+ Item 2
+
+
+ Item 3
+ Item 4
+
+
+);
+
+export const MenuDivider = () => (
+
+ Item Above
+ Item Below
+
+);
+
+export const Interactive = () => {
+ const [selectedItem, setSelectedItem] = useState("");
+
+ return (
+
+ setSelectedItem("item1")}
+ >
+ Context Menu Item 1
+
+ setSelectedItem("item2")}
+ >
+ Context Menu Item 2
+
+ setSelectedItem("item3")}
+ >
+ Context Menu Item 3
+
+
+ );
+};
+
+// Comparison stories
+export const AllVariants = () => (
+
+
+
Default Items
+
+ Context Menu Item
+ Context Menu Item
+
+
+
+
+
With Submenu Indicators
+
+ Context Menu Item
+ Context Menu Item
+
+
+
+
+
With Selected Item
+
+ Context Menu Item
+ Context Menu Item
+ Context Menu Item
+
+
+
+
+
With Sections
+
+
+ Context Menu Item
+ Context Menu Item
+
+
+
+
setValue(e.target.value)}>
+ Context Menu Item 1
+ Context Menu Item 2
+ Context Menu Item 3
+
+ );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+ label: "Default Select",
+ placeholder: "Select",
+};
+
+export const Small = Template.bind({});
+Small.args = {
+ label: "Small Select",
+ size: "small",
+ placeholder: "Select",
+};
+
+export const Medium = Template.bind({});
+Medium.args = {
+ label: "Medium Select",
+ size: "medium",
+ placeholder: "Select",
+};
+
+export const Large = Template.bind({});
+Large.args = {
+ label: "Large Select",
+ size: "large",
+ placeholder: "Select",
+};
+
+export const DefaultLabel = Template.bind({});
+DefaultLabel.args = {
+ label: "Default (Top Label)",
+ labelVariant: "default",
+ placeholder: "Select",
+};
+
+export const HorizontalLabel = Template.bind({});
+HorizontalLabel.args = {
+ label: "Horizontal (Left Label)",
+ labelVariant: "horizontal",
+ placeholder: "Select",
+};
+
+export const Active = Template.bind({});
+Active.args = {
+ label: "Active State",
+ state: "default",
+ placeholder: "Select",
+};
+
+export const Hover = Template.bind({});
+Hover.args = {
+ label: "Hover State",
+ state: "hover",
+ placeholder: "Select",
+};
+
+export const Focus = Template.bind({});
+Focus.args = {
+ label: "Focus State",
+ state: "focus",
+ placeholder: "Select",
+};
+
+export const Error = Template.bind({});
+Error.args = {
+ label: "Error State",
+ error: true,
+ placeholder: "Select",
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+ label: "Disabled State",
+ disabled: true,
+ placeholder: "Select",
+};
+
+export const Interactive = Template.bind({});
+Interactive.args = {
+ label: "Interactive Select",
+ placeholder: "Choose an option",
+};
+
+// Comparison stories
+export const AllSizes = () => {
+ const [smallValue, setSmallValue] = useState("");
+ const [mediumValue, setMediumValue] = useState("");
+ const [largeValue, setLargeValue] = useState("");
+
+ return (
+
+ setSmallValue(e.target.value)}
+ placeholder="Select"
+ >
+ Context Menu Item 1
+ Context Menu Item 2
+ Context Menu Item 3
+
+ setMediumValue(e.target.value)}
+ placeholder="Select"
+ >
+ Context Menu Item 1
+ Context Menu Item 2
+ Context Menu Item 3
+
+ setLargeValue(e.target.value)}
+ placeholder="Select"
+ >
+ Context Menu Item 1
+ Context Menu Item 2
+ Context Menu Item 3
+
+
+ );
+};
+
+export const AllStates = () => {
+ const [defaultValue, setDefaultValue] = useState("");
+ const [errorValue, setErrorValue] = useState("");
+ const [disabledValue, setDisabledValue] = useState("");
+
+ return (
+
+ setDefaultValue(e.target.value)}
+ placeholder="Select"
+ >
+ Context Menu Item 1
+ Context Menu Item 2
+ Context Menu Item 3
+
+ setErrorValue(e.target.value)}
+ placeholder="Select"
+ >
+ Context Menu Item 1
+ Context Menu Item 2
+ Context Menu Item 3
+
+ setDisabledValue(e.target.value)}
+ placeholder="Select"
+ >
+ Context Menu Item 1
+ Context Menu Item 2
+ Context Menu Item 3
+
+
+ );
+};
diff --git a/tests/accessibility/ContextMenu.a11y.test.jsx b/tests/accessibility/ContextMenu.a11y.test.jsx
new file mode 100644
index 0000000..f0ea17a
--- /dev/null
+++ b/tests/accessibility/ContextMenu.a11y.test.jsx
@@ -0,0 +1,399 @@
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { expect, test, describe, it, vi } from "vitest";
+import { axe, toHaveNoViolations } from "jest-axe";
+import ContextMenu from "../../app/components/ContextMenu";
+import ContextMenuItem from "../../app/components/ContextMenuItem";
+import ContextMenuSection from "../../app/components/ContextMenuSection";
+import ContextMenuDivider from "../../app/components/ContextMenuDivider";
+
+expect.extend(toHaveNoViolations);
+
+describe("ContextMenu Components Accessibility", () => {
+ describe("ContextMenu Accessibility", () => {
+ it("has no accessibility violations", async () => {
+ const { container } = render(
+
+ Item 1
+ Item 2
+
+ );
+ const results = await axe(container);
+ expect(results).toHaveNoViolations();
+ });
+
+ it("has proper role and structure", () => {
+ render(
+
+ Item 1
+ Item 2
+
+ );
+
+ const menu = screen.getByRole("menu");
+ expect(menu).toBeInTheDocument();
+
+ const items = screen.getAllByRole("menuitem");
+ expect(items).toHaveLength(2);
+ });
+
+ it("has proper focus management", async () => {
+ const user = userEvent.setup();
+ render(
+
+ Item 1
+ Item 2
+
+ );
+
+ const firstItem = screen.getByRole("menuitem", { name: "Item 1" });
+ expect(firstItem).toHaveAttribute("tabIndex", "0");
+ expect(firstItem).toBeInTheDocument();
+ });
+ });
+
+ describe("ContextMenuItem Accessibility", () => {
+ it("has no accessibility violations", async () => {
+ const { container } = render(
+
+ Test Item
+
+ );
+ const results = await axe(container);
+ expect(results).toHaveNoViolations();
+ });
+
+ it("has proper ARIA attributes", () => {
+ render(
+
+ Test Item
+
+ );
+
+ const item = screen.getByRole("menuitem");
+ expect(item).not.toHaveAttribute("aria-current");
+ });
+
+ it("updates aria-current when selected", () => {
+ render(
+
+
+ Test Item
+
+
+ );
+
+ const item = screen.getByRole("menuitem");
+ expect(item).toHaveAttribute("aria-current", "true");
+ });
+
+ it("is keyboard accessible", async () => {
+ const user = userEvent.setup();
+ const onClick = vi.fn();
+ render(
+
+ Test Item
+
+ );
+
+ const item = screen.getByRole("menuitem");
+ item.focus();
+
+ await user.keyboard("{Enter}");
+ expect(onClick).toHaveBeenCalled();
+ });
+
+ it("is accessible with Space key", async () => {
+ const user = userEvent.setup();
+ const onClick = vi.fn();
+ render(
+
+ Test Item
+
+ );
+
+ const item = screen.getByRole("menuitem");
+ item.focus();
+
+ await user.keyboard(" ");
+ expect(onClick).toHaveBeenCalled();
+ });
+
+ it("has proper focus indicators", () => {
+ render(
+
+ Test Item
+
+ );
+
+ const item = screen.getByRole("menuitem");
+ expect(item).toHaveClass(
+ "hover:!bg-[var(--color-surface-default-secondary)]"
+ );
+ });
+
+ it("announces selection state to screen readers", () => {
+ render(
+
+
+ Test Item
+
+
+ );
+
+ const item = screen.getByRole("menuitem");
+ expect(item).toHaveAttribute("aria-current", "true");
+ });
+ });
+
+ describe("ContextMenuSection Accessibility", () => {
+ it("has no accessibility violations", async () => {
+ const { container } = render(
+
+
+ Item 1
+
+
+ );
+ const results = await axe(container);
+ expect(results).toHaveNoViolations();
+ });
+
+ it("has proper heading structure", () => {
+ render(
+
+
+ Item 1
+
+
+ );
+
+ const title = screen.getByText("Test Section");
+ expect(title).toBeInTheDocument();
+ });
+
+ it("has sufficient color contrast for section title", () => {
+ render(
+
+
+ Item 1
+
+
+ );
+
+ const title = screen.getByText("Test Section");
+ expect(title).toHaveClass("text-[var(--color-content-default-primary)]");
+ });
+ });
+
+ describe("ContextMenuDivider Accessibility", () => {
+ it("has no accessibility violations", async () => {
+ const { container } = render(
+
+ Item 1
+
+ Item 2
+
+
+
+
+ Item 3
+
+
+
+ );
+
+ it("has no accessibility violations when integrated", async () => {
+ const { container } = render(
+ Item 1
+ Item 2
+
+ );
+
+ const items = screen.getAllByRole("menuitem");
+ items[0].focus();
+
+ await user.keyboard("{Enter}");
+ expect(onClick).toHaveBeenCalled();
+ });
+ });
+
+ describe("Color Contrast", () => {
+ it("has sufficient contrast for menu items", () => {
+ render(
+
+ Test Item
+
+ );
+
+ const item = screen.getByRole("menuitem");
+ expect(item).toHaveClass(
+ "text-[var(--color-content-default-brand-primary)]"
+ );
+ });
+
+ it("has sufficient contrast for section titles", () => {
+ render(
+
+
+ );
+
+ const title = screen.getByText("Test Section");
+ expect(title).toHaveClass("text-[var(--color-content-default-primary)]");
+ });
+
+ it("has sufficient contrast for dividers", () => {
+ render(
+
+
+ );
+
+ const divider = screen.getByRole("separator");
+ expect(divider).toHaveClass(
+ "border-[var(--color-border-default-tertiary)]"
+ );
+ });
+ });
+
+ describe("Screen Reader Support", () => {
+ it("announces menu structure correctly", () => {
+ render(
+
+
+ Item 1
+
+ Item 2
+
+
+
+ );
+
+ const menu = screen.getByRole("menu");
+ expect(menu).toBeInTheDocument();
+
+ const items = screen.getAllByRole("menuitem");
+ expect(items[0]).not.toHaveAttribute("aria-current");
+ expect(items[1]).toHaveAttribute("aria-current", "true");
+ });
+
+ it("announces selection state changes", async () => {
+ const user = userEvent.setup();
+ const { rerender } = render(
+
+ Test Item
+
+ );
+
+ const item = screen.getByRole("menuitem");
+ expect(item).not.toHaveAttribute("aria-current");
+
+ rerender(
+
+ Test Item
+
+ );
+
+ expect(item).toHaveAttribute("aria-current", "true");
+ });
+ });
+
+ describe("WCAG Compliance", () => {
+ it("meets WCAG 2.1 AA standards", async () => {
+ const { container } = render(
+
+
+ Item 1
+
+ Item 2
+
+
+ Item 3
+
+ );
+ const results = await axe(container);
+ expect(results).toHaveNoViolations();
+ });
+
+ it("meets WCAG standards in all states", async () => {
+ const { container } = render(
+
+
+ Selected Item
+
+
+ Submenu Item
+
+
+ Disabled Item
+
+
+ );
+ const results = await axe(container);
+ expect(results).toHaveNoViolations();
+ });
+ });
+});
diff --git a/tests/accessibility/Select.a11y.test.jsx b/tests/accessibility/Select.a11y.test.jsx
new file mode 100644
index 0000000..27dcbc6
--- /dev/null
+++ b/tests/accessibility/Select.a11y.test.jsx
@@ -0,0 +1,305 @@
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { expect, test, describe, it, vi } from "vitest";
+import { axe, toHaveNoViolations } from "jest-axe";
+import Select from "../../app/components/Select";
+
+expect.extend(toHaveNoViolations);
+
+describe("Select Component Accessibility", () => {
+ const defaultProps = {
+ label: "Test Select",
+ placeholder: "Select an option",
+ options: [
+ { value: "option1", label: "Option 1" },
+ { value: "option2", label: "Option 2" },
+ { value: "option3", label: "Option 3" },
+ ],
+ };
+
+ describe("ARIA Attributes", () => {
+ it("has correct initial ARIA attributes", () => {
+ render(
+
+ onItemClick("action1")}
+ selected={selectedValue === "action1"}
+ >
+ Action 1
+
+ onItemClick("action2")}
+ selected={selectedValue === "action2"}
+ >
+ Action 2
+
+
+
+ onItemClick("setting1")}
+ hasSubmenu={true}
+ >
+ Setting 1
+
+ onItemClick("setting2")}
+ disabled={true}
+ >
+ Setting 2
+
+
+
+ );
+
+ describe("Menu Interaction", () => {
+ it("handles item selection correctly", async () => {
+ const user = userEvent.setup();
+ const onItemClick = vi.fn();
+ render(
+ {items.map((item, index) => (
+ onItemClick(item.id)}
+ selected={selectedValue === item.id}
+ disabled={item.disabled}
+ >
+ {item.label}
+
+ ))}
+
+ );
+
+ it("handles dynamic item updates", async () => {
+ const user = userEvent.setup();
+ const onItemClick = vi.fn();
+ const { rerender } = render(
+
+ setIsOpen(!isOpen)}>
+ {isOpen ? "Close Menu" : "Open Menu"}
+
+ {isOpen && (
+
+ {
+ setSelectedValue("option1");
+ setIsOpen(false);
+ }}
+ selected={selectedValue === "option1"}
+ >
+ Option 1
+
+ {
+ setSelectedValue("option2");
+ setIsOpen(false);
+ }}
+ selected={selectedValue === "option2"}
+ >
+ Option 2
+
+
+ )}
+
+ );
+ };
+
+ it("manages menu open/close state", async () => {
+ const user = userEvent.setup();
+ render(
+ {largeItems.map((item) => (
+
+ {item.label}
+
+ ))}
+
+ );
+
+ render(
+
+ Item 1
+
+
+ Item 2
+
+
+ );
+
+ // Rapidly change selection state
+ for (let i = 0; i < 10; i++) {
+ rerender(
+
+
+ Item 1
+
+
+ Item 2
+
+
+ );
+ }
+
+ // Should still be functional
+ const items = screen.getAllByRole("menuitem");
+ expect(items).toHaveLength(2);
+ });
+ });
+
+ describe("Error Handling", () => {
+ it("handles missing onClick gracefully", () => {
+ render(
+
+ Item without onClick
+
+ );
+
+ const item = screen.getByText("Item without onClick");
+ expect(item).toBeInTheDocument();
+ });
+
+ it("handles invalid props gracefully", () => {
+ render(
+
+
+ Item with invalid selected
+
+
+ );
+
+ const item = screen.getByText("Item with invalid selected");
+ expect(item).toBeInTheDocument();
+ });
+ });
+});
diff --git a/tests/integration/Input.integration.test.jsx b/tests/integration/Input.integration.test.jsx
index 0abc228..790960b 100644
--- a/tests/integration/Input.integration.test.jsx
+++ b/tests/integration/Input.integration.test.jsx
@@ -285,9 +285,9 @@ describe("Input Component Integration", () => {
// Set hover state
fireEvent.click(hoverButton);
- expect(input).toHaveClass("border-2");
+ expect(input).toHaveClass("border-[var(--color-border-default-tertiary)]");
expect(input).toHaveClass(
- "border-[var(--color-border-default-brand-primary)]"
+ "shadow-[0_0_0_2px_var(--color-border-default-tertiary)]"
);
// Set active state
diff --git a/tests/integration/Select.integration.test.jsx b/tests/integration/Select.integration.test.jsx
new file mode 100644
index 0000000..3bc904f
--- /dev/null
+++ b/tests/integration/Select.integration.test.jsx
@@ -0,0 +1,407 @@
+import React, { useState } from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { expect, test, describe, it, vi } from "vitest";
+import Select from "../../app/components/Select";
+
+describe("Select Component Integration", () => {
+ const TestForm = ({ initialValue = "" }) => {
+ const [value, setValue] = useState(initialValue);
+ const [errors, setErrors] = useState({});
+
+ const handleChange = (newValue) => {
+ setValue(newValue);
+ if (errors.select) {
+ setErrors({ ...errors, select: null });
+ }
+ };
+
+ const handleSubmit = (e) => {
+ e.preventDefault();
+ if (!value) {
+ setErrors({ select: "Please select an option" });
+ }
+ };
+
+ return (
+
+ );
+ };
+
+ describe("Form Integration", () => {
+ it("integrates with form submission", async () => {
+ const user = userEvent.setup();
+ render(
+
+ );
+ };
+
+ it("handles multiple select components independently", async () => {
+ const user = userEvent.setup();
+ render(
+ setValues({ ...values, select1: value })}
+ options={[{ value: "a1", label: "A1" }]}
+ />
+ setValues({ ...values, select2: value })}
+ options={[{ value: "b1", label: "B1" }]}
+ />
+
+ );
+ };
+
+ it("handles keyboard navigation between inputs and selects", async () => {
+ const user = userEvent.setup();
+ render(
+ Menu Item
+
+ );
+ const results = await axe(container);
+ expect(results).toHaveNoViolations();
+ });
+
+ it("has proper role", () => {
+ render(
+
+ );
+ const results = await axe(container);
+ expect(results).toHaveNoViolations();
+ });
+
+ it("has proper role", () => {
+ render(Section Content );
+
+ expect(screen.getByText("Section Content")).toBeInTheDocument();
+ expect(screen.queryByText("Section Title")).not.toBeInTheDocument();
+ });
+
+ it("applies correct title styling", () => {
+ render(
+
+ Item 1
+
+ Item 2
+
+
+
+
+ Item 3
+
+
+
+ );
+
+ it("renders all components together", () => {
+ render(