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

Author: francinelucca

.changeset/tricky-ducks-pretend.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+fix(SelectPanel): pass anchorId to AnchoredOverlay

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}

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 : (