fix(dashboard): labelled inputs keep a caller's own id and description

What the review caught: a caller passing id or aria-describedby to
InputWithLabel overrode the generated attributes on the input while the
label and message still used the generated id, breaking the association.
The caller's id now names the field everywhere, and its description is kept
with the message id added after it. The combobox's id and aria-describedby
props are documented as applying to the built-in trigger.

Author: lindesvard

apps/start/src/components/forms/input-with-label.test.tsx

@@ -23,6 +23,25 @@ describe('InputWithLabel', () => {
     expect(message?.id).not.toMatch(/\s/);
   });
 
+  test('keeps a caller-supplied id and description and adds the message to them', () => {
+    const { container } = render(
+      <InputWithLabel
+        aria-describedby="outside-note"
+        error="Required"
+        id="client-name"
+        label="Client name"
+      />
+    );
+    const input = container.querySelector('input');
+    expect(input?.id).toBe('client-name');
+    expect(container.querySelector('label')?.getAttribute('for')).toBe(
+      'client-name'
+    );
+    expect(input?.getAttribute('aria-describedby')).toBe(
+      'outside-note client-name-message'
+    );
+  });
+
   test('omits aria-describedby when there is nothing to describe', () => {
     const { container } = render(<InputWithLabel label="Client name" />);
     expect(

apps/start/src/components/forms/input-with-label.tsx

@@ -66,7 +66,13 @@ export const WithLabel = ({
 export const InputWithLabel = forwardRef<HTMLInputElement, InputWithLabelProps>(
   ({ className, label, hint, info, error, ...inputProps }, ref) => {
     const hasMessage = Boolean(error ?? hint);
-    const fieldId = useId();
+    const generatedId = useId();
+    // A caller's own id and description are kept; the message is added to them.
+    const fieldId = inputProps.id ?? generatedId;
+    const describedBy =
+      [inputProps['aria-describedby'], hasMessage && fieldMessageId(fieldId)]
+        .filter(Boolean)
+        .join(' ') || undefined;
     return (
       <WithLabel
         className={className}
@@ -77,11 +83,11 @@ export const InputWithLabel = forwardRef<HTMLInputElement, InputWithLabelProps>(
         label={label}
       >
         <Input
-          aria-describedby={hasMessage ? fieldMessageId(fieldId) : undefined}
           error={error}
-          id={fieldId}
           ref={ref}
           {...inputProps}
+          aria-describedby={describedBy}
+          id={fieldId}
         />
       </WithLabel>
     );

apps/start/src/components/ui/combobox.tsx

@@ -40,7 +40,10 @@ export interface ComboboxProps<T> {
   portal?: boolean;
   error?: string;
   disabled?: boolean;
-  /** Lets a label and a hint point at the trigger. */
+  /**
+   * Let a label and a hint point at the built-in trigger. A custom trigger
+   * passed as `children` carries its own id and description.
+   */
   id?: string;
   'aria-describedby'?: string;
 }