diff --git a/package.json b/package.json index 28d28f2..658f6c9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-accessible-dropdown-menu-hook", - "version": "3.2.0", + "version": "4.0.0", "description": "A simple Hook for creating fully accessible dropdown menus in React", "main": "dist/use-dropdown-menu.js", "types": "dist/use-dropdown-menu.d.ts", diff --git a/src/use-dropdown-menu.test.tsx b/src/use-dropdown-menu.test.tsx index 02bf7c5..19aaee7 100644 --- a/src/use-dropdown-menu.test.tsx +++ b/src/use-dropdown-menu.test.tsx @@ -95,16 +95,16 @@ it('Moves the focus to the first menu item after pressing space while focused on expect(screen.getByText('1 Item')).toHaveFocus(); }); -it('Moves the focus to the first menu item after clicking the menu to open it', async () => { - const { user } = setup(); +it('Moves the focus to the first menu item after clicking the menu to open it, if `focusFirstItemOnClick` is specified', async () => { + const { user } = setup(); await user.click(screen.getByText('Primary')); expect(screen.getByText('1 Item')).toHaveFocus(); }); -it('Moves the focus to the first menu item after clicking the menu to open it, then pressing tab while focused on the menu button, if `disableFocusFirstItemOnClick` is specified', async () => { - const { user } = setup(); +it('Moves the focus to the first menu item after clicking the menu to open it, then pressing tab while focused on the menu button', async () => { + const { user } = setup(); await user.click(screen.getByText('Primary')); @@ -115,8 +115,8 @@ it('Moves the focus to the first menu item after clicking the menu to open it, t expect(screen.getByText('1 Item')).toHaveFocus(); }); -it('Moves the focus to the first menu item after clicking the menu to open it, then pressing arrow down while focused on the menu button, if `disableFocusFirstItemOnClick` is specified', async () => { - const { user } = setup(); +it('Moves the focus to the first menu item after clicking the menu to open it, then pressing arrow down while focused on the menu button', async () => { + const { user } = setup(); await user.click(screen.getByText('Primary')); @@ -308,6 +308,8 @@ it('Can navigate to a dynamically-added item', async () => { await user.click(screen.getByText('Primary')); + await user.keyboard('{ArrowDown}'); + for (let i = 0; i < 4; i += 1) { await user.keyboard('{ArrowDown}'); } diff --git a/src/use-dropdown-menu.ts b/src/use-dropdown-menu.ts index 3f1b409..31c0281 100644 --- a/src/use-dropdown-menu.ts +++ b/src/use-dropdown-menu.ts @@ -12,7 +12,7 @@ interface ButtonProps // A custom Hook that abstracts away the listeners/controls for dropdown menus export interface DropdownMenuOptions { - disableFocusFirstItemOnClick?: boolean; + focusFirstItemOnClick?: boolean; } interface DropdownMenuResponse { @@ -64,7 +64,7 @@ export default function useDropdownMenu { await expect(page.title()).resolves.toMatch('Browser'); }); -it('Focuses the first menu item when menu button is clicked', async () => { +it('Maintains focus when menu button is clicked', async () => { await page.click('#menu-button'); await menuOpen(); - expect(await currentFocusID()).toBe('menu-item-1'); + expect(await currentFocusID()).toBe('menu-button'); }); it('Focuses on the menu button after pressing escape', async () => { diff --git a/website/docs/design/options.md b/website/docs/design/options.md index 1dea6c8..ce37911 100644 --- a/website/docs/design/options.md +++ b/website/docs/design/options.md @@ -6,14 +6,14 @@ You can customize the behavior with options, passed as the second argument. Option | Default | Possible values :--- | :--- | :--- -`disableFocusFirstItemOnClick` | `false` | `boolean` +`focusFirstItemOnClick` | `false` | `boolean` Option | Explanation :--- | :--- -`disableFocusFirstItemOnClick` | If specified as `true` the default behavior of focusing the first menu item on click will be disabled. The menu button will instead retain focus. +`focusFirstItemOnClick` | If specified as `true`, the first menu item will be focused when the menu is opened via a click (in addition to via a keyboard interaction). ```js useDropdownMenu(numberOfItems, { - disableFocusFirstItemOnClick: true, + focusFirstItemOnClick: true, }); ``` \ No newline at end of file