Merge pull request #272 from sparksuite/extra-keyboard-controls

Implement extra keyboard controls

Author: WesCossick

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-accessible-dropdown-menu-hook",
-	"version": "2.2.2",
+	"version": "2.3.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",

src/use-dropdown-menu.test.tsx

@@ -6,9 +6,11 @@ import userEvent from '@testing-library/user-event';
 
 // A mock component for testing the Hook
 const TestComponent: React.FC = () => {
-	const [itemCount, setItemCount] = useState(3);
+	const [itemCount, setItemCount] = useState(4);
 	const { buttonProps, itemProps, isOpen, setIsOpen } = useDropdownMenu(itemCount);
 
+	const clickHandlers: (() => void)[] = [(): void => console.log('Item one clicked'), (): void => setIsOpen(false)];
+
 	return (
 		<React.Fragment>
 			<button {...buttonProps} id='menu-button'>
@@ -21,10 +23,10 @@ const TestComponent: React.FC = () => {
 						{...props}
 						key={i}
 						id={`menu-item-${i + 1}`}
-						onClick={i === 0 ? (): void => setIsOpen(false) : undefined}
-						href={i !== 0 ? 'https://example.com' : undefined}
+						onClick={clickHandlers[i]}
+						href={i > 1 ? 'https://example.com' : undefined}
 					>
-						Item {i + 1}
+						{i + 1} Item
 					</a>
 				))}
 			</div>
@@ -60,7 +62,7 @@ it('Moves the focus to the first menu item after pressing enter while focused on
 		skipClick: true,
 	});
 
-	expect(screen.getByText('Item 1')).toHaveFocus();
+	expect(screen.getByText('1 Item')).toHaveFocus();
 });
 
 it('Moves the focus to the first menu item after pressing space while focused on the menu button', () => {
@@ -74,7 +76,7 @@ it('Moves the focus to the first menu item after pressing space while focused on
 		skipClick: true,
 	});
 
-	expect(screen.getByText('Item 1')).toHaveFocus();
+	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', () => {
@@ -86,7 +88,7 @@ it('Moves the focus to the first menu item after clicking the menu to open it, t
 
 	userEvent.tab();
 
-	expect(screen.getByText('Item 1')).toHaveFocus();
+	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', () => {
@@ -105,7 +107,7 @@ it('Moves the focus to the first menu item after clicking the menu to open it, t
 		})
 	);
 
-	expect(screen.getByText('Item 1')).toHaveFocus();
+	expect(screen.getByText('1 Item')).toHaveFocus();
 });
 
 it('Sets isOpen to true after pressing enter while focused on the menu button', () => {
@@ -144,7 +146,7 @@ it('Sets isOpen to false after clicking a menu item that calls the state change
 	render(<TestComponent />);
 
 	userEvent.click(screen.getByText('Primary'));
-	userEvent.click(screen.getByText('Item 1'));
+	userEvent.click(screen.getByText('2 Item'));
 
 	expect(screen.getByTestId('is-open-indicator')).toHaveTextContent('false');
 });
@@ -158,18 +160,18 @@ it('Moves the focus to the next element in the menu after pressing the down arro
 		skipClick: true,
 	});
 
-	expect(screen.getByText('Item 1')).toHaveFocus();
+	expect(screen.getByText('1 Item')).toHaveFocus();
 
 	fireEvent(
-		screen.getByText('Item 1'),
+		screen.getByText('1 Item'),
 		new KeyboardEvent('keydown', {
 			key: 'ArrowDown',
 			bubbles: true,
 			cancelable: true,
 		})
 	);
 
