From 9e4477b524c402868e0ea0bfac7852071b3b7f0a Mon Sep 17 00:00:00 2001 From: Cory Harper Date: Tue, 27 Jul 2021 11:49:03 -0500 Subject: [PATCH 1/7] added test --- src/use-dropdown-menu.test.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/use-dropdown-menu.test.tsx b/src/use-dropdown-menu.test.tsx index de56266..8a52842 100644 --- a/src/use-dropdown-menu.test.tsx +++ b/src/use-dropdown-menu.test.tsx @@ -126,6 +126,18 @@ it('Sets isOpen to true after pressing enter while focused on the menu button', expect(screen.getByTestId('is-open-indicator')).toHaveTextContent('true'); }); +it('Sets isOpen to false after pressing escape while focused on the menu button', () => { + render(); + + userEvent.click(screen.getByText('Primary')); + + userEvent.type(screen.getByText('Primary'), '{esc}', { + skipClick: true, + }); + + expect(screen.getByTestId('is-open-indicator')).toHaveTextContent('false'); +}); + it('Sets isOpen to true after pressing space while focused on the menu button', () => { render(); From 9b91ec7fd5d10a81833d926df0ddba18c635741b Mon Sep 17 00:00:00 2001 From: Cory Harper Date: Tue, 27 Jul 2021 11:53:14 -0500 Subject: [PATCH 2/7] added logic for escape key while menu button was focused --- src/use-dropdown-menu.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/use-dropdown-menu.ts b/src/use-dropdown-menu.ts index 9199d1c..ae3b790 100644 --- a/src/use-dropdown-menu.ts +++ b/src/use-dropdown-menu.ts @@ -118,17 +118,24 @@ export default function useDropdownMenu(itemCount: number): DropdownMenuResponse if (isKeyboardEvent(e)) { const { key } = e; - if (!['Enter', ' ', 'Tab', 'ArrowDown'].includes(key)) { + if (!['Enter', ' ', 'Tab', 'ArrowDown', 'Escape'].includes(key)) { return; } if ((key === 'Tab' || key === 'ArrowDown') && clickedOpen.current && isOpen) { e.preventDefault(); moveFocus(0); - } else if (key !== 'Tab') { + } + + if (key === 'Enter' || key === ' ') { e.preventDefault(); setIsOpen(true); } + + if (key === 'Escape') { + e.preventDefault(); + setIsOpen(false); + } } else { clickedOpen.current = !isOpen; setIsOpen(!isOpen); From ae36769acfd93392e0d390260dbb85ca40d4d00e Mon Sep 17 00:00:00 2001 From: Cory Harper Date: Tue, 27 Jul 2021 11:54:22 -0500 Subject: [PATCH 3/7] formatting --- src/use-dropdown-menu.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/use-dropdown-menu.ts b/src/use-dropdown-menu.ts index ae3b790..512f10f 100644 --- a/src/use-dropdown-menu.ts +++ b/src/use-dropdown-menu.ts @@ -126,7 +126,7 @@ export default function useDropdownMenu(itemCount: number): DropdownMenuResponse e.preventDefault(); moveFocus(0); } - + if (key === 'Enter' || key === ' ') { e.preventDefault(); setIsOpen(true); From 5b16a376f845a480de07f5962d6304f01e8d1fca Mon Sep 17 00:00:00 2001 From: Cory Harper Date: Tue, 27 Jul 2021 12:32:41 -0500 Subject: [PATCH 4/7] bumped minor version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3d9b05d..6851e88 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-accessible-dropdown-menu-hook", - "version": "2.3.0", + "version": "2.4.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", From b2c058e2edd145a6b4dedcb1851d59c3caf1ced0 Mon Sep 17 00:00:00 2001 From: Cory Harper Date: Tue, 27 Jul 2021 12:35:00 -0500 Subject: [PATCH 5/7] adapted documentation --- website/src/pages/demo.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/website/src/pages/demo.tsx b/website/src/pages/demo.tsx index 8aceac5..3b02030 100644 --- a/website/src/pages/demo.tsx +++ b/website/src/pages/demo.tsx @@ -70,6 +70,9 @@ const Demo: React.FC = () => { If the menu is revealed with the mouse, the first menu item can be focused by pressing tab / arrow down +
  • + If the menu is revealed with the mouse, the menu can be be closed by pressing escape +
  • Once focus is in the menu… From 551a2a1dba8cd771b2e92fd89e6f0794f91f173a Mon Sep 17 00:00:00 2001 From: Cory Harper Date: Tue, 27 Jul 2021 12:41:44 -0500 Subject: [PATCH 6/7] formatting --- website/src/pages/demo.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/website/src/pages/demo.tsx b/website/src/pages/demo.tsx index 3b02030..e0a0ddc 100644 --- a/website/src/pages/demo.tsx +++ b/website/src/pages/demo.tsx @@ -70,9 +70,7 @@ const Demo: React.FC = () => { If the menu is revealed with the mouse, the first menu item can be focused by pressing tab / arrow down
    • -
  • - If the menu is revealed with the mouse, the menu can be be closed by pressing escape -
    • +
  • If the menu is revealed with the mouse, the menu can be be closed by pressing escape
  • Once focus is in the menu… From ea6c128f8ec0e7a343b49189d6a37f5fc0367e39 Mon Sep 17 00:00:00 2001 From: Cory Harper <42228018+corymharper@users.noreply.github.com> Date: Wed, 28 Jul 2021 15:55:47 -0500 Subject: [PATCH 7/7] Update package.json Co-authored-by: Wes Cossick --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6851e88..b458fc6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-accessible-dropdown-menu-hook", - "version": "2.4.0", + "version": "2.3.1", "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",