a11y(Select): forward describedBy to the native select element

SelectProps exposed only `helpText`, which renders visible help. A consumer
had no way to associate the control with an existing description element
(e.g. a cross-field dependency hint such as "select a district first to
enable this field") via aria-describedby without rendering visible text.

Add an optional `describedBy` prop and merge it, space-separated, with the
ids already generated for `helpText` and `error` rather than overwriting
them. No visual change when the prop is unset. Adds a Storybook story.

Unblocks IDS-DRR-Frontend ACC-003.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: jpmckinney

packages/opub-ui/src/components/Select/Select.stories.tsx

@@ -115,6 +115,26 @@ export function Disabled({ ...props }) {
 //   );
 // }
 
+export function WithDescribedBy({ ...props }) {
+  const options = [
+    { label: 'Block A', value: 'a' },
+    { label: 'Block B', value: 'b' },
+  ];
+
+  return (
+    <>
+      <p id="block-dependency-hint">Select a district first to enable this field.</p>
+      <Select
+        label="Block"
+        name="select-1"
+        describedBy="block-dependency-hint"
+        options={options}
+        {...props}
+      />
+    </>
+  );
+}
+
 export function Error({ ...props }) {
   const [selected, setSelected] = useState('Bangaluru');
 

packages/opub-ui/src/components/Select/Select.tsx

@@ -27,6 +27,7 @@ export const Select = forwardRef(
       labelInline,
       disabled,
       helpText,
+      describedBy: describedByProp,
       placeholder,
       id: idProp,
       name,
@@ -76,6 +77,10 @@ export const Select = forwardRef(
       describedBy.push(`${id}Error`);
     }
 
+    if (describedByProp) {
+      describedBy.push(describedByProp);
+    }
+
     const options = optionsProp || [];
     let normalizedOptions = options.map(normalizeOption);
 

packages/opub-ui/src/types/select.ts

@@ -45,6 +45,8 @@ export interface SelectProps {
   disabled?: boolean;
   /** Additional text to aide in use */
   helpText?: React.ReactNode;
+  /** ID(s) forwarded to the native select as `aria-describedby`, merged with the `helpText`/`error` ids */
+  describedBy?: string;
   /** Example text to display as placeholder */
   placeholder?: string;
   /** ID for form input */