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 ( { 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 = { + "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 && ( {label} )}