Adds FormControl's "Auto-Wiring" to SelectPanel v2 Component

.changeset/afraid-beds-lick.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+experimental/SelectPanel + FormControl: Automatically wires SelectPanel v2 to the accessibility and validation provided by the FormControl component it's nested within

packages/react/src/drafts/SelectPanel2/SelectPanel.examples.stories.tsx

@@ -847,6 +847,38 @@ export const NestedSelection = () => {
   )
 }
 
+export const WithinForm = () => {
+  const [selectedTag, setSelectedTag] = React.useState<string>()
+
+  const onSubmit = () => {
+    if (!selectedTag) return
+    data.ref = selectedTag // pretending to persist changes
+  }
+
+  const itemsToShow = data.tags
+
+  return (
+    <>
+      <h1>Within Form</h1>
+
+      <FormControl>
+        <FormControl.Label>SelectPanel within FormControl</FormControl.Label>
+        <SelectPanel title="Choose a tag" selectionVariant="instant" onSubmit={onSubmit}>
+          <SelectPanel.Button leadingVisual={TagIcon}>{selectedTag || 'Choose a tag'}</SelectPanel.Button>
+
+          <ActionList>
+            {itemsToShow.map(tag => (
+              <ActionList.Item key={tag.id} onSelect={() => setSelectedTag(tag.id)} selected={selectedTag === tag.id}>
+                {tag.name}
+              </ActionList.Item>
+            ))}
+          </ActionList>
+        </SelectPanel>
+      </FormControl>
+    </>
+  )
+}
+
 export const CreateNewRow = () => {
   const initialSelectedLabels = data.issue.labelIds // mock initial state: has selected labels
   const [selectedLabelIds, setSelectedLabelIds] = React.useState<string[]>(initialSelectedLabels)

packages/react/src/drafts/SelectPanel2/SelectPanel.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {ThemeProvider, ActionList} from '../../'
+import {ThemeProvider, ActionList, FormControl} from '../../'
 import type {RenderResult} from '@testing-library/react'
 import {render} from '@testing-library/react'
 import type {UserEvent} from '@testing-library/user-event'
@@ -59,6 +59,15 @@ const Fixture = ({onSubmit, onCancel}: Pick<SelectPanelProps, 'onSubmit' | 'onCa
   )
 }
 
+function SelectPanelWithForm(): JSX.Element {
+  return (
+    <FormControl>
+      <FormControl.Label>Select Panel Label</FormControl.Label>
+      <Fixture />
+    </FormControl>
+  )
+}
+
 describe('SelectPanel', () => {
   it('renders Button by default', async () => {
     const container = render(<Fixture />)
@@ -148,4 +157,12 @@ describe('SelectPanel', () => {
     expect(mockOnCancel).toHaveBeenCalledTimes(1)
     expect(mockOnSubmit).toHaveBeenCalledTimes(0)
   })
+
+  it('SelectPanel within FormControl should be labelled by FormControl.Label', async () => {
+    const component = render(<SelectPanelWithForm />)
+    const button = component.getByLabelText('Select Panel Label')
+    expect(button).toBeVisible()
+    const buttonByRole = component.getByRole('button')
+    expect(button.id).toBe(buttonByRole.id)
+  })
 })

packages/react/src/drafts/SelectPanel2/SelectPanel.tsx

@@ -1,8 +1,21 @@
-import React from 'react'
+import React, {useEffect, useState} from 'react'
 import {SearchIcon, XCircleFillIcon, XIcon, FilterRemoveIcon, AlertIcon, ArrowLeftIcon} from '@primer/octicons-react'
 
 import type {ButtonProps, TextInputProps, ActionListProps, LinkProps, CheckboxProps} from '../../index'
-import {Button, IconButton, Heading, Box, Tooltip, TextInput, Spinner, Text, Octicon, Link, Checkbox} from '../../index'
+import {
+  Button,
+  IconButton,
+  Heading,
+  Box,
+  Tooltip,
+  TextInput,
+  Spinner,
+  Text,
+  Octicon,
+  Link,
+  Checkbox,
+  useFormControlForwardedProps,
+} from '../../index'
 import {ActionListContainerContext} from '../../ActionList/ActionListContainerContext'
 import {useSlots} from '../../hooks/useSlots'
 import {useProvidedRefOrCreate, useId, useAnchoredPosition} from '../../hooks'
@@ -13,6 +26,7 @@ import {invariant} from '../../utils/invariant'
 import {Status} from '../../internal/components/Status'
 import {useResponsiveValue} from '../../hooks/useResponsiveValue'
 import type {ResponsiveValue} from '../../hooks/useResponsiveValue'
+import VisuallyHidden from '../../_VisuallyHidden'
 
 const SelectPanelContext = React.createContext<{
   title: string
@@ -337,7 +351,35 @@ const Panel: React.FC<SelectPanelProps> = ({
 }
 
 const SelectPanelButton = React.forwardRef<HTMLButtonElement, ButtonProps>((props, anchorRef) => {
-  return <Button ref={anchorRef} {...props} />
+  const inputProps = useFormControlForwardedProps(props)
+  const [labelId, setLabelId] = useState('')
+  useEffect(() => {
+    const label = document.querySelector(`[for='${inputProps.id}']`)
+    if (label) {
+      if (label.id) {
+        setLabelId(label.id)
+      } else {
+        const newLabelId = `${inputProps.id}--select-panel-button-label`
+        label.id = newLabelId
+        setLabelId(newLabelId)
+      }
+    }
+  }, [inputProps.id])
+
+  const punctuationId = `${inputProps.id}--select-panel-button-punctuation`
+  const punctuation = ','
+  if (inputProps.id && labelId) {
+    return (
+      <>
+        <VisuallyHidden id={punctuationId} aria-hidden="true">
+          {punctuation}
+        </VisuallyHidden>
+        <Button ref={anchorRef} aria-labelledby={`${labelId} ${punctuationId} ${inputProps.id}`} {...inputProps} />
+      </>
+    )
+  } else {
+    return <Button ref={anchorRef} {...props} />
+  }
 })
 
 const SelectPanelHeader: React.FC<React.PropsWithChildren & {onBack?: () => void}> = ({children, onBack, ...props}) => {