diff --git a/packages/showcase/src/stories/Menu.stories.ts b/packages/showcase/src/stories/Menu.stories.ts index 78289708..3590c023 100644 --- a/packages/showcase/src/stories/Menu.stories.ts +++ b/packages/showcase/src/stories/Menu.stories.ts @@ -7,6 +7,7 @@ import { } from '@ferrlabs/ui-ng'; import type { Meta, StoryObj } from '@storybook/angular'; import { moduleMetadata } from '@storybook/angular'; +import { expect, userEvent, waitFor, within } from 'storybook/test'; const meta: Meta = { title: 'Overlays/Menu', @@ -50,3 +51,52 @@ type Story = StoryObj; export const Default: Story = {}; export const AlignEnd: Story = { args: { align: 'end' } }; + +const keyCodes: Record = { + Escape: 27, + End: 35, + Home: 36, + ArrowUp: 38, + ArrowDown: 40, +}; + +function press(key: string): void { + document.activeElement?.dispatchEvent( + new KeyboardEvent('keydown', { + key, + keyCode: keyCodes[key], + bubbles: true, + cancelable: true, + }), + ); +} + +export const KeyboardNavigation: Story = { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + const overlay = within(canvasElement.ownerDocument.body); + const trigger = canvas.getByRole('button', { name: 'Actions' }); + + trigger.focus(); + await userEvent.keyboard('{Enter}'); + const first = await overlay.findByRole('menuitem', { name: 'Trigger now' }); + await waitFor(() => expect(first).toHaveFocus()); + + press('ArrowDown'); + await expect(overlay.getByRole('menuitem', { name: 'Trigger with overrides' })).toHaveFocus(); + + press('End'); + await expect(overlay.getByRole('menuitem', { name: 'Delete agent' })).toHaveFocus(); + + press('ArrowDown'); + await expect(first).toHaveFocus(); + + press('Home'); + press('ArrowUp'); + await expect(overlay.getByRole('menuitem', { name: 'Delete agent' })).toHaveFocus(); + + press('Escape'); + await waitFor(() => expect(overlay.queryByRole('menu')).toBeNull()); + await expect(trigger).toHaveFocus(); + }, +}; diff --git a/packages/ui-ng/src/lib/brand-dropdown/brand-dropdown.component.ts b/packages/ui-ng/src/lib/brand-dropdown/brand-dropdown.component.ts index 5d183b57..7801ac48 100644 --- a/packages/ui-ng/src/lib/brand-dropdown/brand-dropdown.component.ts +++ b/packages/ui-ng/src/lib/brand-dropdown/brand-dropdown.component.ts @@ -59,7 +59,6 @@ interface BrandRow {