Fix Select component ARIA roles and test semantics

Author: codegen-sh[bot]

apps/docs/src/remix-hook-form/select-custom.stories.tsx

@@ -9,9 +9,6 @@ import { RemixFormProvider, getValidatedFormData, useRemixForm } from 'remix-hoo
 import { z } from 'zod';
 import { withReactRouterStubDecorator } from '../lib/storybook/react-router-stub';
 
-// Helper function to wait for a short time
-const waitForSelection = async (ms = 50) => new Promise(resolve => setTimeout(resolve, ms));
-
 const formSchema = z.object({
   region: z.string().min(1, 'Please select a region'),
   theme: z.string().min(1, 'Please select a theme'),
@@ -236,17 +233,15 @@ Each custom component should use React.forwardRef to preserve focus, ARIA, and k
       await userEvent.click(themeSelect);
       const purple = await within(document.body).findByRole('option', { name: 'Purple' });
       await userEvent.click(purple);
-      await waitForSelection();
-      expect(themeSelect).toHaveTextContent('Purple');
+      await expect(themeSelect).toHaveTextContent('Purple');
     });
 
     await step('Open and choose Fruit', async () => {
       const fruitSelect = canvas.getByLabelText('Favorite Fruit');
       await userEvent.click(fruitSelect);
       const banana = await within(document.body).findByRole('option', { name: '🍌 Banana' });
       await userEvent.click(banana);
-      await waitForSelection();
-      expect(fruitSelect).toHaveTextContent('🍌 Banana');
+      await expect(fruitSelect).toHaveTextContent('🍌 Banana');
     });
 
     await step('Submit the form', async () => {

apps/docs/src/remix-hook-form/select.test.tsx

@@ -1,9 +1,6 @@
 import { expect, userEvent, within } from '@storybook/test';
 import { StoryContext } from '@storybook/react';
 
-// Helper function to wait for a short time
-const waitForSelection = async (ms = 50) => new Promise(resolve => setTimeout(resolve, ms));
-
 // Test selecting a US state
 export const testUSStateSelection = async ({ canvasElement }: StoryContext) => {
   const canvas = within(canvasElement);
@@ -16,11 +13,8 @@ export const testUSStateSelection = async ({ canvasElement }: StoryContext) => {
   const californiaOption = await within(document.body).findByRole('option', { name: 'California' });
   await userEvent.click(californiaOption);
 
-  // Wait for the selection to be applied
-  await waitForSelection();
-  
-  // Verify the selection
-  expect(stateDropdown).toHaveTextContent('California');
+  // Wait for the popover to close and the selection to be applied
+  await expect(stateDropdown).toHaveTextContent('California');
 };
 
 // Test selecting a Canadian province
@@ -35,11 +29,8 @@ export const testCanadaProvinceSelection = async ({ canvasElement }: StoryContex
   const ontarioOption = await within(document.body).findByRole('option', { name: 'Ontario' });
   await userEvent.click(ontarioOption);
 
-  // Wait for the selection to be applied
-  await waitForSelection();
-  
-  // Verify the selection
-  expect(provinceDropdown).toHaveTextContent('Ontario');
+  // Wait for the popover to close and the selection to be applied
+  await expect(provinceDropdown).toHaveTextContent('Ontario');
 };
 
 // Test form submission
@@ -51,21 +42,21 @@ export const testFormSubmission = async ({ canvasElement }: StoryContext) => {
   await userEvent.click(stateDropdown);
   const californiaOption = await within(document.body).findByRole('option', { name: 'California' });
   await userEvent.click(californiaOption);
-  await waitForSelection();
+  await expect(stateDropdown).toHaveTextContent('California');
 
   // Select a province
   const provinceDropdown = canvas.getByLabelText('Canadian Province');
   await userEvent.click(provinceDropdown);
   const ontarioOption = await within(document.body).findByRole('option', { name: 'Ontario' });
   await userEvent.click(ontarioOption);
-  await waitForSelection();
+  await expect(provinceDropdown).toHaveTextContent('Ontario');
 
   // Select a custom region
   const regionDropdown = canvas.getByLabelText('Custom Region');
   await userEvent.click(regionDropdown);
   const customOption = await within(document.body).findByRole('option', { name: 'New York' });
   await userEvent.click(customOption);
-  await waitForSelection();
+  await expect(regionDropdown).toHaveTextContent('New York');
 
   // Submit the form
   const submitButton = canvas.getByRole('button', { name: 'Submit' });

packages/components/src/ui/select.tsx

@@ -51,6 +51,7 @@ export function Select({
   const triggerRef = React.useRef<HTMLButtonElement>(null);
   const popoverRef = React.useRef<HTMLDivElement>(null);
   const selectedItemRef = React.useRef<HTMLButtonElement>(null);
+  const listboxId = React.useId();
   const [menuWidth, setMenuWidth] = React.useState<number | undefined>(undefined);
 
   React.useEffect(() => {
@@ -117,10 +118,10 @@ export function Select({
             'placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
             className,
           )}
-          // biome-ignore lint/a11y/useAriaPropsForRole: using <button> for PopoverTrigger to ensure keyboard accessibility and focus management
-          // biome-ignore lint/a11y/useSemanticElements: using <button> for PopoverTrigger to ensure keyboard accessibility and focus management
           role="combobox"
+          aria-expanded={popoverState.isOpen}
           aria-haspopup="listbox"
+          aria-controls={popoverState.isOpen ? listboxId : undefined}
           {...buttonProps}
         >
           {selectedOption?.label || placeholder}
@@ -130,8 +131,8 @@ export function Select({
       <PopoverContent
         ref={popoverRef}
         className={cn('z-50 p-0 shadow-md border-0', contentClassName)}
-        // biome-ignore lint/a11y/useSemanticElements: using <div> for PopoverContent to ensure keyboard accessibility and focus management
         role="listbox"
+        id={listboxId}
         style={{ width: menuWidth ? `${menuWidth}px` : undefined }}
       >
         <div className="bg-white p-1.5 rounded-md focus:outline-none sm:text-sm">
@@ -185,8 +186,6 @@ export function Select({
                       isEnterCandidate && 'bg-gray-50',
                       itemClassName,
                     )}
-                    // biome-ignore lint/a11y/useSemanticElements: using <button> for PopoverTrigger to ensure keyboard accessibility and focus management
-                    // biome-ignore lint/a11y/useAriaPropsForRole: using <button> for PopoverTrigger to ensure keyboard accessibility and focus management
                     role="option"
                     aria-selected={isSelected}
                     data-selected={isSelected ? 'true' : 'false'}
@@ -206,3 +205,4 @@ export function Select({
     </Popover>
   );
 }
+