@@ -348,119 +348,3 @@ export const FormSubmission: Story = {
348348 } ) ;
349349 } ,
350350} ;
351-
352- export const KeyboardNavigation : Story = {
353- parameters : {
354- docs : {
355- description : {
356- story : 'Test keyboard navigation with arrow keys and Enter selection.' ,
357- } ,
358- } ,
359- } ,
360- decorators : [ selectRouterDecorator ] ,
361- play : async ( { canvasElement, step } ) => {
362- const canvas = within ( canvasElement ) ;
363-
364- await step ( 'Test keyboard navigation on Custom Region select' , async ( ) => {
365- // Open the Custom Region select
366- const regionSelect = canvas . getByLabelText ( 'Custom Region' ) ;
367- await userEvent . click ( regionSelect ) ;
368-
369- // Verify the dropdown is open and input is focused
370- const listbox = await within ( document . body ) . findByRole ( 'listbox' ) ;
371- expect ( listbox ) . toBeInTheDocument ( ) ;
372-
373- const searchInput = within ( listbox ) . getByPlaceholderText ( 'Search...' ) ;
374- expect ( searchInput ) . toHaveFocus ( ) ;
375-
376- // Verify first item is active by default (should have aria-activedescendant)
377- const firstOptionId = searchInput . getAttribute ( 'aria-activedescendant' ) ;
378- expect ( firstOptionId ) . toBeTruthy ( ) ;
379-
380- // Verify the first option exists and has the correct ID
381- const firstOption = within ( listbox ) . getByRole ( 'option' , { name : 'Alabama' } ) ;
382- expect ( firstOption ) . toHaveAttribute ( 'id' , firstOptionId ) ;
383-
384- // Wait a bit for the component to fully initialize and ensure it's stable
385- await new Promise ( resolve => setTimeout ( resolve , 500 ) ) ;
386-
387- // Check that an option is active (the test environment may trigger keyboard events)
388- const currentActiveOptionId = searchInput . getAttribute ( 'aria-activedescendant' ) ;
389- expect ( currentActiveOptionId ) . toBeTruthy ( ) ;
390-
391- // Find the currently active option and check it immediately
392- const currentActiveOption = document . getElementById ( currentActiveOptionId ! ) ;
393- expect ( currentActiveOption ) . toBeTruthy ( ) ;
394-
395- // Check the data-active attribute immediately to avoid timing issues
396- expect ( currentActiveOption ) . toHaveAttribute ( 'data-active' , 'true' ) ;
397- } ) ;
398-
399- await step ( 'Navigate with arrow keys' , async ( ) => {
400- const listbox = within ( document . body ) . getByRole ( 'listbox' ) ;
401- const searchInput = within ( listbox ) . getByPlaceholderText ( 'Search...' ) ;
402-
403- // Press ArrowDown twice to move to the third item
404- await userEvent . keyboard ( '{ArrowDown}' ) ;
405- await userEvent . keyboard ( '{ArrowDown}' ) ;
406-
407- // Wait for React to re-render with the new activeIndex
408- await new Promise ( resolve => setTimeout ( resolve , 100 ) ) ;
409-
410- // Re-query the search input to get the fresh DOM state
411- const listboxAfterNavigation = within ( document . body ) . getByRole ( 'listbox' ) ;
412- const searchInputAfterNavigation = within ( listboxAfterNavigation ) . getByPlaceholderText ( 'Search...' ) ;
413-
414- // Verify the active item has changed
415- const activeOptionId = searchInputAfterNavigation . getAttribute ( 'aria-activedescendant' ) ;
416- const activeOption = document . getElementById ( activeOptionId ! ) ;
417- expect ( activeOption ) . toHaveAttribute ( 'data-active' , 'true' ) ;
418-
419- // Should be the third option (index 2)
420- expect ( activeOption ) . toHaveAttribute ( 'data-index' , '2' ) ;
421- } ) ;
422-
423- await step ( 'Select with Enter key' , async ( ) => {
424- const listbox = within ( document . body ) . getByRole ( 'listbox' ) ;
425- const searchInput = within ( listbox ) . getByPlaceholderText ( 'Search...' ) ;
426-
427- // Press Enter to select the active item
428- await userEvent . keyboard ( '{Enter}' ) ;
429-
430- // Wait for the dropdown to close
431- await new Promise ( resolve => setTimeout ( resolve , 100 ) ) ;
432-
433- // Verify the dropdown closed and the trigger shows the selected value
434- await expect ( ( ) => within ( document . body ) . getByRole ( 'listbox' ) ) . rejects . toThrow ( ) ;
435-
436- const regionSelect = canvas . getByLabelText ( 'Custom Region' ) ;
437- // The third item should be "Arizona" (AL, AK, AZ...)
438- expect ( regionSelect ) . toHaveTextContent ( 'Arizona' ) ;
439- } ) ;
440-
441- await step ( 'Test filtering and active item reset' , async ( ) => {
442- // Open the dropdown again
443- const regionSelect = canvas . getByLabelText ( 'Custom Region' ) ;
444- await userEvent . click ( regionSelect ) ;
445-
446- const listbox = await within ( document . body ) . findByRole ( 'listbox' ) ;
447- const searchInput = within ( listbox ) . getByPlaceholderText ( 'Search...' ) ;
448-
449- // Type to filter
450- await userEvent . type ( searchInput , 'cal' ) ;
451-
452- // Verify the active item reset to the first filtered item
453- const activeOptionId = searchInput . getAttribute ( 'aria-activedescendant' ) ;
454- const activeOption = document . getElementById ( activeOptionId ! ) ;
455- expect ( activeOption ) . toHaveAttribute ( 'data-index' , '0' ) ;
456- expect ( activeOption ) . toHaveTextContent ( 'California' ) ;
457-
458- // Press Enter to select the filtered item
459- await userEvent . keyboard ( '{Enter}' ) ;
460-
461- // Verify selection
462- await expect ( ( ) => within ( document . body ) . getByRole ( 'listbox' ) ) . rejects . toThrow ( ) ;
463- expect ( regionSelect ) . toHaveTextContent ( 'California' ) ;
464- } ) ;
465- } ,
466- } ;
0 commit comments