chore: aria 속성 변경에 따른 테스트 코드 수정

GDSC-Hongik · Sep 22, 2024 · 9047f30 · 9047f30
1 parent d9f3b89
commit 9047f30
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 18 deletions.
diff --git a/packages/wow-ui/src/components/DropDown/DropDown.test.tsx b/packages/wow-ui/src/components/DropDown/DropDown.test.tsx
@@ -54,12 +54,8 @@ describe("DropDown component", () => {
       placeholder: "Please select",
     });
 
-    const dropdownButton = screen.getByRole("button", {
-      name: "Option 2 down-arrow icon",
-    });
-    expect(dropdownButton).toBeInTheDocument();
-    expect(dropdownButton).toHaveAttribute("id", `${dropdownId}-trigger`);
-    expect(dropdownButton).toHaveTextContent("Option 2");
+    const dropdownTrigger = screen.getByRole("combobox");
+    expect(dropdownTrigger).toHaveTextContent("Option 2");
   });
 
   it("should render the trigger button", async () => {
@@ -159,35 +155,35 @@ describe("external control and events", () => {
 
     await userEvent.keyboard("{ArrowDown}");
     await waitFor(() => {
-      const dropdown = screen.getByRole("listbox");
-      expect(dropdown).toHaveAttribute(
+      const dropdownTrigger = screen.getByRole("combobox");
+      expect(dropdownTrigger).toHaveAttribute(
         "aria-activedescendant",
         `${dropdownId}-option-option1`
       );
     });
 
     await userEvent.keyboard("{ArrowDown}");
     await waitFor(() => {
-      const dropdown = screen.getByRole("listbox");
-      expect(dropdown).toHaveAttribute(
+      const dropdownTrigger = screen.getByRole("combobox");
+      expect(dropdownTrigger).toHaveAttribute(
         "aria-activedescendant",
         `${dropdownId}-option-option2`
       );
     });
 
     await userEvent.keyboard("{ArrowDown}");
     await waitFor(() => {
-      const dropdown = screen.getByRole("listbox");
-      expect(dropdown).toHaveAttribute(
+      const dropdownTrigger = screen.getByRole("combobox");
+      expect(dropdownTrigger).toHaveAttribute(
         "aria-activedescendant",
         `${dropdownId}-option-option3`
       );
     });
 
     await userEvent.keyboard("{ArrowUp}");
     await waitFor(() => {
-      const dropdown = screen.getByRole("listbox");
-      expect(dropdown).toHaveAttribute(
+      const dropdownTrigger = screen.getByRole("combobox");
+      expect(dropdownTrigger).toHaveAttribute(
         "aria-activedescendant",
         `${dropdownId}-option-option2`
       );

diff --git a/packages/wow-ui/src/components/DropDown/DropDownTrigger.tsx b/packages/wow-ui/src/components/DropDown/DropDownTrigger.tsx
@@ -57,9 +57,13 @@ const DropDownTrigger = ({
     ...(focusedValue && {
       "aria-activedescendant": `${dropdownId}-option-${focusedValue}`,
     }),
-    ...(label && {
-      "aria-labeledby": `${dropdownId}-label`,
-    }),
+    ...(label
+      ? {
+          "aria-labelledby": `${dropdownId}-label`,
+        }
+      : {
+          "aria-label": `dropdown-open`,
+        }),
   };
 
   if (trigger) {
@@ -85,7 +89,6 @@ const DropDownTrigger = ({
         alignItems="center"
         cursor="pointer"
         display="flex"
-        id={`${dropdownId}-trigger`}
         justifyContent="space-between"
         outline="none"
         type="button"