diff --git a/code/core/src/components/components/Select/Select.stories.tsx b/code/core/src/components/components/Select/Select.stories.tsx index 0cf7721783a3..4861d26ae5d1 100644 --- a/code/core/src/components/components/Select/Select.stories.tsx +++ b/code/core/src/components/components/Select/Select.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Button } from 'storybook/internal/components'; +import { Button, Toolbar } from 'storybook/internal/components'; import { LinuxIcon } from '@storybook/icons'; @@ -199,6 +199,113 @@ export const WithSiblings = meta.story({ ), + play: async ({ canvas, step }) => { + const user = userEvent.setup(); + + await step('Open select and select an option', async () => { + const select = canvas.getByRole('button', { name: /Animal/i }); + await user.click(select); + + const listbox = await screen.findByRole('listbox'); + expect(listbox).toBeInTheDocument(); + + const option = within(listbox).getByRole('option', { name: 'Frog' }); + await user.click(option); + }); + + await step('Tab should land on sibling after select', async () => { + const select = canvas.getByRole('button', { name: /Frog/i }); + expect(select).toHaveFocus(); + + await user.tab(); + + const afterButton = canvas.getByRole('button', { name: 'After' }); + expect(afterButton).toHaveFocus(); + }); + + await step('Navigate back and reopen select', async () => { + await user.tab({ shift: true }); + + const select = canvas.getByRole('button', { name: /Frog/i }); + expect(select).toHaveFocus(); + + await user.keyboard('{Enter}'); + + const listbox = await screen.findByRole('listbox'); + expect(listbox).toBeInTheDocument(); + }); + + await step('Escape should return to select trigger', async () => { + await user.keyboard('{Escape}'); + + const select = canvas.getByRole('button', { name: /Frog/i }); + expect(select).toHaveFocus(); + }); + }, +}); + +export const WithSiblingsInToolbar = meta.story({ + name: 'With Siblings in Toolbar', + render: (args) => ( + + +