fix(SelectPanel): pass anchorId to AnchoredOverlay (#5549)

* fix(SelectPanel): pass anchorId to AnchoredOverlay * Create tricky-ducks-pretend.md * docs(FormControl): correct selectPanel example aria-labelledby * docs(FormControl): small fix to selectPanel story
primer · Jan 23, 2025 · 16c572e · 16c572e
1 parent bd405df
commit 16c572e
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/.changeset/tricky-ducks-pretend.md b/.changeset/tricky-ducks-pretend.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+fix(SelectPanel): pass anchorId to AnchoredOverlay
diff --git a/packages/react/src/FormControl/FormControl.features.stories.tsx b/packages/react/src/FormControl/FormControl.features.stories.tsx
@@ -314,18 +314,19 @@ export const WithSelectPanel = () => {
 
   return (
     <FormControl required>
-      <FormControl.Label>Select Labels</FormControl.Label>
+      <FormControl.Label id="select_panel_label">Select Labels</FormControl.Label>
       <SelectPanel
         title="Select labels"
         subtitle="Use labels to organize issues and pull requests"
-        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
+        renderAnchor={({children, id, ...anchorProps}) => (
           <Button
             trailingAction={TriangleDownIcon}
-            aria-labelledby={` ${ariaLabelledBy}`}
+            aria-labelledby={`select_panel_label selectpanel_wrapper`}
+            id={id}
             {...anchorProps}
             aria-haspopup="dialog"
           >
-            {children ?? 'Select Labels'}
+            <span id="selectpanel_wrapper">{children ?? 'Select Labels'}</span>
           </Button>
         )}
         open={open}

diff --git a/packages/react/src/SelectPanel/SelectPanel.tsx b/packages/react/src/SelectPanel/SelectPanel.tsx
@@ -102,6 +102,7 @@ export function SelectPanel({
   overlayProps,
   sx,
   className,
+  id,
   ...listProps
 }: SelectPanelProps): JSX.Element {
   const titleId = useId()
@@ -213,6 +214,7 @@ export function SelectPanel({
         }}
         focusTrapSettings={focusTrapSettings}
         focusZoneSettings={focusZoneSettings}
+        anchorId={id}
       >
         <LiveRegionOutlet />
         {usingModernActionList ? null : (