-	expect(screen.getByText('Item 2')).toHaveFocus();
+	expect(screen.getByText('2 Item')).toHaveFocus();
 });
 
 it('Moves the focus to the previous element in the menu after pressing the up arrow', () => {
@@ -181,29 +183,29 @@ it('Moves the focus to the previous element in the menu after pressing the up ar
 		skipClick: true,
 	});
 
-	expect(screen.getByText('Item 1')).toHaveFocus();
+	expect(screen.getByText('1 Item')).toHaveFocus();
 
 	fireEvent(
-		screen.getByText('Item 1'),
+		screen.getByText('1 Item'),
 		new KeyboardEvent('keydown', {
 			key: 'ArrowDown',
 			bubbles: true,
 			cancelable: true,
 		})
 	);
 
-	expect(screen.getByText('Item 2')).toHaveFocus();
+	expect(screen.getByText('2 Item')).toHaveFocus();
 
 	fireEvent(
-		screen.getByText('Item 2'),
+		screen.getByText('2 Item'),
 		new KeyboardEvent('keydown', {
 			key: 'ArrowUp',
 			bubbles: true,
 			cancelable: true,
 		})
 	);
 
-	expect(screen.getByText('Item 1')).toHaveFocus();
+	expect(screen.getByText('1 Item')).toHaveFocus();
 });
 
 it('Wraps the focus to the last element when pressing the up arrow at the beginning of the menu', () => {
@@ -215,18 +217,18 @@ it('Wraps the focus to the last element when pressing the up arrow at the beginn
 		skipClick: true,
 	});
 
-	expect(screen.getByText('Item 1')).toHaveFocus();
+	expect(screen.getByText('1 Item')).toHaveFocus();
 
 	fireEvent(
-		screen.getByText('Item 1'),
+		screen.getByText('1 Item'),
 		new KeyboardEvent('keydown', {
 			key: 'ArrowUp',
 			bubbles: true,
 			cancelable: true,
 		})
 	);
 
-	expect(screen.getByText('Item 3')).toHaveFocus();
+	expect(screen.getByText('4 Item')).toHaveFocus();
 });
 
 it('Wraps the focus to the first element when pressing the down arrow at the end of the menu', () => {
@@ -238,29 +240,29 @@ it('Wraps the focus to the first element when pressing the down arrow at the end
 		skipClick: true,
 	});
 
-	expect(screen.getByText('Item 1')).toHaveFocus();
+	expect(screen.getByText('1 Item')).toHaveFocus();
 
 	fireEvent(
-		screen.getByText('Item 1'),
+		screen.getByText('1 Item'),
 		new KeyboardEvent('keydown', {
 			key: 'ArrowUp',
 			bubbles: true,
 			cancelable: true,
 		})
 	);
 
-	expect(screen.getByText('Item 3')).toHaveFocus();
+	expect(screen.getByText('4 Item')).toHaveFocus();
 
 	fireEvent(
-		screen.getByText('Item 3'),
+		screen.getByText('4 Item'),
 		new KeyboardEvent('keydown', {
 			key: 'ArrowDown',
 			bubbles: true,
 			cancelable: true,
 		})
 	);
 
-	expect(screen.getByText('Item 1')).toHaveFocus();
+	expect(screen.getByText('1 Item')).toHaveFocus();
 });
 
 it('Sets isOpen to false after pressing escape while focused on a menu item', () => {
@@ -272,7 +274,7 @@ it('Sets isOpen to false after pressing escape while focused on a menu item', ()
 		skipClick: true,
 	});
 
-	userEvent.type(screen.getByText('Item 1'), '{esc}', {
+	userEvent.type(screen.getByText('1 Item'), '{esc}', {
 		skipClick: true,
 	});
 
@@ -302,7 +304,7 @@ it('Moves the focus to the menu button after pressing escape while focused on a
 		skipClick: true,
 	});
 
-	userEvent.type(screen.getByText('Item 1'), '{esc}', {
+	userEvent.type(screen.getByText('1 Item'), '{esc}', {
 		skipClick: true,
 	});
 
@@ -333,7 +335,7 @@ it('Adds properties to items added after mount', () => {
 
 	userEvent.click(screen.getByText('Add Item'));
 
-	expect(screen.getByText('Item 4')).toHaveAttribute('role', 'menuitem');
+	expect(screen.getByText('4 Item')).toHaveAttribute('role', 'menuitem');
 });
 
 it('Can navigate to a dynamically-added item', () => {
@@ -353,7 +355,16 @@ it('Can navigate to a dynamically-added item', () => {
 	);
 
 	fireEvent(
-		screen.getByText('Item 1'),
+		screen.getByText('1 Item'),
+		new KeyboardEvent('keydown', {
+			key: 'ArrowDown',
+			bubbles: true,
+			cancelable: true,
+		})
+	);
+
+	fireEvent(
+		screen.getByText('2 Item'),
 		new KeyboardEvent('keydown', {
 			key: 'ArrowDown',
 			bubbles: true,
@@ -362,7 +373,7 @@ it('Can navigate to a dynamically-added item', () => {
 	);
 
 	fireEvent(
-		screen.getByText('Item 2'),
+		screen.getByText('3 Item'),
 		new KeyboardEvent('keydown', {
 			key: 'ArrowDown',
 			bubbles: true,
@@ -371,15 +382,15 @@ it('Can navigate to a dynamically-added item', () => {
 	);
 
 	fireEvent(
-		screen.getByText('Item 3'),
+		screen.getByText('4 Item'),
 		new KeyboardEvent('keydown', {
 			key: 'ArrowDown',
 			bubbles: true,
 			cancelable: true,
 		})
 	);
 
-	expect(screen.getByText('Item 4')).toHaveFocus();
+	expect(screen.getByText('5 Item')).toHaveFocus();
 });
 
 it('Ignores keys that buttons don’t need to handle', () => {
@@ -401,9 +412,11 @@ it('Ignores keys that items don’t need to handle', () => {
 		skipClick: true,
 	});
 
-	userEvent.type(screen.getByText('Item 1'), 'Z', {
+	userEvent.type(screen.getByText('1 Item'), 'Z', {
 		skipClick: true,
 	});
+
+	expect(screen.getByText('1 Item')).toHaveFocus();
 });
 
 it('Doesn’t crash when enter press occurs on a menu item', () => {
@@ -415,7 +428,91 @@ it('Doesn’t crash when enter press occurs on a menu item', () => {
 		skipClick: true,
 	});
 
-	userEvent.type(screen.getByText('Item 1'), '{enter}', {
+	userEvent.type(screen.getByText('1 Item'), '{enter}', {
+		skipClick: true,
+	});
+});
+
+it('Closes the menu after pressing enter on a menu item with a click handler', () => {
+	render(<TestComponent />);
+
+	userEvent.tab();
+
+	userEvent.type(screen.getByText('Primary'), '{enter}', {
+		skipClick: true,
+	});
+
+	userEvent.type(screen.getByText('1 Item'), '{enter}', {
+		skipClick: true,
+	});
+
+	expect(screen.getByTestId('is-open-indicator')).toHaveTextContent('false');
+});
+
+it('Activates the click handler of a menu item after pressing enter while focused on it', () => {
+	render(<TestComponent />);
+
+	jest.spyOn(console, 'log');
+
+	userEvent.tab();
+
+	userEvent.type(screen.getByText('Primary'), '{enter}', {
+		skipClick: true,
+	});
+
+	userEvent.type(screen.getByText('1 Item'), '{enter}', {
 		skipClick: true,
 	});
+
+	expect(console.log).toHaveBeenCalledWith('Item one clicked');
+});
+
+it('Closes the menu after pressing space on a menu item with a click handler', () => {
+	render(<TestComponent />);
+
+	userEvent.tab();
+
+	userEvent.type(screen.getByText('Primary'), '{enter}', {
+		skipClick: true,
+	});
+
+	userEvent.type(screen.getByText('1 Item'), '{space}', {
+		skipClick: true,
+	});
+
+	expect(screen.getByTestId('is-open-indicator')).toHaveTextContent('false');
+});
+
+it('Activates the click handler of a menu item after pressing space while focused on it', () => {
+	render(<TestComponent />);
+
+	jest.spyOn(console, 'log');
+
+	userEvent.tab();
+
+	userEvent.type(screen.getByText('Primary'), '{enter}', {
+		skipClick: true,
+	});
+
+	userEvent.type(screen.getByText('1 Item'), '{space}', {
+		skipClick: true,
+	});
+
+	expect(console.log).toHaveBeenCalledWith('Item one clicked');
+});
+
+it('Moves the focus to the menu item with a label that starts with the corresponding character that was pressed', () => {
+	render(<TestComponent />);
+
+	userEvent.tab();
+
+	userEvent.type(screen.getByText('Primary'), '{enter}', {
+		skipClick: true,
+	});
+
+	userEvent.type(screen.getByText('1 Item'), '3', {
+		skipClick: true,
+	});
+
+	expect(screen.getByText('3 Item')).toHaveFocus();
 });