@etus/ui 0.1.0

package/src/components/forms/NativeSelect/NativeSelect.test.tsx

@@ -0,0 +1,856 @@
+// NativeSelect/NativeSelect.test.tsx
+import { fireEvent, render, screen, within } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { axe, toHaveNoViolations } from "jest-axe"
+import { GlobeIcon, MapPinIcon } from "lucide-react"
+import { describe, expect, it, vi } from "vitest"
+
+import { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from "./NativeSelect"
+
+expect.extend(toHaveNoViolations)
+
+// ============================================
+// RENDERING TESTS
+// ============================================
+describe("NativeSelect", () => {
+  describe("Rendering", () => {
+    it("renders correctly", () => {
+      render(
+        <NativeSelect data-testid="select">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toBeInTheDocument()
+    })
+
+    it("renders options correctly", () => {
+      render(
+        <NativeSelect data-testid="select">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+          <NativeSelectOption value="2">Option 2</NativeSelectOption>
+          <NativeSelectOption value="3">Option 3</NativeSelectOption>
+        </NativeSelect>
+      )
+      const select = screen.getByTestId("select")
+      const options = within(select).getAllByRole("option")
+      expect(options).toHaveLength(3)
+    })
+
+    it("renders with custom className", () => {
+      render(
+        <NativeSelect className="custom-class" data-testid="select">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toHaveClass("custom-class")
+    })
+
+    it("has data-slot attribute", () => {
+      render(
+        <NativeSelect data-testid="select">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toHaveAttribute("data-slot", "native-select")
+    })
+
+    it("renders with default value", () => {
+      render(
+        <NativeSelect data-testid="select" defaultValue="2">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+          <NativeSelectOption value="2">Option 2</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toHaveValue("2")
+    })
+
+    it("renders with controlled value", () => {
+      render(
+        <NativeSelect data-testid="select" value="2" onChange={() => {}}>
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+          <NativeSelectOption value="2">Option 2</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toHaveValue("2")
+    })
+
+    it("passes through data-* attributes", () => {
+      render(
+        <NativeSelect data-custom="value" data-testid="test-select">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("test-select")).toHaveAttribute("data-custom", "value")
+    })
+
+    it("renders wrapper with data-slot attribute", () => {
+      const { container } = render(
+        <NativeSelect data-testid="select">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      const wrapper = container.querySelector('[data-slot="native-select-wrapper"]')
+      expect(wrapper).toBeInTheDocument()
+    })
+
+    it("renders chevron icon", () => {
+      const { container } = render(
+        <NativeSelect data-testid="select">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      const icon = container.querySelector('[data-slot="native-select-icon"]')
+      expect(icon).toBeInTheDocument()
+      expect(icon).toHaveAttribute("aria-hidden", "true")
+    })
+  })
+
+  // ============================================
+  // PROPS TESTS
+  // ============================================
+  describe("Props", () => {
+    it("renders placeholder as first empty option", () => {
+      render(
+        <NativeSelect data-testid="select">
+          <NativeSelectOption disabled value="">Select an option</NativeSelectOption>
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      const options = screen.getAllByRole("option")
+      expect(options[0]).toHaveTextContent("Select an option")
+      expect(options[0]).toBeDisabled()
+    })
+
+    it("supports multiple selection", () => {
+      render(
+        <NativeSelect multiple data-testid="select">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+          <NativeSelectOption value="2">Option 2</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toHaveAttribute("multiple")
+    })
+
+    it("has correct name attribute", () => {
+      render(
+        <NativeSelect data-testid="select" name="country">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toHaveAttribute("name", "country")
+    })
+
+    it("has correct id attribute", () => {
+      render(
+        <NativeSelect data-testid="select" id="country-select">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toHaveAttribute("id", "country-select")
+    })
+  })
+
+  // ============================================
+  // STATE TESTS
+  // ============================================
+  describe("States", () => {
+    it("handles disabled state", () => {
+      render(
+        <NativeSelect disabled data-testid="select">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toBeDisabled()
+    })
+
+    it("handles required state", () => {
+      render(
+        <NativeSelect required data-testid="select">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toBeRequired()
+    })
+
+    it("handles aria-invalid state", () => {
+      render(
+        <NativeSelect aria-invalid="true" data-testid="select">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toHaveAttribute("aria-invalid", "true")
+    })
+
+    it("applies aria-invalid styling", () => {
+      render(
+        <NativeSelect aria-invalid="true" data-testid="select">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toHaveClass("aria-invalid:border-destructive")
+    })
+
+    it("applies wrapper disabled styling", () => {
+      const { container } = render(
+        <NativeSelect disabled data-testid="select">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      const wrapper = container.querySelector('[data-slot="native-select-wrapper"]')
+      expect(wrapper).toHaveClass("has-[select:disabled]:opacity-50")
+    })
+  })
+
+  // ============================================
+  // EVENT TESTS
+  // ============================================
+  describe("Events", () => {
+    it("calls onChange when value changes", () => {
+      const handleChange = vi.fn()
+      render(
+        <NativeSelect data-testid="select" onChange={handleChange}>
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+          <NativeSelectOption value="2">Option 2</NativeSelectOption>
+        </NativeSelect>
+      )
+      fireEvent.change(screen.getByTestId("select"), { target: { value: "2" } })
+      expect(handleChange).toHaveBeenCalledTimes(1)
+    })
+
+    it("calls onFocus when focused", () => {
+      const handleFocus = vi.fn()
+      render(
+        <NativeSelect data-testid="select" onFocus={handleFocus}>
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      fireEvent.focus(screen.getByTestId("select"))
+      expect(handleFocus).toHaveBeenCalledTimes(1)
+    })
+
+    it("calls onBlur when blurred", () => {
+      const handleBlur = vi.fn()
+      render(
+        <NativeSelect data-testid="select" onBlur={handleBlur}>
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      fireEvent.blur(screen.getByTestId("select"))
+      expect(handleBlur).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  // ============================================
+  // INTERACTION TESTS
+  // ============================================
+  describe("Interactions", () => {
+    it("allows selecting an option", async () => {
+      const user = userEvent.setup()
+      render(
+        <NativeSelect data-testid="select">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+          <NativeSelectOption value="2">Option 2</NativeSelectOption>
+        </NativeSelect>
+      )
+
+      await user.selectOptions(screen.getByTestId("select"), "2")
+      expect(screen.getByTestId("select")).toHaveValue("2")
+    })
+
+    it("does not allow selection when disabled", async () => {
+      const user = userEvent.setup()
+      render(
+        <NativeSelect disabled data-testid="select" defaultValue="1">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+          <NativeSelectOption value="2">Option 2</NativeSelectOption>
+        </NativeSelect>
+      )
+
+      // userEvent respects disabled state and won't change the value
+      await user.selectOptions(screen.getByTestId("select"), "2").catch(() => {})
+      expect(screen.getByTestId("select")).toHaveValue("1")
+    })
+
+    it("can be focused", () => {
+      render(
+        <NativeSelect data-testid="select">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      const select = screen.getByTestId("select")
+      select.focus()
+      expect(select).toHaveFocus()
+    })
+
+    it("is not focusable when disabled", () => {
+      render(
+        <NativeSelect disabled data-testid="select">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      const select = screen.getByTestId("select")
+      select.focus()
+      expect(select).not.toHaveFocus()
+    })
+  })
+
+  // ============================================
+  // SIZE VARIANT TESTS
+  // ============================================
+  describe("Size Variants", () => {
+    it("applies default size (md)", () => {
+      render(
+        <NativeSelect data-testid="select">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toHaveClass("h-9")
+    })
+
+    it("applies xs size", () => {
+      render(
+        <NativeSelect data-testid="select" size="xs">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toHaveClass("h-7")
+    })
+
+    it("applies sm size", () => {
+      render(
+        <NativeSelect data-testid="select" size="sm">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toHaveClass("h-8")
+    })
+
+    it("applies md size", () => {
+      render(
+        <NativeSelect data-testid="select" size="md">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toHaveClass("h-9")
+    })
+
+    it("applies lg size", () => {
+      render(
+        <NativeSelect data-testid="select" size="lg">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toHaveClass("h-10")
+    })
+
+    it("applies xl size", () => {
+      render(
+        <NativeSelect data-testid="select" size="xl">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toHaveClass("h-12")
+    })
+
+    it("applies correct icon size for xs", () => {
+      const { container } = render(
+        <NativeSelect data-testid="select" size="xs">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      const icon = container.querySelector('[data-slot="native-select-icon"]')
+      expect(icon).toHaveClass("size-3")
+    })
+
+    it("applies correct icon size for xl", () => {
+      const { container } = render(
+        <NativeSelect data-testid="select" size="xl">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      const icon = container.querySelector('[data-slot="native-select-icon"]')
+      expect(icon).toHaveClass("size-5")
+    })
+  })
+
+  // ============================================
+  // VISUAL VARIANT TESTS
+  // ============================================
+  describe("Visual Variants", () => {
+    it("applies default variant", () => {
+      render(
+        <NativeSelect data-testid="select">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toHaveClass("border-input")
+    })
+
+    it("applies filled variant", () => {
+      render(
+        <NativeSelect data-testid="select" variant="filled">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toHaveClass("bg-muted")
+    })
+
+    it("applies flushed variant", () => {
+      render(
+        <NativeSelect data-testid="select" variant="flushed">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toHaveClass("rounded-none")
+      expect(screen.getByTestId("select")).toHaveClass("border-x-0")
+      expect(screen.getByTestId("select")).toHaveClass("border-t-0")
+    })
+
+    it("applies unstyled variant", () => {
+      render(
+        <NativeSelect data-testid="select" variant="unstyled">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toHaveClass("border-0")
+      expect(screen.getByTestId("select")).toHaveClass("shadow-none")
+    })
+  })
+
+  // ============================================
+  // LEFT ICON TESTS
+  // ============================================
+  describe("Left Icon", () => {
+    it("renders without left icon by default", () => {
+      const { container } = render(
+        <NativeSelect data-testid="select">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      const leftIcon = container.querySelector('[data-slot="native-select-left-icon"]')
+      expect(leftIcon).not.toBeInTheDocument()
+    })
+
+    it("renders left icon when provided", () => {
+      const { container } = render(
+        <NativeSelect data-testid="select" leftIcon={<GlobeIcon data-testid="globe" />}>
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      const leftIcon = container.querySelector('[data-slot="native-select-left-icon"]')
+      expect(leftIcon).toBeInTheDocument()
+      expect(screen.getByTestId("globe")).toBeInTheDocument()
+    })
+
+    it("left icon has aria-hidden attribute", () => {
+      const { container } = render(
+        <NativeSelect data-testid="select" leftIcon={<GlobeIcon />}>
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      const leftIcon = container.querySelector('[data-slot="native-select-left-icon"]')
+      expect(leftIcon).toHaveAttribute("aria-hidden", "true")
+    })
+
+    it("applies extra padding when left icon is present", () => {
+      render(
+        <NativeSelect data-testid="select" leftIcon={<GlobeIcon />}>
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toHaveClass("pl-9")
+    })
+
+    it("applies correct left padding for xs size", () => {
+      render(
+        <NativeSelect data-testid="select" leftIcon={<GlobeIcon />} size="xs">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toHaveClass("pl-7")
+    })
+
+    it("applies correct left padding for sm size", () => {
+      render(
+        <NativeSelect data-testid="select" leftIcon={<GlobeIcon />} size="sm">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toHaveClass("pl-8")
+    })
+
+    it("applies correct left padding for lg size", () => {
+      render(
+        <NativeSelect data-testid="select" leftIcon={<GlobeIcon />} size="lg">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toHaveClass("pl-10")
+    })
+
+    it("applies correct left padding for xl size", () => {
+      render(
+        <NativeSelect data-testid="select" leftIcon={<GlobeIcon />} size="xl">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toHaveClass("pl-11")
+    })
+
+    it("left icon position changes with size", () => {
+      const { container } = render(
+        <NativeSelect data-testid="select" leftIcon={<GlobeIcon />} size="xl">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      const leftIcon = container.querySelector('[data-slot="native-select-left-icon"]')
+      expect(leftIcon).toHaveClass("left-4", "size-5")
+    })
+
+    it("renders different icons correctly", () => {
+      const { rerender } = render(
+        <NativeSelect data-testid="select" leftIcon={<GlobeIcon data-testid="icon" />}>
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("icon")).toBeInTheDocument()
+
+      rerender(
+        <NativeSelect data-testid="select" leftIcon={<MapPinIcon data-testid="icon2" />}>
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("icon2")).toBeInTheDocument()
+    })
+
+    it("works with all variants", () => {
+      const { rerender } = render(
+        <NativeSelect data-testid="select" leftIcon={<GlobeIcon />} variant="default">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toHaveClass("pl-9")
+
+      rerender(
+        <NativeSelect data-testid="select" leftIcon={<GlobeIcon />} variant="filled">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toHaveClass("pl-9", "bg-muted")
+    })
+
+    it("has no accessibility violations with left icon", async () => {
+      const { container } = render(
+        <label>
+          Country
+          <NativeSelect leftIcon={<GlobeIcon />}>
+            <NativeSelectOption value="us">United States</NativeSelectOption>
+          </NativeSelect>
+        </label>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+
+  // ============================================
+  // OPTGROUP TESTS
+  // ============================================
+  describe("NativeSelectOptGroup", () => {
+    it("renders option groups", () => {
+      render(
+        <NativeSelect data-testid="select">
+          <NativeSelectOptGroup label="Group 1">
+            <NativeSelectOption value="1">Option 1</NativeSelectOption>
+          </NativeSelectOptGroup>
+          <NativeSelectOptGroup label="Group 2">
+            <NativeSelectOption value="2">Option 2</NativeSelectOption>
+          </NativeSelectOptGroup>
+        </NativeSelect>
+      )
+      const groups = screen.getAllByRole("group")
+      expect(groups).toHaveLength(2)
+    })
+
+    it("has data-slot attribute on optgroup", () => {
+      const { container } = render(
+        <NativeSelect data-testid="select">
+          <NativeSelectOptGroup label="Group 1">
+            <NativeSelectOption value="1">Option 1</NativeSelectOption>
+          </NativeSelectOptGroup>
+        </NativeSelect>
+      )
+      const optgroup = container.querySelector('[data-slot="native-select-optgroup"]')
+      expect(optgroup).toBeInTheDocument()
+    })
+
+    it("applies custom className to optgroup", () => {
+      const { container } = render(
+        <NativeSelect data-testid="select">
+          <NativeSelectOptGroup className="custom-group" label="Group 1">
+            <NativeSelectOption value="1">Option 1</NativeSelectOption>
+          </NativeSelectOptGroup>
+        </NativeSelect>
+      )
+      const optgroup = container.querySelector('[data-slot="native-select-optgroup"]')
+      expect(optgroup).toHaveClass("custom-group")
+    })
+  })
+
+  // ============================================
+  // OPTION TESTS
+  // ============================================
+  describe("NativeSelectOption", () => {
+    it("has data-slot attribute on option", () => {
+      const { container } = render(
+        <NativeSelect data-testid="select">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      const option = container.querySelector('[data-slot="native-select-option"]')
+      expect(option).toBeInTheDocument()
+    })
+
+    it("renders disabled option", () => {
+      render(
+        <NativeSelect data-testid="select">
+          <NativeSelectOption disabled value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      const option = screen.getByRole("option", { name: "Option 1" })
+      expect(option).toBeDisabled()
+    })
+  })
+
+  // ============================================
+  // FORM INTEGRATION TESTS
+  // ============================================
+  describe("Form Integration", () => {
+    it("works within a form", async () => {
+      const handleSubmit = vi.fn((e: React.FormEvent) => { e.preventDefault() })
+      const user = userEvent.setup()
+
+      render(
+        <form onSubmit={handleSubmit}>
+          <NativeSelect data-testid="select" name="country">
+            <NativeSelectOption value="">Select</NativeSelectOption>
+            <NativeSelectOption value="us">United States</NativeSelectOption>
+          </NativeSelect>
+          <button type="submit">Submit</button>
+        </form>
+      )
+
+      await user.selectOptions(screen.getByTestId("select"), "us")
+      await user.click(screen.getByRole("button"))
+
+      expect(handleSubmit).toHaveBeenCalled()
+    })
+
+    it("supports autoComplete attribute", () => {
+      render(
+        <NativeSelect autoComplete="country" data-testid="select">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toHaveAttribute("autocomplete", "country")
+    })
+  })
+
+  // ============================================
+  // ACCESSIBILITY TESTS
+  // ============================================
+  describe("Accessibility", () => {
+    it("has no accessibility violations", async () => {
+      const { container } = render(
+        <label>
+          Country
+          <NativeSelect>
+            <NativeSelectOption value="us">United States</NativeSelectOption>
+          </NativeSelect>
+        </label>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with all size variants", async () => {
+      const { container } = render(
+        <div>
+          <label>
+            XS Select
+            <NativeSelect size="xs">
+              <NativeSelectOption value="1">Option</NativeSelectOption>
+            </NativeSelect>
+          </label>
+          <label>
+            SM Select
+            <NativeSelect size="sm">
+              <NativeSelectOption value="1">Option</NativeSelectOption>
+            </NativeSelect>
+          </label>
+          <label>
+            MD Select
+            <NativeSelect size="md">
+              <NativeSelectOption value="1">Option</NativeSelectOption>
+            </NativeSelect>
+          </label>
+          <label>
+            LG Select
+            <NativeSelect size="lg">
+              <NativeSelectOption value="1">Option</NativeSelectOption>
+            </NativeSelect>
+          </label>
+          <label>
+            XL Select
+            <NativeSelect size="xl">
+              <NativeSelectOption value="1">Option</NativeSelectOption>
+            </NativeSelect>
+          </label>
+        </div>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("has no violations with all visual variants", async () => {
+      const { container } = render(
+        <div>
+          <label>
+            Default
+            <NativeSelect variant="default">
+              <NativeSelectOption value="1">Option</NativeSelectOption>
+            </NativeSelect>
+          </label>
+          <label>
+            Filled
+            <NativeSelect variant="filled">
+              <NativeSelectOption value="1">Option</NativeSelectOption>
+            </NativeSelect>
+          </label>
+          <label>
+            Flushed
+            <NativeSelect variant="flushed">
+              <NativeSelectOption value="1">Option</NativeSelectOption>
+            </NativeSelect>
+          </label>
+          <label>
+            Unstyled
+            <NativeSelect variant="unstyled">
+              <NativeSelectOption value="1">Option</NativeSelectOption>
+            </NativeSelect>
+          </label>
+        </div>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("supports aria-label", () => {
+      render(
+        <NativeSelect aria-label="Select country" data-testid="select">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toHaveAttribute("aria-label", "Select country")
+    })
+
+    it("supports aria-describedby", () => {
+      render(
+        <>
+          <NativeSelect aria-describedby="help" data-testid="select">
+            <NativeSelectOption value="1">Option 1</NativeSelectOption>
+          </NativeSelect>
+          <span id="help">Help text</span>
+        </>
+      )
+      expect(screen.getByTestId("select")).toHaveAttribute("aria-describedby", "help")
+    })
+
+    it("supports aria-labelledby", () => {
+      render(
+        <>
+          <span id="label">Country Selection</span>
+          <NativeSelect aria-labelledby="label" data-testid="select">
+            <NativeSelectOption value="1">Option 1</NativeSelectOption>
+          </NativeSelect>
+        </>
+      )
+      expect(screen.getByTestId("select")).toHaveAttribute("aria-labelledby", "label")
+    })
+
+    it("select with aria-label has no violations", async () => {
+      const { container } = render(
+        <NativeSelect aria-label="Country selection">
+          <NativeSelectOption value="us">United States</NativeSelectOption>
+        </NativeSelect>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("disabled select has no violations", async () => {
+      const { container } = render(
+        <label>
+          Disabled
+          <NativeSelect disabled>
+            <NativeSelectOption value="1">Option</NativeSelectOption>
+          </NativeSelect>
+        </label>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("required select has no violations", async () => {
+      const { container } = render(
+        <label>
+          Required Field
+          <NativeSelect required>
+            <NativeSelectOption value="">Select</NativeSelectOption>
+            <NativeSelectOption value="1">Option</NativeSelectOption>
+          </NativeSelect>
+        </label>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it("invalid select has no violations", async () => {
+      const { container } = render(
+        <label>
+          Invalid Field
+          <NativeSelect aria-describedby="error" aria-invalid="true">
+            <NativeSelectOption value="1">Option</NativeSelectOption>
+          </NativeSelect>
+          <span id="error">This field has an error</span>
+        </label>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+
+  // ============================================
+  // DATA ATTRIBUTE TESTS
+  // ============================================
+  describe("Data Attributes", () => {
+    it("has data-slot on select", () => {
+      render(
+        <NativeSelect data-testid="select">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toHaveAttribute("data-slot", "native-select")
+    })
+
+    it("preserves custom data attributes", () => {
+      render(
+        <NativeSelect data-field="country" data-form="profile" data-testid="select">
+          <NativeSelectOption value="1">Option 1</NativeSelectOption>
+        </NativeSelect>
+      )
+      expect(screen.getByTestId("select")).toHaveAttribute("data-field", "country")
+      expect(screen.getByTestId("select")).toHaveAttribute("data-form", "profile")
+    })
+  })
+})