From d9f3b8946d4101b41c7a19f637044154de7fbbe9 Mon Sep 17 00:00:00 2001
From: SeieunYoo <isho48239@gmail.com>
Date: Sat, 21 Sep 2024 22:34:54 +0900
Subject: [PATCH] =?UTF-8?q?chore:=20aria=20=EC=86=8D=EC=84=B1=20=EC=9C=84?=
 =?UTF-8?q?=EC=B9=98=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EA=B3=B5=ED=86=B5?=
 =?UTF-8?q?=20=EC=86=8D=EC=84=B1=EC=9C=BC=EB=A1=9C=20=EB=B9=BC=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DropDown/DropDownOptionList.tsx           | 10 +++---
 .../components/DropDown/DropDownTrigger.tsx   | 36 +++++++++++++------
 .../components/DropDown/DropDownWrapper.tsx   |  1 -
 3 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/packages/wow-ui/src/components/DropDown/DropDownOptionList.tsx b/packages/wow-ui/src/components/DropDown/DropDownOptionList.tsx
index 2886e3fc..170a0181 100644
--- a/packages/wow-ui/src/components/DropDown/DropDownOptionList.tsx
+++ b/packages/wow-ui/src/components/DropDown/DropDownOptionList.tsx
@@ -64,15 +64,11 @@ const DropDownOptionList = ({
 
   return (
     <styled.ul
-      {...(focusedValue && {
-        "aria-activedescendant": `${dropdownId}-option-${focusedValue}`,
-      })}
       aria-hidden={!open}
-      display="flex"
-      flexDirection="column"
+      aria-labelledby={`${dropdownId}-trigger`}
+      id={`${dropdownId}-option-list`}
       ref={listRef}
       role="listbox"
-      style={{ visibility: open ? "visible" : "hidden" }}
       tabIndex={0}
       visibility={open ? "visible" : "hidden"}
       className={dropdownContentStyle({
@@ -89,6 +85,8 @@ export default DropDownOptionList;
 
 const dropdownContentStyle = cva({
   base: {
+    display: "flex",
+    flexDirection: "column",
     position: "absolute",
     outline: "none",
     top: "calc(100% + 0.5rem)",
diff --git a/packages/wow-ui/src/components/DropDown/DropDownTrigger.tsx b/packages/wow-ui/src/components/DropDown/DropDownTrigger.tsx
index 50c90e7e..d0974dad 100644
--- a/packages/wow-ui/src/components/DropDown/DropDownTrigger.tsx
+++ b/packages/wow-ui/src/components/DropDown/DropDownTrigger.tsx
@@ -2,7 +2,7 @@
 
 import { cva } from "@styled-system/css";
 import { styled } from "@styled-system/jsx";
-import type { KeyboardEvent } from "react";
+import type { ButtonHTMLAttributes, KeyboardEvent } from "react";
 import { cloneElement, useCallback } from "react";
 import { DownArrow } from "wowds-icons";
 
@@ -23,8 +23,14 @@ const DropDownTrigger = ({
   trigger,
 }: DropDownTriggerProps) => {
   const itemMap = useCollection();
-  const { open, selectedValue, setOpen, setFocusedValue, dropdownId } =
-    useDropDownContext();
+  const {
+    open,
+    selectedValue,
+    focusedValue,
+    setOpen,
+    setFocusedValue,
+    dropdownId,
+  } = useDropDownContext();
 
   const selectedText = itemMap.get(selectedValue);
 
@@ -42,13 +48,24 @@ const DropDownTrigger = ({
     [toggleDropdown]
   );
 
+  const commonProps: ButtonHTMLAttributes<HTMLButtonElement> = {
+    "aria-expanded": open,
+    role: "combobox",
+    "aria-haspopup": "listbox",
+    id: `${dropdownId}-trigger`,
+    "aria-controls": `${dropdownId}-option-list`,
+    ...(focusedValue && {
+      "aria-activedescendant": `${dropdownId}-option-${focusedValue}`,
+    }),
+    ...(label && {
+      "aria-labeledby": `${dropdownId}-label`,
+    }),
+  };
+
   if (trigger) {
     return cloneElement(trigger, {
       onClick: toggleDropdown,
-      "aria-expanded": open,
-      "aria-haspopup": "true",
-      id: `${dropdownId}-trigger`,
-      "aria-controls": `${dropdownId}`,
+      ...commonProps,
     });
   }
 
@@ -57,16 +74,15 @@ const DropDownTrigger = ({
       {label && (
         <styled.span
           color={open ? "primary" : selectedValue ? "textBlack" : "sub"}
+          id={`${dropdownId}-label`}
           textStyle="label2"
         >
           {label}
         </styled.span>
       )}
       <styled.button
+        {...commonProps}
         alignItems="center"
-        aria-controls={dropdownId}
-        aria-expanded={open}
-        aria-haspopup={true}
         cursor="pointer"
         display="flex"
         id={`${dropdownId}-trigger`}
diff --git a/packages/wow-ui/src/components/DropDown/DropDownWrapper.tsx b/packages/wow-ui/src/components/DropDown/DropDownWrapper.tsx
index 291cbcdf..fcbfb9e7 100644
--- a/packages/wow-ui/src/components/DropDown/DropDownWrapper.tsx
+++ b/packages/wow-ui/src/components/DropDown/DropDownWrapper.tsx
@@ -27,7 +27,6 @@ const DropDownWrapper = ({
 
   return (
     <Flex
-      aria-labelledby={`${dropdownId}-trigger`}
       cursor="pointer"
       direction="column"
       gap="xs"