@wordpress/components 35.0.1 → 36.0.0

package/src/menu/test/index.tsx

@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
-import { render, screen, waitFor } from '@testing-library/react';
-import { press, click, hover, type } from '@ariakit/test';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
@@ -14,10 +14,6 @@ import { useState } from '@wordpress/element';
  */
 import { Menu } from '..';
 
-const delay = ( delayInMs: number ) => {
-	return new Promise( ( resolve ) => setTimeout( resolve, delayInMs ) );
-};
-
 const waitForFocusedMenu = () =>
 	waitFor( () => expect( screen.getByRole( 'menu' ) ).toHaveFocus() );
 
@@ -26,10 +22,20 @@ const waitForFocusedMenuItem = ( name: string ) =>
 		expect( screen.getByRole( 'menuitem', { name } ) ).toHaveFocus()
 	);
 
+const resetTypeahead = () => {
+	act( () => jest.advanceTimersByTime( 500 ) );
+};
+
 // Open dropdown => open menu
 // Submenu trigger item => open submenu
 
 describe( 'Menu', () => {
+	let user: ReturnType< typeof userEvent.setup >;
+
+	beforeEach( () => {
+		user = userEvent.setup();
+	} );
+
 	// See https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
 	it( 'should follow the WAI-ARIA spec', async () => {
 		render(
@@ -58,7 +64,7 @@ describe( 'Menu', () => {
 		expect( toggleButton ).toHaveAttribute( 'aria-haspopup', 'menu' );
 		expect( toggleButton ).toHaveAttribute( 'aria-expanded', 'false' );
 
-		await click( toggleButton );
+		await user.click( toggleButton );
 
 		expect( toggleButton ).toHaveAttribute( 'aria-expanded', 'true' );
 
@@ -82,7 +88,7 @@ describe( 'Menu', () => {
 		expect( submenuTrigger ).toHaveAttribute( 'aria-haspopup', 'menu' );
 		expect( submenuTrigger ).toHaveAttribute( 'aria-expanded', 'false' );
 
-		await hover( submenuTrigger );
+		await user.hover( submenuTrigger );
 
 		// Wait for the open animation after hovering
 		await waitFor( () =>
@@ -119,7 +125,7 @@ describe( 'Menu', () => {
 			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
 
 			// Click to open the menu
-			await click( toggleButton );
+			await user.click( toggleButton );
 
 			// Menu open, focus is on the menu wrapper
 			await waitForFocusedMenu();
@@ -142,14 +148,14 @@ describe( 'Menu', () => {
 			} );
 
 			// Move focus on the toggle
-			await press.Tab();
+			await user.tab();
 
 			expect( toggleButton ).toHaveFocus();
 
 			// Menu closed
 			expect( screen.queryByRole( 'menuitem' ) ).not.toBeInTheDocument();
 
-			await press.ArrowDown();
+			await user.keyboard( '{ArrowDown}' );
 
 			// Menu open, focus is on the first focusable item
 			// (disabled items are still focusable and accessible)
@@ -173,16 +179,16 @@ describe( 'Menu', () => {
 			} );
 
 			// Move focus on the toggle
-			await press.Tab();
+			await user.tab();
 
 			expect( toggleButton ).toHaveFocus();
 
 			// Menu closed
 			expect( screen.queryByRole( 'menuitem' ) ).not.toBeInTheDocument();
 
-			// Keyboard-triggered clicks have `detail: 0`, which Ariakit uses to
-			// distinguish keyboard activation from pointer activation.
-			await press.Space( toggleButton, { detail: 0 } );
+			// Use keyboard activation so the synthetic click has `detail: 0`,
+			// which Ariakit uses to distinguish it from pointer activation.
+			await user.keyboard( ' ' );
 
 			await waitFor( () =>
 				expect( toggleButton ).toHaveAttribute(
@@ -207,16 +213,18 @@ describe( 'Menu', () => {
 				name: 'Open dropdown',
 			} );
 
-			await click( trigger );
+			await user.click( trigger );
 
 			// Focuses menu on mouse click, focuses first item on keyboard press
 			// Can be changed with a custom useEffect
 			await waitForFocusedMenu();
 
 			// Pressing esc will close the menu and move focus to the toggle
-			await press.Escape();
+			await user.keyboard( '{Escape}' );
 
-			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
+			await waitFor( () =>
+				expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument()
+			);
 
 			await waitFor( () =>
 				expect(
@@ -238,9 +246,11 @@ describe( 'Menu', () => {
 			expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
 
 			// Click on the body (ie. outside of the dropdown menu)
-			await click( document.body );
+			await user.click( document.body );
 
-			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
+			await waitFor( () =>
+				expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument()
+			);
 		} );
 
 		it( 'should close when clicking on a menu item', async () => {
@@ -256,9 +266,11 @@ describe( 'Menu', () => {
 			expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
 
 			// Clicking a menu item will close the menu
-			await click( screen.getByRole( 'menuitem' ) );
+			await user.click( screen.getByRole( 'menuitem' ) );
 
-			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
+			await waitFor( () =>
+				expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument()
+			);
 		} );
 
 		it( 'should not close when clicking on a menu item when the `hideOnClick` prop is set to `false`', async () => {
@@ -274,7 +286,7 @@ describe( 'Menu', () => {
 			expect( screen.getByRole( 'menu' ) ).toBeVisible();
 
 			// Clicking a menu item will close the menu
-			await click( screen.getByRole( 'menuitem' ) );
+			await user.click( screen.getByRole( 'menuitem' ) );
 
 			expect( screen.getByRole( 'menu' ) ).toBeVisible();
 		} );
@@ -292,7 +304,7 @@ describe( 'Menu', () => {
 			expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
 
 			// Clicking a disabled menu item won't close the menu
-			await click( screen.getByRole( 'menuitem' ) );
+			await user.click( screen.getByRole( 'menuitem' ) );
 
 			expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
 		} );
@@ -325,7 +337,7 @@ describe( 'Menu', () => {
 				} )
 			).not.toBeInTheDocument();
 
-			await hover(
+			await user.hover(
 				screen.getByRole( 'menuitem', { name: 'Submenu trigger item' } )
 			);
 
@@ -358,57 +370,53 @@ describe( 'Menu', () => {
 				</Menu>
 			);
 
-			// The menu is focused automatically when `defaultOpen` is set.
-			await waitForFocusedMenu();
+			// The first menu item is focused automatically when `defaultOpen` is
+			// set and jsdom reports visible elements as focusable.
+			await waitForFocusedMenuItem( 'Menu item 1' );
 
 			// Arrow up/down selects menu items
 			// The selection wraps around from last to first and viceversa
-			await press.ArrowDown();
-			expect(
-				screen.getByRole( 'menuitem', { name: 'Menu item 1' } )
-			).toHaveFocus();
-
-			await press.ArrowDown();
+			await user.keyboard( '{ArrowDown}' );
 			expect(
 				screen.getByRole( 'menuitem', { name: 'Menu item 2' } )
 			).toHaveFocus();
 
-			await press.ArrowDown();
+			await user.keyboard( '{ArrowDown}' );
 			expect(
 				screen.getByRole( 'menuitem', { name: 'Submenu trigger item' } )
 			).toHaveFocus();
 
-			await press.ArrowDown();
+			await user.keyboard( '{ArrowDown}' );
 			expect(
 				screen.getByRole( 'menuitem', { name: 'Menu item 3' } )
 			).toHaveFocus();
 
-			await press.ArrowDown();
+			await user.keyboard( '{ArrowDown}' );
 			expect(
 				screen.getByRole( 'menuitem', { name: 'Menu item 1' } )
 			).toHaveFocus();
 
-			await press.ArrowUp();
+			await user.keyboard( '{ArrowUp}' );
 			expect(
 				screen.getByRole( 'menuitem', { name: 'Menu item 3' } )
 			).toHaveFocus();
 
-			await press.ArrowUp();
+			await user.keyboard( '{ArrowUp}' );
 			expect(
 				screen.getByRole( 'menuitem', { name: 'Submenu trigger item' } )
 			).toHaveFocus();
 
 			// Arrow right/left can be used to enter/leave submenus
 			// (focus crosses menu contexts, so wait for it to settle)
-			await press.ArrowRight();
+			await user.keyboard( '{ArrowRight}' );
 			await waitForFocusedMenuItem( 'Submenu item 1' );
 
-			await press.ArrowDown();
+			await user.keyboard( '{ArrowDown}' );
 			expect(
 				screen.getByRole( 'menuitem', { name: 'Submenu item 2' } )
 			).toHaveFocus();
 
-			await press.ArrowLeft();
+			await user.keyboard( '{ArrowLeft}' );
 			expect(
 				screen.getByRole( 'menuitem', {
 					name: 'Submenu trigger item',
@@ -416,20 +424,20 @@ describe( 'Menu', () => {
 			).toHaveFocus();
 
 			// Spacebar or enter key can also be used to enter a submenu
-			await press.Enter();
+			await user.keyboard( '{Enter}' );
 			await waitForFocusedMenuItem( 'Submenu item 1' );
 
-			await press.ArrowLeft();
+			await user.keyboard( '{ArrowLeft}' );
 			expect(
 				screen.getByRole( 'menuitem', {
 					name: 'Submenu trigger item',
 				} )
 			).toHaveFocus();
 
-			await press.Space();
+			await user.keyboard( ' ' );
 			await waitForFocusedMenuItem( 'Submenu item 1' );
 
-			await press.ArrowLeft();
+			await user.keyboard( '{ArrowLeft}' );
 			expect(
 				screen.getByRole( 'menuitem', {
 					name: 'Submenu trigger item',
@@ -478,7 +486,7 @@ describe( 'Menu', () => {
 			render( <ControlledRadioGroup /> );
 
 			// Open dropdown
-			await click(
+			await user.click(
 				screen.getByRole( 'button', { name: 'Open dropdown' } )
 			);
 
@@ -492,7 +500,7 @@ describe( 'Menu', () => {
 			).not.toBeChecked();
 
 			// Click first radio item, make sure that the callback fires
-			await click(
+			await user.click(
 				screen.getByRole( 'menuitemradio', { name: 'Radio item one' } )
 			);
 			expect( onRadioValueChangeSpy ).toHaveBeenCalledTimes( 1 );
@@ -509,7 +517,7 @@ describe( 'Menu', () => {
 			).not.toBeChecked();
 
 			// Click second radio item, make sure that the callback fires
-			await click(
+			await user.click(
 				screen.getByRole( 'menuitemradio', { name: 'Radio item two' } )
 			);
 			expect( onRadioValueChangeSpy ).toHaveBeenCalledTimes( 2 );
@@ -558,7 +566,7 @@ describe( 'Menu', () => {
 			);
 
 			// Open dropdown
-			await click(
+			await user.click(
 				screen.getByRole( 'button', { name: 'Open dropdown' } )
 			);
 
@@ -572,7 +580,7 @@ describe( 'Menu', () => {
 			).toBeChecked();
 
 			// Click first radio item, make sure that the callback fires
-			await click(
+			await user.click(
 				screen.getByRole( 'menuitemradio', { name: 'Radio item one' } )
 			);
 			expect( onRadioValueChangeSpy ).toHaveBeenCalledTimes( 1 );
@@ -589,7 +597,7 @@ describe( 'Menu', () => {
 			).not.toBeChecked();
 
 			// Click second radio item, make sure that the callback fires
-			await click(
+			await user.click(
 				screen.getByRole( 'menuitemradio', { name: 'Radio item two' } )
 			);
 			expect( onRadioValueChangeSpy ).toHaveBeenCalledTimes( 2 );
@@ -658,7 +666,7 @@ describe( 'Menu', () => {
 			render( <ControlledRadioGroup /> );
 
 			// Open dropdown
-			await click(
+			await user.click(
 				screen.getByRole( 'button', { name: 'Open dropdown' } )
 			);
 
@@ -678,7 +686,7 @@ describe( 'Menu', () => {
 			).not.toBeChecked();
 
 			// Click first checkbox item, make sure that the callback fires
-			await click(
+			await user.click(
 				screen.getByRole( 'menuitemcheckbox', {
 					name: 'Checkbox item one',
 				} )
@@ -698,7 +706,7 @@ describe( 'Menu', () => {
 			).toBeChecked();
 
 			// Click second checkbox item, make sure that the callback fires
-			await click(
+			await user.click(
 				screen.getByRole( 'menuitemcheckbox', {
 					name: 'Checkbox item two',
 				} )
@@ -718,7 +726,7 @@ describe( 'Menu', () => {
 			).toBeChecked();
 
 			// Click second checkbox item, make sure that the callback fires
-			await click(
+			await user.click(
 				screen.getByRole( 'menuitemcheckbox', {
 					name: 'Checkbox item two',
 				} )
@@ -778,7 +786,7 @@ describe( 'Menu', () => {
 			);
 
 			// Open dropdown
-			await click(
+			await user.click(
 				screen.getByRole( 'button', { name: 'Open dropdown' } )
 			);
 
@@ -798,7 +806,7 @@ describe( 'Menu', () => {
 			).toBeChecked();
 
 			// Click first checkbox item, make sure that the callback fires
-			await click(
+			await user.click(
 				screen.getByRole( 'menuitemcheckbox', {
 					name: 'Checkbox item one',
 				} )
@@ -818,7 +826,7 @@ describe( 'Menu', () => {
 			).toBeChecked();
 
 			// Click second checkbox item, make sure that the callback fires
-			await click(
+			await user.click(
 				screen.getByRole( 'menuitemcheckbox', {
 					name: 'Checkbox item two',
 				} )
@@ -838,7 +846,7 @@ describe( 'Menu', () => {
 			).not.toBeChecked();
 
 			// Click second checkbox item, make sure that the callback fires
-			await click(
+			await user.click(
 				screen.getByRole( 'menuitemcheckbox', {
 					name: 'Checkbox item two',
 				} )
@@ -874,7 +882,7 @@ describe( 'Menu', () => {
 			);
 
 			// Click to open the menu
-			await click(
+			await user.click(
 				screen.getByRole( 'button', {
 					name: 'Open dropdown',
 				} )
@@ -904,7 +912,7 @@ describe( 'Menu', () => {
 			);
 
 			// Click to open the menu
-			await click(
+			await user.click(
 				screen.getByRole( 'button', {
 					name: 'Open dropdown',
 				} )
@@ -922,9 +930,11 @@ describe( 'Menu', () => {
 
 			// The outer button can be focused by pressing tab. Doing so will cause
 			// the Menu to close.
-			await press.Tab();
+			await user.tab();
 			expect( outerButton ).toBeVisible();
-			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
+			await waitFor( () =>
+				expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument()
+			);
 		} );
 	} );
 
@@ -942,7 +952,7 @@ describe( 'Menu', () => {
 			);
 
 			// Click to open the menu
-			await click(
+			await user.click(
 				screen.getByRole( 'button', {
 					name: 'Open dropdown',
 				} )
@@ -969,7 +979,7 @@ describe( 'Menu', () => {
 			);
 
 			// Click to open the menu
-			await click(
+			await user.click(
 				screen.getByRole( 'button', {
 					name: 'Open dropdown',
 				} )
@@ -1000,7 +1010,7 @@ describe( 'Menu', () => {
 			);
 
 			// Click to open the menu
-			await click(
+			await user.click(
 				screen.getByRole( 'button', {
 					name: 'Open dropdown',
 				} )
@@ -1031,7 +1041,7 @@ describe( 'Menu', () => {
 			);
 
 			// Click to open the menu
-			await click(
+			await user.click(
 				screen.getByRole( 'button', {
 					name: 'Open dropdown',
 				} )
@@ -1047,6 +1057,17 @@ describe( 'Menu', () => {
 	} );
 
 	describe( 'typeahead', () => {
+		beforeEach( () => {
+			jest.useFakeTimers();
+			user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+		} );
+
+		afterEach( () => {
+			jest.useRealTimers();
+		} );
+
 		it( 'should highlight matching item', async () => {
 			render(
 				<Menu>
@@ -1059,7 +1080,7 @@ describe( 'Menu', () => {
 			);
 
 			// Click to open the menu
-			await click(
+			await user.click(
 				screen.getByRole( 'button', {
 					name: 'Open dropdown',
 				} )
@@ -1067,17 +1088,16 @@ describe( 'Menu', () => {
 			await waitForFocusedMenu();
 
 			// Type "tw", it should match and focus the item with content "Two"
-			await type( 'tw' );
+			await user.keyboard( '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( 500 );
+			// Reset the typeahead search so the next keystrokes start a new query.
+			resetTypeahead();
 
 			// Type "on", it should match and focus the item with content "One"
-			await type( 'on' );
+			await user.keyboard( 'on' );
 			expect(
 				screen.getByRole( 'menuitem', { name: 'One' } )
 			).toHaveFocus();
@@ -1095,7 +1115,7 @@ describe( 'Menu', () => {
 			);
 
 			// Click to open the menu
-			await click(
+			await user.click(
 				screen.getByRole( 'button', {
 					name: 'Open dropdown',
 				} )
@@ -1103,35 +1123,32 @@ describe( 'Menu', () => {
 			await waitForFocusedMenu();
 
 			// Type a string that doesn't match any items. Focus shouldn't move.
-			await type( 'abc' );
+			await user.keyboard( 'abc' );
 			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
 
-			// Wait for the typeahead timer to reset and interpret
-			// the next keystrokes as a new search
-			await delay( 500 );
+			// Reset the typeahead search so the next keystrokes start a new query.
+			resetTypeahead();
 
 			// Type "on", it should match and focus the item with content "One"
-			await type( 'on' );
+			await user.keyboard( '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 );
+			// Reset the typeahead search so the next keystrokes start a new query.
+			resetTypeahead();
 
 			// Type a string that doesn't match any items. Focus shouldn't move.
-			await type( 'abc' );
+			await user.keyboard( 'abc' );
 			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 );
+			// Reset the typeahead search so the next keystrokes start a new query.
+			resetTypeahead();
 
 			// Type "tw", it should match and focus the item with content "Two"
-			await type( 'tw' );
+			await user.keyboard( 'tw' );
 			expect(
 				screen.getByRole( 'menuitem', { name: 'Two' } )
 			).toHaveFocus();

package/src/menu/types.ts

@@ -258,7 +258,7 @@ export interface CheckboxItemProps {
 	 * The checked state of the checkbox menu item when it is initially rendered.
 	 * Use when not wanting to control its checked state.
 	 *
-	 * Note: this prop will be overriden by the `checked` prop, if it is defined.
+	 * Note: this prop will be overridden by the `checked` prop, if it is defined.
 	 */
 	defaultChecked?: Ariakit.MenuItemCheckboxProps[ 'defaultChecked' ];
 	/**
@@ -321,7 +321,7 @@ export interface RadioItemProps {
 	 * The checked state of the radio menu item when it is initially rendered.
 	 * Use when not wanting to control its checked state.
 	 *
-	 * Note: this prop will be overriden by the `checked` prop, if it is defined.
+	 * Note: this prop will be overridden by the `checked` prop, if it is defined.
 	 */
 	defaultChecked?: Ariakit.MenuItemRadioProps[ 'defaultChecked' ];
 	/**

package/src/menu-item/test/__snapshots__/index.js.snap

@@ -20,6 +20,7 @@ exports[`MenuItem should match snapshot when all props provided 1`] = `
   <svg
     aria-hidden="true"
     class="components-menu-items__item-icon has-icon-right"
+    fill="currentColor"
     focusable="false"
     height="24"
     viewBox="0 0 24 24"
@@ -79,6 +80,7 @@ exports[`MenuItem should match snapshot when isSelected and role are optionally
   <svg
     aria-hidden="true"
     class="components-menu-items__item-icon has-icon-right"
+    fill="currentColor"
     focusable="false"
     height="24"
     viewBox="0 0 24 24"

package/src/modal/style.scss

@@ -217,7 +217,7 @@
 	}
 
 	.components-modal__content.has-scrolled-content:not(.hide-header) & {
-		border-bottom-color: $gray-300;
+		border-bottom-color: var(--wpds-color-stroke-surface-neutral);
 	}
 
 	& + p {

package/src/modal/test/index.tsx

@@ -269,9 +269,6 @@ describe( 'Modal', () => {
 	} );
 
 	describe( 'Focus handling', () => {
-		const originalGetClientRects =
-			window.HTMLElement.prototype.getClientRects;
-
 		const FocusMountDemo = ( {
 			focusOnMount,
 		}: Pick< ModalProps, 'focusOnMount' > ) => {
@@ -300,27 +297,6 @@ describe( 'Modal', () => {
 			);
 		};
 
-		beforeEach( () => {
-			/**
-			 * The test environment does not have a layout engine, so we need to mock
-			 * the getClientRects method. This ensures that the focusable elements can be
-			 * found by the `focusOnMount` logic which depends on layout information
-			 * to determine if the element is visible or not.
-			 * See https://github.com/WordPress/gutenberg/blob/trunk/packages/dom/src/focusable.js#L55-L61.
-			 */
-			// @ts-expect-error We're not trying to comply to the DOM spec, only mocking
-			window.HTMLElement.prototype.getClientRects = function () {
-				return [ 'trick-jsdom-into-having-size-for-element-rect' ];
-			};
-		} );
-
-		afterEach( () => {
-			// Restore original HTMLElement prototype.
-			// See beforeEach for details.
-			window.HTMLElement.prototype.getClientRects =
-				originalGetClientRects;
-		} );
-
 		it( 'should focus the Modal dialog by default when `focusOnMount` prop is not provided', async () => {
 			const user = userEvent.setup();
 

package/src/modal/use-modal-exit-animation.ts

@@ -14,8 +14,8 @@ import { CONFIG } from '../utils';
  * Milliseconds used as a fallback when racing `animationend` against a timeout.
  *
  * Sourced from `CONFIG.transitionDuration`. This value is implicitly coupled to
- * the modal frame’s CSS `animation-duration` in `style.scss`, which uses
- * `var(--wpds-motion-duration-md)`. If either the token, the SCSS, or
+ * the modal frame’s CSS `animation-duration` in `style.scss`, which uses the
+ * WPDS `motion-duration-md` token. If either the token, the SCSS, or
  * `CONFIG.transitionDuration` changes, keep them aligned so exit timing stays correct.
  */
 const FRAME_ANIMATION_DURATION_MS = Number.parseInt(

package/src/navigable-container/test/navigable-menu.tsx

@@ -28,23 +28,7 @@ const getNavigableMenuFocusables = () => [
 	screen.getByRole( 'link', { name: 'Item 4' } ),
 ];
 
-const originalGetClientRects = window.HTMLElement.prototype.getClientRects;
-
 describe( 'NavigableMenu', () => {
-	beforeAll( () => {
-		// Mocking `getClientRects()` is necessary to pass a check performed by
-		// the `focus.tabbable.find()` and by the `focus.focusable.find()` functions
-		// from the `@wordpress/dom` package.
-		// @ts-expect-error We're not trying to comply to the DOM spec, only mocking
-		window.HTMLElement.prototype.getClientRects = function () {
-			return [ 'trick-jsdom-into-having-size-for-element-rect' ];
-		};
-	} );
-
-	afterAll( () => {
-		window.HTMLElement.prototype.getClientRects = originalGetClientRects;
-	} );
-
 	it( 'moves focus on its focusable children by using the up/down arrow keys', async () => {
 		const user = userEvent.setup();