From 9047f3036a142e98fb9098d047f2f1c6977dc11a Mon Sep 17 00:00:00 2001
From: SeieunYoo <isho48239@gmail.com>
Date: Sun, 22 Sep 2024 15:43:59 +0900
Subject: [PATCH] =?UTF-8?q?chore:=20aria=20=EC=86=8D=EC=84=B1=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=EC=97=90=20=EB=94=B0=EB=A5=B8=20=ED=85=8C=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EC=BD=94=EB=93=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/DropDown/DropDown.test.tsx | 24 ++++++++-----------
 .../components/DropDown/DropDownTrigger.tsx   | 11 +++++----
 2 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/packages/wow-ui/src/components/DropDown/DropDown.test.tsx b/packages/wow-ui/src/components/DropDown/DropDown.test.tsx
index 97a1bffe..27ad15e9 100644
--- 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,8 +155,8 @@ 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`
       );
@@ -168,8 +164,8 @@ 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-option2`
       );
@@ -177,8 +173,8 @@ 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-option3`
       );
@@ -186,8 +182,8 @@ describe("external control and events", () => {
 
     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
index d0974dad..85e75ad8 100644
--- 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"