chore: aria 속성 위치 수정 및 공통 속성으로 빼기

GDSC-Hongik · Sep 21, 2024 · d9f3b89 · d9f3b89
1 parent 79dc371
commit d9f3b89
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 17 deletions.
diff --git 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
@@ -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
@@ -27,7 +27,6 @@ const DropDownWrapper = ({
 
   return (
     <Flex
-      aria-labelledby={`${dropdownId}-trigger`}
       cursor="pointer"
       direction="column"
       gap="xs"