@simplysm/solid 13.0.70 → 13.0.72

package/tests/components/disclosure/Dropdown.spec.tsx

@@ -3,7 +3,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { createSignal } from "solid-js";
 import { Dropdown } from "../../../src/components/disclosure/Dropdown";
 
-describe("Dropdown 컴포넌트", () => {
+describe("Dropdown", () => {
   beforeEach(() => {
     vi.stubGlobal("innerWidth", 1024);
     vi.stubGlobal("innerHeight", 768);
@@ -15,8 +15,8 @@ describe("Dropdown 컴포넌트", () => {
     vi.unstubAllGlobals();
   });
 
-  describe("Trigger/Content 구조", () => {
-    it("Trigger 클릭 시 Content가 렌더링된다", async () => {
+  describe("Trigger/Content structure", () => {
+    it("renders Content on Trigger click", async () => {
       render(() => (
         <Dropdown>
           <Dropdown.Trigger>
@@ -38,7 +38,7 @@ describe("Dropdown 컴포넌트", () => {
       });
     });
 
-    it("Trigger 재클릭 시 닫힌다", () => {
+    it("closes on second Trigger click", () => {
       const [open, setOpen] = createSignal(false);
       const handleOpenChange = vi.fn((v: boolean) => setOpen(v));
 
@@ -61,7 +61,7 @@ describe("Dropdown 컴포넌트", () => {
       expect(handleOpenChange).toHaveBeenCalledWith(false);
     });
 
-    it("disabled 시 Trigger 클릭이 무시된다", () => {
+    it("ignores Trigger click when disabled", () => {
       const [open, setOpen] = createSignal(false);
       const handleOpenChange = vi.fn((v: boolean) => setOpen(v));
 
@@ -81,8 +81,8 @@ describe("Dropdown 컴포넌트", () => {
     });
   });
 
-  describe("Controlled 모드", () => {
-    it("open prop으로 제어된다", async () => {
+  describe("controlled mode", () => {
+    it("is controlled by open prop", async () => {
       const [open, setOpen] = createSignal(false);
 
       render(() => (
@@ -106,8 +106,8 @@ describe("Dropdown 컴포넌트", () => {
     });
   });
 
-  describe("Context menu (Trigger 없음)", () => {
-    it("position prop으로 위치가 설정된다", async () => {
+  describe("Context menu (no Trigger)", () => {
+    it("sets position via position prop", async () => {
       render(() => (
         <Dropdown position={{ x: 300, y: 200 }} open={true}>
           <Dropdown.Content>
@@ -124,8 +124,8 @@ describe("Dropdown 컴포넌트", () => {
     });
   });
 
-  describe("닫힘 감지", () => {
-    it("외부 pointerdown 시 닫힌다", async () => {
+  describe("close detection", () => {
+    it("closes on outside pointerdown", async () => {
       const handleOpenChange = vi.fn();
 
       render(() => (
@@ -150,7 +150,7 @@ describe("Dropdown 컴포넌트", () => {
       expect(handleOpenChange).toHaveBeenCalledWith(false);
     });
 
-    it("Escape 키로 닫힌다", async () => {
+    it("closes on Escape key", async () => {
       const handleOpenChange = vi.fn();
 
       render(() => (
@@ -174,7 +174,7 @@ describe("Dropdown 컴포넌트", () => {
   });
 
   describe("maxHeight", () => {
-    it("기본값 300px", async () => {
+    it("defaults to 300px", async () => {
       render(() => (
         <Dropdown open={true}>
           <Dropdown.Trigger>
@@ -192,7 +192,7 @@ describe("Dropdown 컴포넌트", () => {
       });
     });
 
-    it("커스텀 값 적용", async () => {
+    it("applies custom value", async () => {
       render(() => (
         <Dropdown open={true} maxHeight={500}>
           <Dropdown.Trigger>
@@ -210,4 +210,124 @@ describe("Dropdown 컴포넌트", () => {
       });
     });
   });
+
+  describe("keyboardNav tabbable navigation", () => {
+    it("ArrowDown from trigger focuses first tabbable in popup (input, not list item)", async () => {
+      const [open, setOpen] = createSignal(true);
+
+      render(() => (
+        <Dropdown open={open()} onOpenChange={setOpen} keyboardNav>
+          <Dropdown.Trigger>
+            <button data-testid="trigger">trigger</button>
+          </Dropdown.Trigger>
+          <Dropdown.Content>
+            <input data-testid="search" />
+            <button data-testid="action-btn" type="button">action</button>
+            <button data-list-item data-testid="item1" type="button">item1</button>
+          </Dropdown.Content>
+        </Dropdown>
+      ));
+
+      await waitFor(() => {
+        expect(document.querySelector("[data-dropdown]")).not.toBeNull();
+      });
+
+      const triggerWrapper = document.querySelector("[data-dropdown-trigger]") as HTMLElement;
+      triggerWrapper.focus();
+
+      fireEvent.keyDown(triggerWrapper, { key: "ArrowDown" });
+
+      const search = document.querySelector('[data-testid="search"]') as HTMLElement;
+      expect(document.activeElement).toBe(search);
+    });
+
+    it("ArrowDown from input focuses next tabbable (button)", async () => {
+      const [open, setOpen] = createSignal(true);
+
+      render(() => (
+        <Dropdown open={open()} onOpenChange={setOpen} keyboardNav>
+          <Dropdown.Trigger>
+            <button data-testid="trigger">trigger</button>
+          </Dropdown.Trigger>
+          <Dropdown.Content>
+            <input data-testid="search" />
+            <button data-testid="action-btn" type="button">action</button>
+            <button data-list-item data-testid="item1" type="button">item1</button>
+          </Dropdown.Content>
+        </Dropdown>
+      ));
+
+      await waitFor(() => {
+        expect(document.querySelector("[data-dropdown]")).not.toBeNull();
+      });
+
+      const search = document.querySelector('[data-testid="search"]') as HTMLElement;
+      search.focus();
+
+      const popup = document.querySelector("[data-dropdown]") as HTMLElement;
+      fireEvent.keyDown(popup, { key: "ArrowDown" });
+
+      const actionBtn = document.querySelector('[data-testid="action-btn"]') as HTMLElement;
+      expect(document.activeElement).toBe(actionBtn);
+    });
+
+    it("ArrowUp from input focuses trigger (no prev tabbable, dir=down)", async () => {
+      const [open, setOpen] = createSignal(true);
+
+      render(() => (
+        <Dropdown open={open()} onOpenChange={setOpen} keyboardNav>
+          <Dropdown.Trigger>
+            <button data-testid="trigger">trigger</button>
+          </Dropdown.Trigger>
+          <Dropdown.Content>
+            <input data-testid="search" />
+            <button data-list-item data-testid="item1" type="button">item1</button>
+          </Dropdown.Content>
+        </Dropdown>
+      ));
+
+      await waitFor(() => {
+        expect(document.querySelector("[data-dropdown]")).not.toBeNull();
+      });
+
+      const search = document.querySelector('[data-testid="search"]') as HTMLElement;
+      search.focus();
+
+      const popup = document.querySelector("[data-dropdown]") as HTMLElement;
+      fireEvent.keyDown(popup, { key: "ArrowUp" });
+
+      const triggerWrapper = document.querySelector("[data-dropdown-trigger]") as HTMLElement;
+      expect(document.activeElement).toBe(triggerWrapper);
+    });
+
+    it("ArrowUp from action button focuses prev tabbable (input)", async () => {
+      const [open, setOpen] = createSignal(true);
+
+      render(() => (
+        <Dropdown open={open()} onOpenChange={setOpen} keyboardNav>
+          <Dropdown.Trigger>
+            <button data-testid="trigger">trigger</button>
+          </Dropdown.Trigger>
+          <Dropdown.Content>
+            <input data-testid="search" />
+            <button data-testid="action-btn" type="button">action</button>
+            <button data-list-item data-testid="item1" type="button">item1</button>
+          </Dropdown.Content>
+        </Dropdown>
+      ));
+
+      await waitFor(() => {
+        expect(document.querySelector("[data-dropdown]")).not.toBeNull();
+      });
+
+      const actionBtn = document.querySelector('[data-testid="action-btn"]') as HTMLElement;
+      actionBtn.focus();
+
+      const popup = document.querySelector("[data-dropdown]") as HTMLElement;
+      fireEvent.keyDown(popup, { key: "ArrowUp" });
+
+      const search = document.querySelector('[data-testid="search"]') as HTMLElement;
+      expect(document.activeElement).toBe(search);
+    });
+  });
 });

package/tests/components/disclosure/Tabs.spec.tsx

@@ -3,9 +3,9 @@ import { describe, it, expect, vi } from "vitest";
 import { createSignal } from "solid-js";
 import { Tabs } from "../../../src/components/disclosure/Tabs";
 
-describe("Tabs 컴포넌트", () => {
+describe("Tabs", () => {
   describe("basic rendering", () => {
-    it("tablist role로 렌더링된다", () => {
+    it("renders with tablist role", () => {
       const { getByRole } = render(() => (
         <Tabs>
           <Tabs.Tab value="a">A</Tabs.Tab>
@@ -14,7 +14,7 @@ describe("Tabs 컴포넌트", () => {
       expect(getByRole("tablist")).toBeTruthy();
     });
 
-    it("Tabs.Tab이 tab role로 렌더링된다", () => {
+    it("renders Tabs.Tab with tab role", () => {
       const { getByRole } = render(() => (
         <Tabs>
           <Tabs.Tab value="a">A</Tabs.Tab>
@@ -23,7 +23,7 @@ describe("Tabs 컴포넌트", () => {
       expect(getByRole("tab")).toBeTruthy();
     });
 
-    it("children이 표시된다", () => {
+    it("renders children", () => {
       const { getByText } = render(() => (
         <Tabs>
           <Tabs.Tab value="a">탭 A</Tabs.Tab>
@@ -35,8 +35,8 @@ describe("Tabs 컴포넌트", () => {
     });
   });
 
-  describe("선택 동작", () => {
-    it("클릭하면 aria-selected가 true가 된다", () => {
+  describe("selection behavior", () => {
+    it("sets aria-selected to true on click", () => {
       const { getAllByRole } = render(() => (
         <Tabs>
           <Tabs.Tab value="a">A</Tabs.Tab>
@@ -50,7 +50,7 @@ describe("Tabs 컴포넌트", () => {
       expect(tabs[1].getAttribute("aria-selected")).toBe("false");
     });
 
-    it("다른 탭 클릭 시 선택이 변경된다", () => {
+    it("changes selection on different tab click", () => {
       const { getAllByRole } = render(() => (
         <Tabs value="a">
           <Tabs.Tab value="a">A</Tabs.Tab>
@@ -64,7 +64,7 @@ describe("Tabs 컴포넌트", () => {
       expect(tabs[0].getAttribute("aria-selected")).toBe("false");
     });
 
-    it("disabled 탭은 클릭해도 선택되지 않는다", () => {
+    it("does not select disabled tab on click", () => {
       const handleChange = vi.fn();
       const { getAllByRole } = render(() => (
         <Tabs onValueChange={handleChange}>
@@ -80,8 +80,8 @@ describe("Tabs 컴포넌트", () => {
     });
   });
 
-  describe("키보드 동작", () => {
-    it("Space 키로 선택된다", () => {
+  describe("keyboard behavior", () => {
+    it("selects tab with Space key", () => {
       const { getAllByRole } = render(() => (
         <Tabs>
           <Tabs.Tab value="a">A</Tabs.Tab>
@@ -93,7 +93,7 @@ describe("Tabs 컴포넌트", () => {
       expect(getAllByRole("tab")[0].getAttribute("aria-selected")).toBe("true");
     });
 
-    it("Enter 키로 선택된다", () => {
+    it("selects tab with Enter key", () => {
       const { getAllByRole } = render(() => (
         <Tabs>
           <Tabs.Tab value="a">A</Tabs.Tab>
@@ -106,8 +106,8 @@ describe("Tabs 컴포넌트", () => {
     });
   });
 
-  describe("controlled 패턴", () => {
-    it("value prop이 선택 상태로 반영된다", () => {
+  describe("controlled pattern", () => {
+    it("reflects value prop as selected state", () => {
       const { getAllByRole } = render(() => (
         <Tabs value="b">
           <Tabs.Tab value="a">A</Tabs.Tab>
@@ -119,7 +119,7 @@ describe("Tabs 컴포넌트", () => {
       expect(getAllByRole("tab")[1].getAttribute("aria-selected")).toBe("true");
     });
 
-    it("onValueChange가 클릭 시 호출된다", () => {
+    it("calls onValueChange on click", () => {
       const handleChange = vi.fn();
       const { getAllByRole } = render(() => (
         <Tabs value="a" onValueChange={handleChange}>
@@ -132,7 +132,7 @@ describe("Tabs 컴포넌트", () => {
       expect(handleChange).toHaveBeenCalledWith("b");
     });
 
-    it("외부 상태 변경 시 업데이트된다", () => {
+    it("updates when external state changes", () => {
       const [value, setValue] = createSignal("a");
       const { getAllByRole } = render(() => (
         <Tabs value={value()} onValueChange={setValue}>
@@ -149,8 +149,8 @@ describe("Tabs 컴포넌트", () => {
     });
   });
 
-  describe("사이즈", () => {
-    it("size prop에 따라 스타일이 달라진다", () => {
+  describe("size", () => {
+    it("applies different styles per size prop", () => {
       const { getAllByRole: getDefault } = render(() => (
         <Tabs>
           <Tabs.Tab value="a">A</Tabs.Tab>
@@ -167,7 +167,7 @@ describe("Tabs 컴포넌트", () => {
   });
 
   describe("accessibility", () => {
-    it("disabled 탭에 aria-disabled가 설정된다", () => {
+    it("sets aria-disabled on disabled tab", () => {
       const { getAllByRole } = render(() => (
         <Tabs>
           <Tabs.Tab value="a">A</Tabs.Tab>
@@ -180,7 +180,7 @@ describe("Tabs 컴포넌트", () => {
       expect(getAllByRole("tab")[1].getAttribute("aria-disabled")).toBe("true");
     });
 
-    it("disabled 탭의 tabIndex가 -1이다", () => {
+    it("sets tabIndex to -1 on disabled tab", () => {
       const { getAllByRole } = render(() => (
         <Tabs>
           <Tabs.Tab value="a">A</Tabs.Tab>
@@ -195,7 +195,7 @@ describe("Tabs 컴포넌트", () => {
   });
 
   describe("class merging", () => {
-    it("Tabs에 사용자 정의 class가 병합된다", () => {
+    it("merges custom class on Tabs", () => {
       const { getByRole } = render(() => (
         // eslint-disable-next-line tailwindcss/no-custom-classname
         <Tabs class="my-tab-class">
@@ -205,7 +205,7 @@ describe("Tabs 컴포넌트", () => {
       expect(getByRole("tablist").classList.contains("my-tab-class")).toBe(true);
     });
 
-    it("Tabs.Tab에 사용자 정의 class가 병합된다", () => {
+    it("merges custom class on Tabs.Tab", () => {
       const { getByRole } = render(() => (
         <Tabs>
           {/* eslint-disable-next-line tailwindcss/no-custom-classname */}

package/tests/components/disclosure/dialogZIndex.spec.ts

@@ -0,0 +1,45 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import {
+  registerDialog,
+  unregisterDialog,
+  getTopmostDialog,
+} from "../../../src/components/disclosure/dialogZIndex";
+
+describe("getTopmostDialog", () => {
+  let el1: HTMLElement;
+  let el2: HTMLElement;
+
+  beforeEach(() => {
+    el1 = document.createElement("div");
+    el2 = document.createElement("div");
+    // Clean up any leftover registrations
+    unregisterDialog(el1);
+    unregisterDialog(el2);
+  });
+
+  it("returns null when no dialogs are registered", () => {
+    expect(getTopmostDialog()).toBeNull();
+  });
+
+  it("returns the only registered dialog", () => {
+    registerDialog(el1);
+    expect(getTopmostDialog()).toBe(el1);
+    unregisterDialog(el1);
+  });
+
+  it("returns the last registered dialog when multiple are open", () => {
+    registerDialog(el1);
+    registerDialog(el2);
+    expect(getTopmostDialog()).toBe(el2);
+    unregisterDialog(el2);
+    unregisterDialog(el1);
+  });
+
+  it("returns previous dialog after topmost is unregistered", () => {
+    registerDialog(el1);
+    registerDialog(el2);
+    unregisterDialog(el2);
+    expect(getTopmostDialog()).toBe(el1);
+    unregisterDialog(el1);
+  });
+});

package/tests/components/display/Alert.spec.tsx

@@ -2,9 +2,9 @@ import { render } from "@solidjs/testing-library";
 import { describe, it, expect } from "vitest";
 import { Alert } from "../../../src/components/display/Alert";
 
-describe("Alert 컴포넌트", () => {
+describe("Alert", () => {
   describe("basic rendering", () => {
-    it("children이 Alert 내부에 표시된다", () => {
+    it("renders children", () => {
       const { getByText } = render(() => <Alert>This is a note</Alert>);
       expect(getByText("This is a note")).toBeTruthy();
     });
@@ -16,8 +16,8 @@ describe("Alert 컴포넌트", () => {
     });
   });
 
-  describe("theme 속성", () => {
-    it("theme prop에 따라 스타일이 달라진다", () => {
+  describe("theme prop", () => {
+    it("applies different styles per theme", () => {
       const { container: defaultContainer } = render(() => <Alert>Content</Alert>);
       const { container: themedContainer } = render(() => <Alert theme="danger">Content</Alert>);
 

package/tests/components/display/Barcode.spec.tsx

@@ -3,28 +3,28 @@ import { describe, it, expect } from "vitest";
 import { createSignal } from "solid-js";
 import { Barcode } from "../../../src/components/display/Barcode";
 
-describe("Barcode 컴포넌트", () => {
+describe("Barcode", () => {
   describe("basic rendering", () => {
-    it("data-barcode 속성으로 렌더링된다", () => {
+    it("renders with data-barcode attribute", () => {
       const { container } = render(() => <Barcode type="qrcode" value="test" />);
       expect(container.querySelector("[data-barcode]")).toBeTruthy();
     });
 
-    it("value가 있으면 SVG가 렌더링된다", () => {
+    it("renders SVG when value is provided", () => {
       const { container } = render(() => <Barcode type="qrcode" value="hello" />);
       const el = container.querySelector("[data-barcode]")!;
       expect(el.querySelector("svg")).toBeTruthy();
     });
 
-    it("value가 없으면 내용이 비어있다", () => {
+    it("renders empty when value is absent", () => {
       const { container } = render(() => <Barcode type="qrcode" />);
       const el = container.querySelector("[data-barcode]")!;
       expect(el.innerHTML).toBe("");
     });
   });
 
-  describe("반응성", () => {
-    it("value 변경 시 SVG가 업데이트된다", () => {
+  describe("reactivity", () => {
+    it("updates SVG when value changes", () => {
       const [value, setValue] = createSignal("first");
       const { container } = render(() => <Barcode type="qrcode" value={value()} />);
       const el = container.querySelector("[data-barcode]")!;
@@ -38,7 +38,7 @@ describe("Barcode 컴포넌트", () => {
       expect(firstSvg).not.toBe(secondSvg);
     });
 
-    it("value가 빈 문자열로 변경되면 SVG가 제거된다", () => {
+    it("removes SVG when value changes to empty string", () => {
       const [value, setValue] = createSignal("hello");
       const { container } = render(() => <Barcode type="qrcode" value={value()} />);
       const el = container.querySelector("[data-barcode]")!;

package/tests/components/display/Card.spec.tsx

@@ -2,9 +2,9 @@ import { render } from "@solidjs/testing-library";
 import { describe, it, expect } from "vitest";
 import { Card } from "../../../src/components/display/Card";
 
-describe("Card 컴포넌트", () => {
+describe("Card", () => {
   describe("basic rendering", () => {
-    it("children이 Card 내부에 표시된다", () => {
+    it("renders children", () => {
       const { getByText } = render(() => <Card>Card Content</Card>);
       expect(getByText("Card Content")).toBeTruthy();
     });
@@ -32,7 +32,7 @@ describe("Card 컴포넌트", () => {
       expect(card.getAttribute("data-testid")).toBe("test-card");
     });
 
-    it("id 속성이 전달된다", () => {
+    it("passes id attribute", () => {
       const { container } = render(() => <Card id="my-card">Content</Card>);
       const card = container.firstChild as HTMLElement;
       expect(card.id).toBe("my-card");

package/tests/components/display/Link.spec.tsx

@@ -2,9 +2,9 @@ import { render } from "@solidjs/testing-library";
 import { describe, it, expect } from "vitest";
 import { Link } from "../../../src/components/display/Link";
 
-describe("Link 컴포넌트", () => {
+describe("Link", () => {
   describe("basic rendering", () => {
-    it("children이 Link 내부에 표시된다", () => {
+    it("renders children", () => {
       const { getByText } = render(() => <Link href="https://example.com">링크</Link>);
       expect(getByText("링크")).toBeTruthy();
     });
@@ -16,14 +16,14 @@ describe("Link 컴포넌트", () => {
     });
   });
 
-  describe("href 속성", () => {
-    it("href가 a 요소에 전달된다", () => {
+  describe("href prop", () => {
+    it("passes href to anchor element", () => {
       const { container } = render(() => <Link href="https://example.com">링크</Link>);
       const link = container.firstChild as HTMLAnchorElement;
       expect(link.getAttribute("href")).toBe("https://example.com");
     });
 
-    it("target 속성이 전달된다", () => {
+    it("passes target attribute", () => {
       const { container } = render(() => (
         <Link href="https://example.com" target="_blank">
           링크

package/tests/components/display/Tag.spec.tsx

@@ -2,9 +2,9 @@ import { render } from "@solidjs/testing-library";
 import { describe, it, expect } from "vitest";
 import { Tag } from "../../../src/components/display/Tag";
 
-describe("Tag 컴포넌트", () => {
+describe("Tag", () => {
   describe("basic rendering", () => {
-    it("children이 Tag 내부에 표시된다", () => {
+    it("renders children", () => {
       const { getByText } = render(() => <Tag>New</Tag>);
       expect(getByText("New")).toBeTruthy();
     });
@@ -16,8 +16,8 @@ describe("Tag 컴포넌트", () => {
     });
   });
 
-  describe("theme 속성", () => {
-    it("theme prop에 따라 스타일이 달라진다", () => {
+  describe("theme prop", () => {
+    it("applies different styles per theme", () => {
       const { container: defaultContainer } = render(() => <Tag>Tag</Tag>);
       const { container: themedContainer } = render(() => <Tag theme="danger">Tag</Tag>);
 

package/tests/components/features/address/AddressSearch.spec.tsx

@@ -22,7 +22,7 @@ function TestApp() {
 }
 
 describe("AddressSearchContent", () => {
-  it("마운트 시 Daum Postcode 위젯이 content 영역에 렌더된다", async () => {
+  it("mounts and renders Daum Postcode widget inside content area", async () => {
     const { getByTestId } = render(() => (
       <DialogProvider>
         <TestApp />
@@ -31,12 +31,12 @@ describe("AddressSearchContent", () => {
 
     getByTestId("open-btn").click();
 
-    // Daum Postcode 스크립트 로드 + 위젯 embed 대기
+    // wait for Daum Postcode script load + widget embed
     await waitFor(
       () => {
         const content = document.querySelector("[data-address-content]");
         expect(content).not.toBeNull();
-        // Daum Postcode 위젯이 embed되면 content 내부에 자식 요소가 생긴다
+        // once the Daum Postcode widget is embedded, content has child elements
         expect(content!.children.length).toBeGreaterThan(0);
       },
       { timeout: 10000 },