Filter select aria label fix (#5122)

* update aria-properties to ensure correct label is passed into ListBox * add changeset
cultureamp · Oct 3, 2024 · 27706c6 · 27706c6
1 parent 7aeab2d
commit 27706c6
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/.changeset/twelve-goats-greet.md b/.changeset/twelve-goats-greet.md
@@ -0,0 +1,5 @@
+---
+"@kaizen/components": patch
+---
+
+Add accessible label fix for selects
diff --git a/packages/components/src/Filter/FilterSelect/FilterSelect.tsx b/packages/components/src/Filter/FilterSelect/FilterSelect.tsx
@@ -78,7 +78,11 @@ export const FilterSelect = <Option extends SelectOption = SelectOption>({
   )
 
   const { buttonProps } = useButton(triggerProps, triggerRef)
-
+  const renderTriggerButtonProps = {
+    ...buttonProps,
+    "aria-labelledby": undefined,
+    "aria-controls": menuProps.id,
+  }
   return (
     <>
       <HiddenSelect label={label} state={state} triggerRef={triggerRef} />
@@ -90,15 +94,17 @@ export const FilterSelect = <Option extends SelectOption = SelectOption>({
             selectedValue: state.selectedItem?.textValue || undefined,
             label,
             isOpen,
-            ...buttonProps,
+            ...renderTriggerButtonProps,
           })
         }
         onMount={setTriggerRef}
         classNameOverride={classNameOverride}
       >
         <FilterContents classNameOverride={styles.filterContents}>
           <SelectProvider<Option> state={state}>
-            <SelectPopoverContents menuProps={menuProps}>
+            <SelectPopoverContents
+              menuProps={{ ...menuProps, "aria-labelledby": buttonProps.id }}
+            >
               {children}
             </SelectPopoverContents>
           </SelectProvider>