@wordpress/components 20.0.2-next.957ca95e4c.0 → 21.0.0

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

@@ -1,109 +1,107 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`MenuItem should match snapshot when all props provided 1`] = `
-<ForwardRef(Button)
-  aria-checked={true}
-  className="components-menu-item__button my-class"
-  onClick={[Function]}
+<button
+  aria-checked="true"
+  class="components-button components-menu-item__button my-class"
   role="menuitemcheckbox"
+  type="button"
 >
   <span
-    className="components-menu-item__item"
+    class="components-menu-item__item"
   >
     My item
   </span>
-  <Shortcut
-    className="components-menu-item__shortcut"
-    shortcut="mod+shift+alt+w"
-  />
-  <Icon
-    icon={
-      <SVG
-        className="components-menu-items__item-icon has-icon-right"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <Path
-          d="M4 9v1.5h16V9H4zm12 5.5h4V13h-4v1.5zm-6 0h4V13h-4v1.5zm-6 0h4V13H4v1.5z"
-        />
-      </SVG>
-    }
-  />
-</ForwardRef(Button)>
+  <span
+    class="components-menu-item__shortcut"
+  >
+    mod+shift+alt+w
+  </span>
+  <svg
+    aria-hidden="true"
+    class="components-menu-items__item-icon has-icon-right"
+    focusable="false"
+    height="24"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M4 9v1.5h16V9H4zm12 5.5h4V13h-4v1.5zm-6 0h4V13h-4v1.5zm-6 0h4V13H4v1.5z"
+    />
+  </svg>
+</button>
 `;
 
 exports[`MenuItem should match snapshot when info is provided 1`] = `
-<ForwardRef(Button)
-  className="components-menu-item__button"
+<button
+  class="components-button components-menu-item__button"
   role="menuitem"
+  type="button"
 >
   <span
-    className="components-menu-item__item"
+    class="components-menu-item__item"
   >
     <span
-      className="components-menu-item__info-wrapper"
+      class="components-menu-item__info-wrapper"
     >
       <span
-        className="components-menu-item__item"
+        class="components-menu-item__item"
       >
         My item
       </span>
       <span
-        className="components-menu-item__info"
+        class="components-menu-item__info"
       >
         Extended description of My Item
       </span>
     </span>
   </span>
-  <Shortcut
-    className="components-menu-item__shortcut"
-  />
-</ForwardRef(Button)>
+</button>
 `;
 
 exports[`MenuItem should match snapshot when isSelected and role are optionally provided 1`] = `
-<ForwardRef(Button)
-  className="components-menu-item__button my-class"
-  onClick={[Function]}
+<button
+  class="components-button components-menu-item__button my-class"
   role="menuitem"
+  type="button"
 >
   <span
-    className="components-menu-item__item"
+    class="components-menu-item__item"
   >
     My item
   </span>
-  <Shortcut
-    className="components-menu-item__shortcut"
-    shortcut="mod+shift+alt+w"
-  />
-  <Icon
-    icon={
-      <SVG
-        className="components-menu-items__item-icon has-icon-right"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <Path
-          d="M4 9v1.5h16V9H4zm12 5.5h4V13h-4v1.5zm-6 0h4V13h-4v1.5zm-6 0h4V13H4v1.5z"
-        />
-      </SVG>
-    }
-  />
-</ForwardRef(Button)>
+  <span
+    class="components-menu-item__shortcut"
+  >
+    mod+shift+alt+w
+  </span>
+  <svg
+    aria-hidden="true"
+    class="components-menu-items__item-icon has-icon-right"
+    focusable="false"
+    height="24"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M4 9v1.5h16V9H4zm12 5.5h4V13h-4v1.5zm-6 0h4V13h-4v1.5zm-6 0h4V13H4v1.5z"
+    />
+  </svg>
+</button>
 `;
 
 exports[`MenuItem should match snapshot when only label provided 1`] = `
-<ForwardRef(Button)
-  className="components-menu-item__button"
+<button
+  class="components-button components-menu-item__button"
   role="menuitem"
+  type="button"
 >
   <span
-    className="components-menu-item__item"
+    class="components-menu-item__item"
   >
     My item
   </span>
-  <Shortcut
-    className="components-menu-item__shortcut"
-  />
-</ForwardRef(Button)>
+</button>
 `;

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -11,23 +11,23 @@ import { more } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import { MenuItem } from '../';
+import MenuItem from '../';
 
 const noop = () => {};
 
 describe( 'MenuItem', () => {
 	it( 'should match snapshot when only label provided', () => {
-		const wrapper = shallow( <MenuItem>My item</MenuItem> );
+		render( <MenuItem>My item</MenuItem> );
 
-		expect( wrapper ).toMatchSnapshot();
+		expect( screen.getByRole( 'menuitem' ) ).toMatchSnapshot();
 	} );
 
 	it( 'should match snapshot when all props provided', () => {
-		const wrapper = shallow(
+		render(
 			<MenuItem
 				className="my-class"
 				icon={ more }
-				isSelected={ true }
+				isSelected
 				role="menuitemcheckbox"
 				onClick={ noop }
 				shortcut="mod+shift+alt+w"
@@ -36,11 +36,11 @@ describe( 'MenuItem', () => {
 			</MenuItem>
 		);
 
-		expect( wrapper ).toMatchSnapshot();
+		expect( screen.getByRole( 'menuitemcheckbox' ) ).toMatchSnapshot();
 	} );
 
 	it( 'should match snapshot when isSelected and role are optionally provided', () => {
-		const wrapper = shallow(
+		render(
 			<MenuItem
 				className="my-class"
 				icon={ more }
@@ -51,52 +51,60 @@ describe( 'MenuItem', () => {
 			</MenuItem>
 		);
 
-		expect( wrapper ).toMatchSnapshot();
+		expect( screen.getByRole( 'menuitem' ) ).toMatchSnapshot();
 	} );
 
 	it( 'should match snapshot when info is provided', () => {
-		const wrapper = shallow(
+		render(
 			<MenuItem info="Extended description of My Item">My item</MenuItem>
 		);
 
-		expect( wrapper ).toMatchSnapshot();
+		expect( screen.getByRole( 'menuitem' ) ).toMatchSnapshot();
 	} );
 
 	it( 'should avoid using aria-label if only has non-string children', () => {
-		const wrapper = shallow(
+		render(
 			<MenuItem>
 				<div />
 			</MenuItem>
 		);
 
-		expect( wrapper.prop( 'aria-label' ) ).toBeUndefined();
+		expect( screen.getByRole( 'menuitem' ) ).not.toHaveAttribute(
+			'aria-label'
+		);
 	} );
 
 	it( 'should avoid using aria-checked if only menuitem is set as aria-role', () => {
-		const wrapper = shallow(
-			<MenuItem role="menuitem" isSelected={ true }>
+		render(
+			<MenuItem role="menuitem" isSelected>
 				<div />
 			</MenuItem>
 		);
 
-		expect( wrapper.prop( 'aria-checked' ) ).toBeUndefined();
+		const menuItem = screen.getByRole( 'menuitem' );
+		expect( menuItem ).not.toBeChecked();
+		expect( menuItem ).not.toHaveAttribute( 'aria-checked' );
 	} );
 
 	it( 'should use aria-checked if menuitemradio or menuitemcheckbox is set as aria-role', () => {
-		let wrapper = shallow(
-			<MenuItem role="menuitemradio" isSelected={ true }>
+		const { rerender } = render(
+			<MenuItem role="menuitemradio" isSelected>
 				<div />
 			</MenuItem>
 		);
 
-		expect( wrapper.prop( 'aria-checked' ) ).toBe( true );
+		const radioMenuItem = screen.getByRole( 'menuitemradio' );
+		expect( radioMenuItem ).toBeChecked();
+		expect( radioMenuItem ).toHaveAttribute( 'aria-checked', 'true' );
 
-		wrapper = shallow(
-			<MenuItem role="menuitemcheckbox" isSelected={ true }>
+		rerender(
+			<MenuItem role="menuitemcheckbox" isSelected>
 				<div />
 			</MenuItem>
 		);
 
-		expect( wrapper.prop( 'aria-checked' ) ).toBe( true );
+		const checkboxMenuItem = screen.getByRole( 'menuitemcheckbox' );
+		expect( checkboxMenuItem ).toBeChecked();
+		expect( checkboxMenuItem ).toHaveAttribute( 'aria-checked', 'true' );
 	} );
 } );

package/src/modal/aria-helper.js

@@ -1,10 +1,5 @@
 // @ts-nocheck
 
-/**
- * External dependencies
- */
-import { forEach } from 'lodash';
-
 const LIVE_REGION_ARIA_ROLES = new Set( [
 	'alert',
 	'status',
@@ -32,8 +27,8 @@ export function hideApp( unhiddenElement ) {
 	if ( isHidden ) {
 		return;
 	}
-	const elements = document.body.children;
-	forEach( elements, ( element ) => {
+	const elements = Array.from( document.body.children );
+	elements.forEach( ( element ) => {
 		if ( element === unhiddenElement ) {
 			return;
 		}
@@ -70,7 +65,7 @@ export function showApp() {
 	if ( ! isHidden ) {
 		return;
 	}
-	forEach( hiddenElements, ( element ) => {
+	hiddenElements.forEach( ( element ) => {
 		element.removeAttribute( 'aria-hidden' );
 	} );
 	hiddenElements = [];

package/src/navigable-container/README.md

@@ -39,6 +39,8 @@ The orientation of the menu. It could be "vertical", "horizontal" or "both"
 
 A NavigableMenu allows movement up and down (or left and right) the component via the arrow keys. The `tab` key is not handled. The `orientation` prop is used to determine whether the arrow keys used are vertical, horizontal or both.
 
+The `NavigableMenu` by default has a `menu` role and therefore, in order to function as expected, the component expects its children elements to have one of the following roles: `'menuitem' | 'menuitemradio' | 'menuitemcheckbox'`.
+
 ### TabbableContainer
 
 A `TabbableContainer` will only be navigated using the `tab` key. Every intended tabstop must have a tabIndex `0`.

package/src/navigable-container/container.js

@@ -99,7 +99,14 @@ class NavigableContainer extends Component {
 			// 'handling' the event, as voiceover will try to use arrow keys
 			// for highlighting text.
 			const targetRole = event.target.getAttribute( 'role' );
-			if ( MENU_ITEM_ROLES.includes( targetRole ) ) {
+			const targetHasMenuItemRole =
+				MENU_ITEM_ROLES.includes( targetRole );
+
+			// `preventDefault()` on tab to avoid having the browser move the focus
+			// after this component has already moved it.
+			const isTab = event.code === 'Tab';
+
+			if ( targetHasMenuItemRole || isTab ) {
 				event.preventDefault();
 			}
 		}

package/src/navigable-container/menu.js

@@ -4,7 +4,6 @@
  * WordPress dependencies
  */
 import { forwardRef } from '@wordpress/element';
-import { UP, DOWN, LEFT, RIGHT } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -16,26 +15,30 @@ export function NavigableMenu(
 	ref
 ) {
 	const eventToOffset = ( evt ) => {
-		const { keyCode } = evt;
+		const { code } = evt;
 
-		let next = [ DOWN ];
-		let previous = [ UP ];
+		let next = [ 'ArrowDown' ];
+		let previous = [ 'ArrowUp' ];
 
 		if ( orientation === 'horizontal' ) {
-			next = [ RIGHT ];
-			previous = [ LEFT ];
+			next = [ 'ArrowRight' ];
+			previous = [ 'ArrowLeft' ];
 		}
 
 		if ( orientation === 'both' ) {
-			next = [ RIGHT, DOWN ];
-			previous = [ LEFT, UP ];
+			next = [ 'ArrowRight', 'ArrowDown' ];
+			previous = [ 'ArrowLeft', 'ArrowUp' ];
 		}
 
-		if ( next.includes( keyCode ) ) {
+		if ( next.includes( code ) ) {
 			return 1;
-		} else if ( previous.includes( keyCode ) ) {
+		} else if ( previous.includes( code ) ) {
 			return -1;
-		} else if ( [ DOWN, UP, LEFT, RIGHT ].includes( keyCode ) ) {
+		} else if (
+			[ 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight' ].includes(
+				code
+			)
+		) {
 			// Key press should be handled, e.g. have event propagation and
 			// default behavior handled by NavigableContainer but not result
 			// in an offset.

package/src/navigable-container/stories/navigable-menu.js

@@ -0,0 +1,49 @@
+/**
+ * Internal dependencies
+ */
+import { NavigableMenu } from '..';
+
+export default {
+	title: 'Components/NavigableMenu',
+	component: NavigableMenu,
+	argTypes: {
+		children: { type: null },
+		cycle: {
+			type: 'boolean',
+		},
+		onNavigate: { action: 'onNavigate' },
+		orientation: {
+			options: [ 'horizontal', 'vertical' ],
+			control: { type: 'radio' },
+		},
+	},
+};
+
+export const Default = ( args ) => {
+	return (
+		<>
+			<button>Before navigable menu</button>
+			<NavigableMenu
+				{ ...args }
+				style={ {
+					margin: '32px 0',
+					padding: '16px',
+					border: '1px solid black',
+				} }
+			>
+				<div role="menuitem">Item 1 (non-tabbable, non-focusable)</div>
+				<button role="menuitem">Item 2 (tabbable, focusable)</button>
+				<button role="menuitem" disabled>
+					Item 3 (disabled, therefore non-tabbable and not-focusable)
+				</button>
+				<span role="menuitem" tabIndex={ -1 }>
+					Item 4 (non-tabbable, non-focusable)
+				</span>
+				<div role="menuitem" tabIndex={ 0 }>
+					Item 5 (tabbable, focusable)
+				</div>
+			</NavigableMenu>
+			<button>After navigable menu</button>
+		</>
+	);
+};

package/src/navigable-container/stories/tabbable-container.js

@@ -0,0 +1,40 @@
+/**
+ * Internal dependencies
+ */
+import { TabbableContainer } from '..';
+
+export default {
+	title: 'Components/TabbableContainer',
+	component: TabbableContainer,
+	argTypes: {
+		children: { type: null },
+		cycle: {
+			type: 'boolean',
+		},
+		onNavigate: { action: 'onNavigate' },
+	},
+};
+
+export const Default = ( args ) => {
+	return (
+		<>
+			<button>Before tabbable container</button>
+			<TabbableContainer
+				{ ...args }
+				style={ {
+					margin: '32px 0',
+					padding: '16px',
+					border: '1px solid black',
+				} }
+			>
+				<button>Item 1</button>
+				<button>Item 2</button>
+				<button disabled>Item 3 (disabled)</button>
+				<button tabIndex={ -1 }>Item 4 (non-tabbable)</button>
+				<button tabIndex={ 0 }>Item 5</button>
+				<button>Item 6</button>
+			</TabbableContainer>
+			<button>After tabbable container</button>
+		</>
+	);
+};

package/src/navigable-container/tabbable.js

@@ -3,7 +3,6 @@
  * WordPress dependencies
  */
 import { forwardRef } from '@wordpress/element';
-import { TAB } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -12,8 +11,8 @@ import NavigableContainer from './container';
 
 export function TabbableContainer( { eventToOffset, ...props }, ref ) {
 	const innerEventToOffset = ( evt ) => {
-		const { keyCode, shiftKey } = evt;
-		if ( TAB === keyCode ) {
+		const { code, shiftKey } = evt;
+		if ( 'Tab' === code ) {
 			return shiftKey ? -1 : 1;
 		}