a11y: add triggerId and label/description props to Select

Allows external <label for="..."> to point to the select's trigger
<button> via a known id. Also adds label/description rendering
support inside AriaSelect for accessible form patterns.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: mfo

app/javascript/components/ComboBox.tsx

@@ -79,13 +79,15 @@ export function ComboBox({
   ariaLabelledbyPrefix,
   description,
   className,
+  inputId,
   inputRef,
   isLoading,
   isOpen,
   placeholder,
   items,
   ...props
 }: ComboBoxProps & {
+  inputId?: string;
   inputRef?: RefObject<HTMLInputElement | null>;
   isOpen?: boolean;
   placeholder?: string;
@@ -119,6 +121,7 @@ export function ComboBox({
       ) : null}
       <div className="fr-ds-combobox__input" style={{ position: 'relative' }}>
         <Input
+          id={inputId}
           className="fr-select fr-autocomplete"
           ref={inputRef}
           aria-busy={isLoading}

app/javascript/components/Select.tsx

@@ -3,6 +3,8 @@ import {
   Autocomplete,
   SelectValue,
   Button,
+  Label,
+  Text,
   Popover,
   Virtualizer,
   ListLayout,
@@ -42,6 +44,9 @@ type SelectProps<M extends SelectionMode = 'single'> = AriaSelectProps<
   items?: Item[];
   sections?: Section[];
   value: M extends 'single' ? string | null : string[];
+  label?: string;
+  description?: string;
+  triggerId?: string;
   labelId?: string;
   ariaLabelledbyPrefix?: string;
   alwaysShowKey?: string;
@@ -51,6 +56,9 @@ type AutocompleteFilter = NonNullable<AutocompleteProps<Item>['filter']>;
 function Select<M extends SelectionMode = 'single'>({
   items,
   sections,
+  label,
+  description,
+  triggerId,
   labelId,
   ariaLabelledbyPrefix,
   alwaysShowKey,
@@ -77,12 +85,22 @@ function Select<M extends SelectionMode = 'single'>({
 
   return (
     <AriaSelect {...props}>
+      {label ? (
+        <Label className="fr-label">
+          {label}
+          {description ? (
+            <Text slot="description" className="fr-hint-text">
+              {description}
+            </Text>
+          ) : null}
+        </Label>
+      ) : null}
       {props.selectionMode == 'single' ? (
-        <Button className="fr-select">
+        <Button id={triggerId} className="fr-select">
           <SelectValue />
         </Button>
       ) : (
-        <MultipleSelectValue />
+        <MultipleSelectValue triggerId={triggerId} />
       )}
       <Popover
         className="react-aria-Popover select-popover"
@@ -118,13 +136,13 @@ function Select<M extends SelectionMode = 'single'>({
   );
 }
 
-function MultipleSelectValue() {
+function MultipleSelectValue({ triggerId }: { triggerId?: string }) {
   const selectButtonRef = useRef<HTMLButtonElement>(null);
   return (
     <SelectValue<Item>>
       {({ selectedItems, state, defaultChildren }) => (
         <>
-          <Button className="fr-select" ref={selectButtonRef}>
+          <Button id={triggerId} className="fr-select" ref={selectButtonRef}>
             <span className="react-aria-SelectValue" data-placeholder>
               <Plural
                 value={selectedItems.length}

app/javascript/components/react-aria/props.ts

@@ -33,6 +33,7 @@ export type Section = { label: string; items: Item[] };
 const ComboBoxPropsSchema = s.partial(
   s.object({
     id: s.string(),
+    inputId: s.string(),
     className: s.string(),
     name: s.string(),
     label: s.string(),
@@ -107,8 +108,10 @@ const SelectProps = s.partial(
     items: s.union([s.array(Item), ArrayOfStrings, ArrayOfTuples]),
     sections: s.array(Section),
     id: s.string(),
+    triggerId: s.string(),
     className: s.string(),
     name: s.string(),
+    label: s.string(),
     description: s.string(),
     isRequired: s.boolean(),
     isDisabled: s.boolean(),