@wordpress/components 25.14.0 → 25.15.1-next.79a6196f.0

package/src/dropdown-menu-v2/test/index.tsx

@@ -2,10 +2,7 @@
  * External dependencies
  */
 import { render, screen, waitFor } from '@testing-library/react';
-import {
-	default as userEvent,
-	PointerEventsCheckLevel,
-} from '@testing-library/user-event';
+import { press, click, hover, type } from '@ariakit/test';
 
 /**
  * WordPress dependencies
@@ -19,12 +16,9 @@ import {
 	DropdownMenu,
 	DropdownMenuCheckboxItem,
 	DropdownMenuItem,
-	DropdownMenuLabel,
-	DropdownMenuRadioGroup,
 	DropdownMenuRadioItem,
 	DropdownMenuSeparator,
-	DropdownSubMenu,
-	DropdownSubMenuTrigger,
+	DropdownMenuGroup,
 } from '..';
 
 const delay = ( delayInMs: number ) => {
@@ -34,23 +28,18 @@ const delay = ( delayInMs: number ) => {
 describe( 'DropdownMenu', () => {
 	// See https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
 	it( 'should follow the WAI-ARIA spec', async () => {
-		// Radio and Checkbox items'
-		const user = userEvent.setup();
-
 		render(
 			<DropdownMenu trigger={ <button>Open dropdown</button> }>
 				<DropdownMenuItem>Dropdown menu item</DropdownMenuItem>
 				<DropdownMenuSeparator />
-				<DropdownSubMenu
+				<DropdownMenu
 					trigger={
-						<DropdownSubMenuTrigger>
-							Dropdown submenu
-						</DropdownSubMenuTrigger>
+						<DropdownMenuItem>Dropdown submenu</DropdownMenuItem>
 					}
 				>
 					<DropdownMenuItem>Dropdown submenu item 1</DropdownMenuItem>
 					<DropdownMenuItem>Dropdown submenu item 2</DropdownMenuItem>
-				</DropdownSubMenu>
+				</DropdownMenu>
 			</DropdownMenu>
 		);
 
@@ -61,11 +50,13 @@ describe( 'DropdownMenu', () => {
 		expect( toggleButton ).toHaveAttribute( 'aria-haspopup', 'menu' );
 		expect( toggleButton ).toHaveAttribute( 'aria-expanded', 'false' );
 
-		await user.click( toggleButton );
+		await click( toggleButton );
 
 		expect( toggleButton ).toHaveAttribute( 'aria-expanded', 'true' );
 
-		expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+		expect(
+			screen.getByRole( 'menu', { name: toggleButton.textContent ?? '' } )
+		).toHaveFocus();
 		expect( screen.getByRole( 'separator' ) ).toHaveAttribute(
 			'aria-orientation',
 			'horizontal'
@@ -78,11 +69,15 @@ describe( 'DropdownMenu', () => {
 		expect( submenuTrigger ).toHaveAttribute( 'aria-haspopup', 'menu' );
 		expect( submenuTrigger ).toHaveAttribute( 'aria-expanded', 'false' );
 
-		await user.hover( submenuTrigger );
+		await hover( submenuTrigger );
 
 		// Wait for the open animation after hovering
 		await waitFor( () =>
-			expect( screen.getAllByRole( 'menu' ) ).toHaveLength( 2 )
+			expect(
+				screen.getByRole( 'menu', {
+					name: submenuTrigger.textContent ?? '',
+				} )
+			).toBeVisible()
 		);
 
 		expect( submenuTrigger ).toHaveAttribute( 'aria-expanded', 'true' );
@@ -93,9 +88,7 @@ describe( 'DropdownMenu', () => {
 	} );
 
 	describe( 'pointer and keyboard interactions', () => {
-		it( 'should open when clicking the trigger', async () => {
-			const user = userEvent.setup();
-
+		it( 'should open and focus the menu when clicking the trigger', async () => {
 			render(
 				<DropdownMenu trigger={ <button>Open dropdown</button> }>
 					<DropdownMenuItem>Dropdown menu item</DropdownMenuItem>
@@ -106,24 +99,52 @@ describe( 'DropdownMenu', () => {
 				name: 'Open dropdown',
 			} );
 
-			// DropdownMenu closed, the content is not displayed
+			// DropdownMenu closed
 			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
-			expect( screen.queryByRole( 'menuitem' ) ).not.toBeInTheDocument();
 
 			// Click to open the menu
-			await user.click( toggleButton );
+			await click( toggleButton );
 
-			// DropdownMenu open, the content is displayed
-			expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
-			expect( screen.getByRole( 'menuitem' ) ).toBeInTheDocument();
+			// DropdownMenu open, focus is on the menu wrapper
+			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
 		} );
 
-		it( 'should open when pressing the arrow down key on the trigger', async () => {
-			const user = userEvent.setup();
+		it( 'should open and focus the first item when pressing the arrow down key on the trigger', async () => {
+			render(
+				<DropdownMenu trigger={ <button>Open dropdown</button> }>
+					<DropdownMenuItem disabled>First item</DropdownMenuItem>
+					<DropdownMenuItem>Second item</DropdownMenuItem>
+					<DropdownMenuItem>Third item</DropdownMenuItem>
+				</DropdownMenu>
+			);
+
+			const toggleButton = screen.getByRole( 'button', {
+				name: 'Open dropdown',
+			} );
+
+			// Move focus on the toggle
+			await press.Tab();
+
+			expect( toggleButton ).toHaveFocus();
+
+			// DropdownMenu closed
+			expect( screen.queryByRole( 'menuitem' ) ).not.toBeInTheDocument();
+
+			await press.ArrowDown();
+
+			// DropdownMenu open, focus is on the first focusable item
+			// (disabled items are still focusable and accessible)
+			expect(
+				screen.getByRole( 'menuitem', { name: 'First item' } )
+			).toHaveFocus();
+		} );
 
+		it( 'should open and focus the first item when pressing the space key on the trigger', async () => {
 			render(
 				<DropdownMenu trigger={ <button>Open dropdown</button> }>
-					<DropdownMenuItem>Dropdown menu item</DropdownMenuItem>
+					<DropdownMenuItem disabled>First item</DropdownMenuItem>
+					<DropdownMenuItem>Second item</DropdownMenuItem>
+					<DropdownMenuItem>Third item</DropdownMenuItem>
 				</DropdownMenu>
 			);
 
@@ -132,50 +153,52 @@ describe( 'DropdownMenu', () => {
 			} );
 
 			// Move focus on the toggle
-			await user.keyboard( '{Tab}' );
+			await press.Tab();
 
 			expect( toggleButton ).toHaveFocus();
 
-			// DropdownMenu closed, the content is not displayed
+			// DropdownMenu closed
 			expect( screen.queryByRole( 'menuitem' ) ).not.toBeInTheDocument();
 
-			await user.keyboard( '{ArrowDown}' );
+			await press.Space();
 
-			// DropdownMenu open, the content is displayed
-			expect( screen.getByRole( 'menuitem' ) ).toBeInTheDocument();
+			// DropdownMenu open, focus is on the first focusable item
+			// (disabled items are still focusable and accessible
+			expect(
+				screen.getByRole( 'menuitem', { name: 'First item' } )
+			).toHaveFocus();
 		} );
 
 		it( 'should close when pressing the escape key', async () => {
-			const user = userEvent.setup();
-
 			render(
-				<DropdownMenu
-					defaultOpen
-					trigger={ <button>Open dropdown</button> }
-				>
+				<DropdownMenu trigger={ <button>Open dropdown</button> }>
 					<DropdownMenuItem>Dropdown menu item</DropdownMenuItem>
 				</DropdownMenu>
 			);
 
-			// The menu is focused automatically when `defaultOpen` is set.
+			const trigger = screen.getByRole( 'button', {
+				name: 'Open dropdown',
+			} );
+
+			await click( trigger );
+
+			// Focuses menu on mouse click, focuses first item on keyboard press
+			// Can be changed with a custom useEffect
 			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
 
 			// Pressing esc will close the menu and move focus to the toggle
-			await user.keyboard( '{Escape}' );
+			await press.Escape();
 
 			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
-			expect(
-				screen.getByRole( 'button', { name: 'Open dropdown' } )
-			).toHaveFocus();
+
+			await waitFor( () =>
+				expect(
+					screen.getByRole( 'button', { name: 'Open dropdown' } )
+				).toHaveFocus()
+			);
 		} );
 
 		it( 'should close when clicking outside of the content', async () => {
-			const user = userEvent.setup( {
-				// Disabling this check otherwise testing-library would complain
-				// when clicking on document.body to close the dropdown menu.
-				pointerEventsCheck: PointerEventsCheckLevel.Never,
-			} );
-
 			render(
 				<DropdownMenu
 					defaultOpen
@@ -188,14 +211,12 @@ describe( 'DropdownMenu', () => {
 			expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
 
 			// Click on the body (ie. outside of the dropdown menu)
-			await user.click( document.body );
+			await click( document.body );
 
 			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
 		} );
 
 		it( 'should close when clicking on a menu item', async () => {
-			const user = userEvent.setup();
-
 			render(
 				<DropdownMenu
 					defaultOpen
@@ -208,18 +229,32 @@ describe( 'DropdownMenu', () => {
 			expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
 
 			// Clicking a menu item will close the menu
-			await user.click( screen.getByRole( 'menuitem' ) );
+			await click( screen.getByRole( 'menuitem' ) );
 
 			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
 		} );
 
-		it( 'should not close when clicking on a disabled menu item', async () => {
-			const user = userEvent.setup( {
-				// Disabling this check otherwise testing-library would complain
-				// when clicking on a disabled element with pointer-events: none
-				pointerEventsCheck: PointerEventsCheckLevel.Never,
-			} );
+		it( 'should not close when clicking on a menu item when the `hideOnClick` prop is set to `false`', async () => {
+			render(
+				<DropdownMenu
+					defaultOpen
+					trigger={ <button>Open dropdown</button> }
+				>
+					<DropdownMenuItem hideOnClick={ false }>
+						Dropdown menu item
+					</DropdownMenuItem>
+				</DropdownMenu>
+			);
+
+			expect( screen.getByRole( 'menu' ) ).toBeVisible();
+
+			// Clicking a menu item will close the menu
+			await click( screen.getByRole( 'menuitem' ) );
+
+			expect( screen.getByRole( 'menu' ) ).toBeVisible();
+		} );
 
+		it( 'should not close when clicking on a disabled menu item', async () => {
 			render(
 				<DropdownMenu
 					defaultOpen
@@ -234,14 +269,12 @@ describe( 'DropdownMenu', () => {
 			expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
 
 			// Clicking a disabled menu item won't close the menu
-			await user.click( screen.getByRole( 'menuitem' ) );
+			await click( screen.getByRole( 'menuitem' ) );
 
 			expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
 		} );
 
 		it( 'should reveal submenu content when hovering over the submenu trigger', async () => {
-			const user = userEvent.setup();
-
 			render(
 				<DropdownMenu
 					defaultOpen
@@ -249,11 +282,11 @@ describe( 'DropdownMenu', () => {
 				>
 					<DropdownMenuItem>Dropdown menu item 1</DropdownMenuItem>
 					<DropdownMenuItem>Dropdown menu item 2</DropdownMenuItem>
-					<DropdownSubMenu
+					<DropdownMenu
 						trigger={
-							<DropdownSubMenuTrigger>
+							<DropdownMenuItem>
 								Dropdown submenu
-							</DropdownSubMenuTrigger>
+							</DropdownMenuItem>
 						}
 					>
 						<DropdownMenuItem>
@@ -262,7 +295,7 @@ describe( 'DropdownMenu', () => {
 						<DropdownMenuItem>
 							Dropdown submenu item 2
 						</DropdownMenuItem>
-					</DropdownSubMenu>
+					</DropdownMenu>
 					<DropdownMenuItem>Dropdown menu item 3</DropdownMenuItem>
 				</DropdownMenu>
 			);
@@ -274,7 +307,7 @@ describe( 'DropdownMenu', () => {
 				} )
 			).not.toBeInTheDocument();
 
-			await user.hover(
+			await hover(
 				screen.getByRole( 'menuitem', { name: 'Dropdown submenu' } )
 			);
 
@@ -287,8 +320,6 @@ describe( 'DropdownMenu', () => {
 		} );
 
 		it( 'should navigate menu items and subitems using the arrow, spacebar and enter keys', async () => {
-			const user = userEvent.setup();
-
 			render(
 				<DropdownMenu
 					defaultOpen
@@ -296,11 +327,11 @@ describe( 'DropdownMenu', () => {
 				>
 					<DropdownMenuItem>Dropdown menu item 1</DropdownMenuItem>
 					<DropdownMenuItem>Dropdown menu item 2</DropdownMenuItem>
-					<DropdownSubMenu
+					<DropdownMenu
 						trigger={
-							<DropdownSubMenuTrigger>
+							<DropdownMenuItem>
 								Dropdown submenu
-							</DropdownSubMenuTrigger>
+							</DropdownMenuItem>
 						}
 					>
 						<DropdownMenuItem>
@@ -309,67 +340,69 @@ describe( 'DropdownMenu', () => {
 						<DropdownMenuItem>
 							Dropdown submenu item 2
 						</DropdownMenuItem>
-					</DropdownSubMenu>
+					</DropdownMenu>
 					<DropdownMenuItem>Dropdown menu item 3</DropdownMenuItem>
 				</DropdownMenu>
 			);
 
 			// The menu is focused automatically when `defaultOpen` is set.
-			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+			await waitFor( () =>
+				expect( screen.getByRole( 'menu' ) ).toHaveFocus()
+			);
 
 			// Arrow up/down selects menu items
 			// The selection wraps around from last to first and viceversa
-			await user.keyboard( '{ArrowDown}' );
+			await press.ArrowDown();
 			expect(
 				screen.getByRole( 'menuitem', { name: 'Dropdown menu item 1' } )
 			).toHaveFocus();
 
-			await user.keyboard( '{ArrowDown}' );
+			await press.ArrowDown();
 			expect(
 				screen.getByRole( 'menuitem', { name: 'Dropdown menu item 2' } )
 			).toHaveFocus();
 
-			await user.keyboard( '{ArrowDown}' );
+			await press.ArrowDown();
 			expect(
 				screen.getByRole( 'menuitem', { name: 'Dropdown submenu' } )
 			).toHaveFocus();
 
-			await user.keyboard( '{ArrowDown}' );
+			await press.ArrowDown();
 			expect(
 				screen.getByRole( 'menuitem', { name: 'Dropdown menu item 3' } )
 			).toHaveFocus();
 
-			await user.keyboard( '{ArrowDown}' );
+			await press.ArrowDown();
 			expect(
 				screen.getByRole( 'menuitem', { name: 'Dropdown menu item 1' } )
 			).toHaveFocus();
 
-			await user.keyboard( '{ArrowUp}' );
+			await press.ArrowUp();
 			expect(
 				screen.getByRole( 'menuitem', { name: 'Dropdown menu item 3' } )
 			).toHaveFocus();
 
-			await user.keyboard( '{ArrowUp}' );
+			await press.ArrowUp();
 			expect(
 				screen.getByRole( 'menuitem', { name: 'Dropdown submenu' } )
 			).toHaveFocus();
 
 			// Arrow right/left can be used to enter/leave submenus
-			await user.keyboard( '{ArrowRight}' );
+			await press.ArrowRight();
 			expect(
 				screen.getByRole( 'menuitem', {
 					name: 'Dropdown submenu item 1',
 				} )
 			).toHaveFocus();
 
-			await user.keyboard( '{ArrowDown}' );
+			await press.ArrowDown();
 			expect(
 				screen.getByRole( 'menuitem', {
 					name: 'Dropdown submenu item 2',
 				} )
 			).toHaveFocus();
 
-			await user.keyboard( '{ArrowLeft}' );
+			await press.ArrowLeft();
 			expect(
 				screen.getByRole( 'menuitem', {
 					name: 'Dropdown submenu',
@@ -377,28 +410,28 @@ describe( 'DropdownMenu', () => {
 			).toHaveFocus();
 
 			// Spacebar or enter key can also be used to enter a submenu
-			await user.keyboard( '{Enter}' );
+			await press.Enter();
 			expect(
 				screen.getByRole( 'menuitem', {
 					name: 'Dropdown submenu item 1',
 				} )
 			).toHaveFocus();
 
-			await user.keyboard( '{ArrowLeft}' );
+			await press.ArrowLeft();
 			expect(
 				screen.getByRole( 'menuitem', {
 					name: 'Dropdown submenu',
 				} )
 			).toHaveFocus();
 
-			await user.keyboard( '{Spacebar}' );
+			await press.Space();
 			expect(
 				screen.getByRole( 'menuitem', {
 					name: 'Dropdown submenu item 1',
 				} )
 			).toHaveFocus();
 
-			await user.keyboard( '{ArrowLeft}' );
+			await press.ArrowLeft();
 			expect(
 				screen.getByRole( 'menuitem', {
 					name: 'Dropdown submenu',
@@ -406,32 +439,37 @@ describe( 'DropdownMenu', () => {
 			).toHaveFocus();
 		} );
 
-		it( 'should check menu radio items', async () => {
-			const user = userEvent.setup();
-
+		it( 'should check radio items and keep the menu open when clicking (controlled)', async () => {
 			const onRadioValueChangeSpy = jest.fn();
 
 			const ControlledRadioGroup = () => {
-				const [ radioValue, setRadioValue ] = useState< string >();
+				const [ radioValue, setRadioValue ] = useState( 'two' );
+				const onRadioChange: React.ComponentProps<
+					typeof DropdownMenuRadioItem
+				>[ 'onChange' ] = ( e ) => {
+					onRadioValueChangeSpy( e.target.value );
+					setRadioValue( e.target.value );
+				};
 				return (
 					<DropdownMenu trigger={ <button>Open dropdown</button> }>
-						<DropdownMenuRadioGroup
-							value={ radioValue }
-							onValueChange={ ( value ) => {
-								onRadioValueChangeSpy( value );
-								setRadioValue( value );
-							} }
-						>
-							<DropdownMenuLabel>
-								Radio group label
-							</DropdownMenuLabel>
-							<DropdownMenuRadioItem value="radio-one">
+						<DropdownMenuGroup>
+							<DropdownMenuRadioItem
+								name="radio-test"
+								value="radio-one"
+								checked={ radioValue === 'radio-one' }
+								onChange={ onRadioChange }
+							>
 								Radio item one
 							</DropdownMenuRadioItem>
-							<DropdownMenuRadioItem value="radio-two">
+							<DropdownMenuRadioItem
+								name="radio-test"
+								value="radio-two"
+								checked={ radioValue === 'radio-two' }
+								onChange={ onRadioChange }
+							>
 								Radio item two
 							</DropdownMenuRadioItem>
-						</DropdownMenuRadioGroup>
+						</DropdownMenuGroup>
 					</DropdownMenu>
 				);
 			};
@@ -439,7 +477,7 @@ describe( 'DropdownMenu', () => {
 			render( <ControlledRadioGroup /> );
 
 			// Open dropdown
-			await user.click(
+			await click(
 				screen.getByRole( 'button', { name: 'Open dropdown' } )
 			);
 
@@ -453,7 +491,7 @@ describe( 'DropdownMenu', () => {
 			).not.toBeChecked();
 
 			// Click first radio item, make sure that the callback fires
-			await user.click(
+			await click(
 				screen.getByRole( 'menuitemradio', { name: 'Radio item one' } )
 			);
 			expect( onRadioValueChangeSpy ).toHaveBeenCalledTimes( 1 );
@@ -461,11 +499,6 @@ describe( 'DropdownMenu', () => {
 				'radio-one'
 			);
 
-			// Open dropdown
-			await user.click(
-				screen.getByRole( 'button', { name: 'Open dropdown' } )
-			);
-
 			// Make sure that first radio is checked
 			expect(
 				screen.getByRole( 'menuitemradio', { name: 'Radio item one' } )
@@ -475,7 +508,7 @@ describe( 'DropdownMenu', () => {
 			).not.toBeChecked();
 
 			// Click second radio item, make sure that the callback fires
-			await user.click(
+			await click(
 				screen.getByRole( 'menuitemradio', { name: 'Radio item two' } )
 			);
 			expect( onRadioValueChangeSpy ).toHaveBeenCalledTimes( 2 );
@@ -483,11 +516,83 @@ describe( 'DropdownMenu', () => {
 				'radio-two'
 			);
 
+			// Make sure that second radio is selected
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'Radio item one' } )
+			).not.toBeChecked();
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'Radio item two' } )
+			).toBeChecked();
+		} );
+
+		it( 'should check radio items and keep the menu open when clicking (uncontrolled)', async () => {
+			const onRadioValueChangeSpy = jest.fn();
+			render(
+				<DropdownMenu trigger={ <button>Open dropdown</button> }>
+					<DropdownMenuGroup>
+						<DropdownMenuRadioItem
+							name="radio-test"
+							value="radio-one"
+							onChange={ ( e ) =>
+								onRadioValueChangeSpy( e.target.value )
+							}
+						>
+							Radio item one
+						</DropdownMenuRadioItem>
+						<DropdownMenuRadioItem
+							name="radio-test"
+							value="radio-two"
+							defaultChecked
+							onChange={ ( e ) =>
+								onRadioValueChangeSpy( e.target.value )
+							}
+						>
+							Radio item two
+						</DropdownMenuRadioItem>
+					</DropdownMenuGroup>
+				</DropdownMenu>
+			);
+
 			// Open dropdown
-			await user.click(
+			await click(
 				screen.getByRole( 'button', { name: 'Open dropdown' } )
 			);
 
+			// Radio item two should be checked (`defaultChecked` prop)
+			expect( screen.getAllByRole( 'menuitemradio' ) ).toHaveLength( 2 );
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'Radio item one' } )
+			).not.toBeChecked();
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'Radio item two' } )
+			).toBeChecked();
+
+			// Click first radio item, make sure that the callback fires
+			await click(
+				screen.getByRole( 'menuitemradio', { name: 'Radio item one' } )
+			);
+			expect( onRadioValueChangeSpy ).toHaveBeenCalledTimes( 1 );
+			expect( onRadioValueChangeSpy ).toHaveBeenLastCalledWith(
+				'radio-one'
+			);
+
+			// Make sure that first radio is checked
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'Radio item one' } )
+			).toBeChecked();
+			expect(
+				screen.getByRole( 'menuitemradio', { name: 'Radio item two' } )
+			).not.toBeChecked();
+
+			// Click second radio item, make sure that the callback fires
+			await click(
+				screen.getByRole( 'menuitemradio', { name: 'Radio item two' } )
+			);
+			expect( onRadioValueChangeSpy ).toHaveBeenCalledTimes( 2 );
+			expect( onRadioValueChangeSpy ).toHaveBeenLastCalledWith(
+				'radio-two'
+			);
+
 			// Make sure that second radio is selected
 			expect(
 				screen.getByRole( 'menuitemradio', { name: 'Radio item one' } )
@@ -497,9 +602,7 @@ describe( 'DropdownMenu', () => {
 			).toBeChecked();
 		} );
 
-		it( 'should check menu checkbox items', async () => {
-			const user = userEvent.setup();
-
+		it( 'should check checkbox items and keep the menu open when clicking (controlled)', async () => {
 			const onCheckboxValueChangeSpy = jest.fn();
 
 			const ControlledRadioGroup = () => {
@@ -507,26 +610,36 @@ describe( 'DropdownMenu', () => {
 					useState< boolean >();
 				const [ itemTwoChecked, setItemTwoChecked ] =
 					useState< boolean >();
+
 				return (
 					<DropdownMenu trigger={ <button>Open dropdown</button> }>
-						<DropdownMenuLabel>
-							Checkbox group label
-						</DropdownMenuLabel>
 						<DropdownMenuCheckboxItem
+							name="item-one"
+							value="item-one-value"
 							checked={ itemOneChecked }
-							onCheckedChange={ ( checked ) => {
-								setItemOneChecked( checked );
-								onCheckboxValueChangeSpy( 'item-one', checked );
+							onChange={ ( e ) => {
+								onCheckboxValueChangeSpy(
+									e.target.name,
+									e.target.value,
+									e.target.checked
+								);
+								setItemOneChecked( e.target.checked );
 							} }
 						>
 							Checkbox item one
 						</DropdownMenuCheckboxItem>
 
 						<DropdownMenuCheckboxItem
+							name="item-two"
+							value="item-two-value"
 							checked={ itemTwoChecked }
-							onCheckedChange={ ( checked ) => {
-								setItemTwoChecked( checked );
-								onCheckboxValueChangeSpy( 'item-two', checked );
+							onChange={ ( e ) => {
+								onCheckboxValueChangeSpy(
+									e.target.name,
+									e.target.value,
+									e.target.checked
+								);
+								setItemTwoChecked( e.target.checked );
 							} }
 						>
 							Checkbox item two
@@ -538,7 +651,7 @@ describe( 'DropdownMenu', () => {
 			render( <ControlledRadioGroup /> );
 
 			// Open dropdown
-			await user.click(
+			await click(
 				screen.getByRole( 'button', { name: 'Open dropdown' } )
 			);
 
@@ -558,7 +671,7 @@ describe( 'DropdownMenu', () => {
 			).not.toBeChecked();
 
 			// Click first checkbox item, make sure that the callback fires
-			await user.click(
+			await click(
 				screen.getByRole( 'menuitemcheckbox', {
 					name: 'Checkbox item one',
 				} )
@@ -566,14 +679,10 @@ describe( 'DropdownMenu', () => {
 			expect( onCheckboxValueChangeSpy ).toHaveBeenCalledTimes( 1 );
 			expect( onCheckboxValueChangeSpy ).toHaveBeenLastCalledWith(
 				'item-one',
+				'item-one-value',
 				true
 			);
 
-			// Open dropdown
-			await user.click(
-				screen.getByRole( 'button', { name: 'Open dropdown' } )
-			);
-
 			// Make sure that first checkbox is checked
 			expect(
 				screen.getByRole( 'menuitemcheckbox', {
@@ -582,7 +691,7 @@ describe( 'DropdownMenu', () => {
 			).toBeChecked();
 
 			// Click second checkbox item, make sure that the callback fires
-			await user.click(
+			await click(
 				screen.getByRole( 'menuitemcheckbox', {
 					name: 'Checkbox item two',
 				} )
@@ -590,14 +699,10 @@ describe( 'DropdownMenu', () => {
 			expect( onCheckboxValueChangeSpy ).toHaveBeenCalledTimes( 2 );
 			expect( onCheckboxValueChangeSpy ).toHaveBeenLastCalledWith(
 				'item-two',
+				'item-two-value',
 				true
 			);
 
-			// Open dropdown
-			await user.click(
-				screen.getByRole( 'button', { name: 'Open dropdown' } )
-			);
-
 			// Make sure that second checkbox is selected
 			expect(
 				screen.getByRole( 'menuitemcheckbox', {
@@ -606,7 +711,7 @@ describe( 'DropdownMenu', () => {
 			).toBeChecked();
 
 			// Click second checkbox item, make sure that the callback fires
-			await user.click(
+			await click(
 				screen.getByRole( 'menuitemcheckbox', {
 					name: 'Checkbox item two',
 				} )
@@ -614,27 +719,203 @@ describe( 'DropdownMenu', () => {
 			expect( onCheckboxValueChangeSpy ).toHaveBeenCalledTimes( 3 );
 			expect( onCheckboxValueChangeSpy ).toHaveBeenLastCalledWith(
 				'item-two',
+				'item-two-value',
 				false
 			);
 
+			// Make sure that second checkbox is unselected
+			expect(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item two',
+				} )
+			).not.toBeChecked();
+		} );
+
+		it( 'should check checkbox items and keep the menu open when clicking (uncontrolled)', async () => {
+			const onCheckboxValueChangeSpy = jest.fn();
+
+			render(
+				<DropdownMenu trigger={ <button>Open dropdown</button> }>
+					<DropdownMenuCheckboxItem
+						name="item-one"
+						value="item-one-value"
+						onChange={ ( e ) => {
+							onCheckboxValueChangeSpy(
+								e.target.name,
+								e.target.value,
+								e.target.checked
+							);
+						} }
+					>
+						Checkbox item one
+					</DropdownMenuCheckboxItem>
+
+					<DropdownMenuCheckboxItem
+						name="item-two"
+						value="item-two-value"
+						defaultChecked
+						onChange={ ( e ) => {
+							onCheckboxValueChangeSpy(
+								e.target.name,
+								e.target.value,
+								e.target.checked
+							);
+						} }
+					>
+						Checkbox item two
+					</DropdownMenuCheckboxItem>
+				</DropdownMenu>
+			);
+
 			// Open dropdown
-			await user.click(
+			await click(
 				screen.getByRole( 'button', { name: 'Open dropdown' } )
 			);
 
-			// Make sure that second checkbox is unselected
+			// Checkbox item two should be checked (`defaultChecked`)
+			expect( screen.getAllByRole( 'menuitemcheckbox' ) ).toHaveLength(
+				2
+			);
+			expect(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item one',
+				} )
+			).not.toBeChecked();
+			expect(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item two',
+				} )
+			).toBeChecked();
+
+			// Click first checkbox item, make sure that the callback fires
+			await click(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item one',
+				} )
+			);
+			expect( onCheckboxValueChangeSpy ).toHaveBeenCalledTimes( 1 );
+			expect( onCheckboxValueChangeSpy ).toHaveBeenLastCalledWith(
+				'item-one',
+				'item-one-value',
+				true
+			);
+
+			// Make sure that first checkbox is checked
+			expect(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item one',
+				} )
+			).toBeChecked();
+
+			// Click second checkbox item, make sure that the callback fires
+			await click(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item two',
+				} )
+			);
+			expect( onCheckboxValueChangeSpy ).toHaveBeenCalledTimes( 2 );
+			expect( onCheckboxValueChangeSpy ).toHaveBeenLastCalledWith(
+				'item-two',
+				'item-two-value',
+				false
+			);
+
+			// Make sure that second checkbox is unchecked
 			expect(
 				screen.getByRole( 'menuitemcheckbox', {
 					name: 'Checkbox item two',
 				} )
 			).not.toBeChecked();
+
+			// Click second checkbox item, make sure that the callback fires
+			await click(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item two',
+				} )
+			);
+			expect( onCheckboxValueChangeSpy ).toHaveBeenCalledTimes( 3 );
+			expect( onCheckboxValueChangeSpy ).toHaveBeenLastCalledWith(
+				'item-two',
+				'item-two-value',
+				true
+			);
+
+			// Make sure that second checkbox is unselected
+			expect(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: 'Checkbox item two',
+				} )
+			).toBeChecked();
+		} );
+	} );
+
+	describe( 'modality', () => {
+		it( 'should be modal by default', async () => {
+			render(
+				<>
+					<DropdownMenu trigger={ <button>Open dropdown</button> }>
+						<DropdownMenuItem>Dropdown menu item</DropdownMenuItem>
+					</DropdownMenu>
+					<button>Button outside of dropdown</button>
+				</>
+			);
+
+			// Click to open the menu
+			await click(
+				screen.getByRole( 'button', {
+					name: 'Open dropdown',
+				} )
+			);
+
+			// DropdownMenu open, focus is on the menu wrapper
+			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+
+			expect(
+				screen.queryByRole( 'button', {
+					name: 'Button outside of dropdown',
+				} )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'should not be modal when the `modal` prop is set to `false`', async () => {
+			render(
+				<>
+					<DropdownMenu
+						trigger={ <button>Open dropdown</button> }
+						modal={ false }
+					>
+						<DropdownMenuItem>Dropdown menu item</DropdownMenuItem>
+					</DropdownMenu>
+					<button>Button outside of dropdown</button>
+				</>
+			);
+
+			// Click to open the menu
+			await click(
+				screen.getByRole( 'button', {
+					name: 'Open dropdown',
+				} )
+			);
+
+			// DropdownMenu open, focus is on the menu wrapper
+			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
+
+			// DropdownMenu is not modal, therefore the outer button is part of the
+			// accessibility tree and can be found.
+			const outerButton = screen.getByRole( 'button', {
+				name: 'Button outside of dropdown',
+			} );
+
+			// The outer button can be focused by pressing tab. Doing so will cause
+			// the DropdownMenu to close.
+			await press.Tab();
+			expect( outerButton ).toBeInTheDocument();
+			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
 		} );
 	} );
 
 	describe( 'items prefix and suffix', () => {
 		it( 'should display a prefix on regular items', async () => {
-			const user = userEvent.setup();
-
 			render(
 				<DropdownMenu trigger={ <button>Open dropdown</button> }>
 					<DropdownMenuItem prefix={ <>Item prefix</> }>
@@ -644,7 +925,7 @@ describe( 'DropdownMenu', () => {
 			);
 
 			// Click to open the menu
-			await user.click(
+			await click(
 				screen.getByRole( 'button', {
 					name: 'Open dropdown',
 				} )
@@ -659,8 +940,6 @@ describe( 'DropdownMenu', () => {
 		} );
 
 		it( 'should display a suffix on regular items', async () => {
-			const user = userEvent.setup();
-
 			render(
 				<DropdownMenu trigger={ <button>Open dropdown</button> }>
 					<DropdownMenuItem suffix={ <>Item suffix</> }>
@@ -670,7 +949,7 @@ describe( 'DropdownMenu', () => {
 			);
 
 			// Click to open the menu
-			await user.click(
+			await click(
 				screen.getByRole( 'button', {
 					name: 'Open dropdown',
 				} )
@@ -685,23 +964,20 @@ describe( 'DropdownMenu', () => {
 		} );
 
 		it( 'should display a suffix on radio items', async () => {
-			const user = userEvent.setup();
-
 			render(
 				<DropdownMenu trigger={ <button>Open dropdown</button> }>
-					<DropdownMenuRadioGroup>
-						<DropdownMenuRadioItem
-							value="radio-one"
-							suffix="Radio suffix"
-						>
-							Radio item one
-						</DropdownMenuRadioItem>
-					</DropdownMenuRadioGroup>
+					<DropdownMenuRadioItem
+						name="radio-test"
+						value="radio-one"
+						suffix="Radio suffix"
+					>
+						Radio item one
+					</DropdownMenuRadioItem>
 				</DropdownMenu>
 			);
 
 			// Click to open the menu
-			await user.click(
+			await click(
 				screen.getByRole( 'button', {
 					name: 'Open dropdown',
 				} )
@@ -716,18 +992,20 @@ describe( 'DropdownMenu', () => {
 		} );
 
 		it( 'should display a suffix on checkbox items', async () => {
-			const user = userEvent.setup();
-
 			render(
 				<DropdownMenu trigger={ <button>Open dropdown</button> }>
-					<DropdownMenuCheckboxItem suffix={ 'Checkbox suffix' }>
+					<DropdownMenuCheckboxItem
+						name="checkbox-test"
+						value="checkbox-one"
+						suffix="Checkbox suffix"
+					>
 						Checkbox item one
 					</DropdownMenuCheckboxItem>
 				</DropdownMenu>
 			);
 
 			// Click to open the menu
-			await user.click(
+			await click(
 				screen.getByRole( 'button', {
 					name: 'Open dropdown',
 				} )
@@ -744,8 +1022,6 @@ describe( 'DropdownMenu', () => {
 
 	describe( 'typeahead', () => {
 		it( 'should highlight matching item', async () => {
-			const user = userEvent.setup();
-
 			render(
 				<DropdownMenu trigger={ <button>Open dropdown</button> }>
 					<DropdownMenuItem>One</DropdownMenuItem>
@@ -754,60 +1030,76 @@ describe( 'DropdownMenu', () => {
 			);
 
 			// Click to open the menu
-			await user.click(
+			await click(
 				screen.getByRole( 'button', {
 					name: 'Open dropdown',
 				} )
 			);
-			expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
+			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
 
 			// Type "tw", it should match and focus the item with content "Two"
-			await user.keyboard( 'tw' );
+			await type( 'tw' );
 			expect(
 				screen.getByRole( 'menuitem', { name: 'Two' } )
 			).toHaveFocus();
 
 			// Wait for the typeahead timer to reset and interpret
 			// the next keystrokes as a new search
-			await delay( 1000 );
+			await delay( 500 );
 
 			// Type "on", it should match and focus the item with content "One"
-			await user.keyboard( 'on' );
+			await type( 'on' );
 			expect(
 				screen.getByRole( 'menuitem', { name: 'One' } )
 			).toHaveFocus();
 		} );
 
-		it( 'should use the textValue prop if specificied', async () => {
-			const user = userEvent.setup();
-
+		it( 'should keep previous focus when no matches are found', async () => {
 			render(
 				<DropdownMenu trigger={ <button>Open dropdown</button> }>
 					<DropdownMenuItem>One</DropdownMenuItem>
-					<DropdownMenuItem textValue="Four">Two</DropdownMenuItem>
+					<DropdownMenuItem>Two</DropdownMenuItem>
 				</DropdownMenu>
 			);
 
 			// Click to open the menu
-			await user.click(
+			await click(
 				screen.getByRole( 'button', {
 					name: 'Open dropdown',
 				} )
 			);
-			expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
+			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
 
-			// Type "tw", it should not match the item with content "Two" because it
-			// that item specifies the "textValue" prop. Therefore, the menu container
-			// retains focus.
-			await user.keyboard( 'tw' );
+			// Type a string that doesn't match any items. Focus shouldn't move.
+			await type( 'abc' );
 			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
 
 			// Wait for the typeahead timer to reset and interpret
 			// the next keystrokes as a new search
-			await delay( 1000 );
+			await delay( 500 );
+
+			// Type "on", it should match and focus the item with content "One"
+			await type( 'on' );
+			expect(
+				screen.getByRole( 'menuitem', { name: 'One' } )
+			).toHaveFocus();
+
+			// Wait for the typeahead timer to reset and interpret
+			// the next keystrokes as a new search
+			await delay( 500 );
+
+			// Type a string that doesn't match any items. Focus shouldn't move.
+			await type( 'abc' );
+			expect(
+				screen.getByRole( 'menuitem', { name: 'One' } )
+			).toHaveFocus();
 
-			// Type "fo", it should match and focus the item with textValue "Four"
-			await user.keyboard( 'fo' );
+			// Wait for the typeahead timer to reset and interpret
+			// the next keystrokes as a new search
+			await delay( 500 );
+
+			// Type "tw", it should match and focus the item with content "Two"
+			await type( 'tw' );
 			expect(
 				screen.getByRole( 'menuitem', { name: 'Two' } )
 			).toHaveFocus();