@wordpress/components 19.4.1 → 19.5.0

package/src/navigator/navigator-button/component.tsx

@@ -0,0 +1,61 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import { View } from '../../view';
+import { useNavigatorButton } from './hook';
+import type { NavigatorButtonProps } from '../types';
+
+function NavigatorButton(
+	props: WordPressComponentProps< NavigatorButtonProps, 'button' >,
+	forwardedRef: ForwardedRef< any >
+) {
+	const navigatorButtonProps = useNavigatorButton( props );
+
+	return <View ref={ forwardedRef } { ...navigatorButtonProps } />;
+}
+
+/**
+ * The `NavigatorButton` component can be used to navigate to a screen and should
+ * be used in combination with the `NavigatorProvider`, the `NavigatorScreen`
+ * and the `NavigatorBackButton` components (or the `useNavigator` hook).
+ *
+ * @example
+ * ```jsx
+ * import {
+ *   __experimentalNavigatorProvider as NavigatorProvider,
+ *   __experimentalNavigatorScreen as NavigatorScreen,
+ *   __experimentalNavigatorButton as NavigatorButton,
+ *   __experimentalNavigatorBackButton as NavigatorBackButton,
+ * } from '@wordpress/components';
+ *
+ * const MyNavigation = () => (
+ *   <NavigatorProvider initialPath="/">
+ *     <NavigatorScreen path="/">
+ *       <p>This is the home screen.</p>
+ *        <NavigatorButton path="/child">
+ *          Navigate to child screen.
+ *       </NavigatorButton>
+ *     </NavigatorScreen>
+ *
+ *     <NavigatorScreen path="/child">
+ *       <p>This is the child screen.</p>
+ *       <NavigatorBackButton>
+ *         Go back
+ *       </NavigatorBackButton>
+ *     </NavigatorScreen>
+ *   </NavigatorProvider>
+ * );
+ * ```
+ */
+const ConnectedNavigatorButton = contextConnect(
+	NavigatorButton,
+	'NavigatorButton'
+);
+
+export default ConnectedNavigatorButton;

package/src/navigator/navigator-button/hook.ts

@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+import { escapeAttribute } from '@wordpress/escape-html';
+
+/**
+ * Internal dependencies
+ */
+/**
+ * Internal dependencies
+ */
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import Button from '../../button';
+import useNavigator from '../use-navigator';
+import type { NavigatorButtonProps } from '../types';
+
+const cssSelectorForAttribute = ( attrName: string, attrValue: string ) =>
+	`[${ attrName }="${ attrValue }"]`;
+
+export function useNavigatorButton(
+	props: WordPressComponentProps< NavigatorButtonProps, 'button' >
+) {
+	const {
+		path,
+		onClick,
+		as = Button,
+		attributeName = 'id',
+		...otherProps
+	} = useContextSystem( props, 'NavigatorButton' );
+
+	const escapedPath = escapeAttribute( path );
+
+	const { goTo } = useNavigator();
+	const handleClick: React.MouseEventHandler< HTMLButtonElement > = useCallback(
+		( e ) => {
+			e.preventDefault();
+			goTo( escapedPath, {
+				focusTargetSelector: cssSelectorForAttribute(
+					attributeName,
+					escapedPath
+				),
+			} );
+			onClick?.( e );
+		},
+		[ goTo, onClick ]
+	);
+
+	return {
+		as,
+		onClick: handleClick,
+		...otherProps,
+		[ attributeName ]: escapedPath,
+	};
+}

package/src/navigator/navigator-button/index.ts

@@ -0,0 +1 @@
+export { default } from './component';

package/src/navigator/navigator-provider/README.md

@@ -4,47 +4,34 @@
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>
 
-The `NavigatorProvider` component allows rendering nested panels or menus (via the [`NavigatorScreen` component](/packages/components/src/navigator/navigator-screen/README.md)) and navigate between these different states (via the `useNavigator` hook). The Global Styles sidebar is an example of this.
+The `NavigatorProvider` component allows rendering nested views/panels/menus (via the [`NavigatorScreen` component](/packages/components/src/navigator/navigator-screen/README.md)) and navigate between these different states (via the [`NavigatorButton`](/packages/components/src/navigator/navigator-button/README.md) and [`NavigatorBackButton`](/packages/components/src/navigator/navigator-back-button/README.md) components or the `useNavigator` hook). The Global Styles sidebar is an example of this.
 
 ## Usage
 
 ```jsx
 import {
-	__experimentalNavigatorProvider as NavigatorProvider,
-	__experimentalNavigatorScreen as NavigatorScreen,
-	__experimentalUseNavigator as useNavigator,
+  __experimentalNavigatorProvider as NavigatorProvider,
+  __experimentalNavigatorScreen as NavigatorScreen,
+  __experimentalNavigatorButton as NavigatorButton,
+  __experimentalNavigatorBackButton as NavigatorBackButton,
 } from '@wordpress/components';
 
-function NavigatorButton( { path, ...props } ) {
-	const { goTo } = useNavigator();
-	return (
-		<Button
-		 variant="primary"
-		 onClick={ () => goTo( path ) }
-		 { ...props }
-	 />
- );
-}
-
-function NavigatorBackButton( props ) {
-	const { goBack } = useNavigator();
-	return <Button variant="secondary" onClick={ () => goBack() } { ...props } />;
-}
-
 const MyNavigation = () => (
-	<NavigatorProvider initialPath="/">
-		<NavigatorScreen path="/">
-			<p>This is the home screen.</p>
-			<NavigatorButton path="/child">
-				Navigate to child screen.
-			</NavigatorButton>
-		</NavigatorScreen>
-
-		<NavigatorScreen path="/child">
-			<p>This is the child screen.</p>
-			<NavigatorBackButton>Go back</NavigatorBackButton>
-		</NavigatorScreen>
-	</NavigatorProvider>
+  <NavigatorProvider initialPath="/">
+    <NavigatorScreen path="/">
+      <p>This is the home screen.</p>
+       <NavigatorButton path="/child">
+         Navigate to child screen.
+      </NavigatorButton>
+    </NavigatorScreen>
+
+    <NavigatorScreen path="/child">
+      <p>This is the child screen.</p>
+      <NavigatorBackButton>
+        Go back
+      </NavigatorBackButton>
+    </NavigatorScreen>
+  </NavigatorProvider>
 );
 ```
 

package/src/navigator/navigator-provider/component.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Ref } from 'react';
+import type { ForwardedRef } from 'react';
 import { css } from '@emotion/react';
 
 /**
@@ -28,7 +28,7 @@ import type {
 
 function NavigatorProvider(
 	props: WordPressComponentProps< NavigatorProviderProps, 'div' >,
-	forwardedRef: Ref< any >
+	forwardedRef: ForwardedRef< any >
 ) {
 	const {
 		initialPath,
@@ -100,44 +100,34 @@ function NavigatorProvider(
 }
 
 /**
- * The `NavigatorProvider` component allows rendering nested panels or menus (via the `NavigatorScreen` component) and navigate between these different states (via the `useNavigator` hook).
+ * The `NavigatorProvider` component allows rendering nested views/panels/menus
+ * (via the `NavigatorScreen` component and navigate between these different
+ * view (via the `NavigatorButton` and `NavigatorBackButton` components or the
+ * `useNavigator` hook).
  *
  * @example
  * ```jsx
  * import {
  *   __experimentalNavigatorProvider as NavigatorProvider,
  *   __experimentalNavigatorScreen as NavigatorScreen,
- *   __experimentalUseNavigator as useNavigator,
+ *   __experimentalNavigatorButton as NavigatorButton,
+ *   __experimentalNavigatorBackButton as NavigatorBackButton,
  * } from '@wordpress/components';
  *
- * function NavigatorButton( { path, ...props } ) {
- *  const { goTo } = useNavigator();
- *  return (
- *    <Button
- *      variant="primary"
- *      onClick={ () => goTo( path ) }
- *      { ...props }
- *    />
- *  );
- * }
- *
- * function NavigatorBackButton( props ) {
- *   const { goBack } = useNavigator();
- *   return <Button variant="secondary" onClick={ () => goBack() } { ...props } />;
- * }
- *
  * const MyNavigation = () => (
  *   <NavigatorProvider initialPath="/">
  *     <NavigatorScreen path="/">
  *       <p>This is the home screen.</p>
- *   	   <NavigatorButton path="/child">
+ *        <NavigatorButton path="/child">
  *          Navigate to child screen.
  *       </NavigatorButton>
  *     </NavigatorScreen>
  *
  *     <NavigatorScreen path="/child">
  *       <p>This is the child screen.</p>
- *       <NavigatorBackButton>Go back</NavigatorBackButton>
+ *       <NavigatorBackButton>
+ *         Go back
+ *       </NavigatorBackButton>
  *     </NavigatorScreen>
  *   </NavigatorProvider>
  * );

package/src/navigator/navigator-screen/README.md

@@ -4,7 +4,7 @@
 This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 </div>
 
-The `NavigatorScreen` component represents a single view/screen/panel/menu and is supposed to be used in combination with [the `NavigatorProvider` component](/packages/components/src/navigator/navigator-provider/README.md).
+The `NavigatorScreen` component represents a single view/screen/panel and should be used in combination with the [`NavigatorProvider`](/packages/components/src/navigator/navigator-provider/README.md), the [`NavigatorButton`](/packages/components/src/navigator/navigator-button/README.md) and the [`NavigatorBackButton`](/packages/components/src/navigator/navigator-back-button/README.md) components (or the `useNavigator` hook).
 
 ## Usage
 

package/src/navigator/navigator-screen/component.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Ref } from 'react';
+import type { ForwardedRef } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { motion, MotionProps } from 'framer-motion';
 import { css } from '@emotion/react';
@@ -17,6 +17,7 @@ import {
 	usePrevious,
 } from '@wordpress/compose';
 import { isRTL } from '@wordpress/i18n';
+import { escapeAttribute } from '@wordpress/escape-html';
 
 /**
  * Internal dependencies
@@ -43,7 +44,7 @@ type Props = Omit<
 	keyof MotionProps
 >;
 
-function NavigatorScreen( props: Props, forwardedRef: Ref< any > ) {
+function NavigatorScreen( props: Props, forwardedRef: ForwardedRef< any > ) {
 	const { children, className, path, ...otherProps } = useContextSystem(
 		props,
 		'NavigatorScreen'
@@ -51,7 +52,7 @@ function NavigatorScreen( props: Props, forwardedRef: Ref< any > ) {
 
 	const prefersReducedMotion = useReducedMotion();
 	const { location } = useContext( NavigatorContext );
-	const isMatch = location.path === path;
+	const isMatch = location.path === escapeAttribute( path );
 	const wrapperRef = useRef< HTMLDivElement >( null );
 
 	const previousLocation = usePrevious( location );
@@ -171,44 +172,34 @@ function NavigatorScreen( props: Props, forwardedRef: Ref< any > ) {
 }
 
 /**
- * The `NavigatorScreen` component represents a single view/screen/panel/menu and is supposed to be used in combination with the `NavigatorProvider` component.
+ * The `NavigatorScreen` component represents a single view/screen/panel and
+ * should be used in combination with the `NavigatorProvider`, the
+ * `NavigatorButton` and the `NavigatorBackButton` components (or the `useNavigator`
+ * hook).
  *
  * @example
  * ```jsx
  * import {
  *   __experimentalNavigatorProvider as NavigatorProvider,
  *   __experimentalNavigatorScreen as NavigatorScreen,
- *   __experimentalUseNavigator as useNavigator,
+ *   __experimentalNavigatorButton as NavigatorButton,
+ *   __experimentalNavigatorBackButton as NavigatorBackButton,
  * } from '@wordpress/components';
  *
- * function NavigatorButton( { path, ...props } ) {
- *  const { goTo } = useNavigator();
- *  return (
- *    <Button
- *      variant="primary"
- *      onClick={ () => goTo( path ) }
- *      { ...props }
- *    />
- *  );
- * }
- *
- * function NavigatorBackButton( props ) {
- *   const { goBack } = useNavigator();
- *   return <Button variant="secondary" onClick={ () => goBack() } { ...props } />;
- * }
- *
  * const MyNavigation = () => (
  *   <NavigatorProvider initialPath="/">
  *     <NavigatorScreen path="/">
  *       <p>This is the home screen.</p>
- *   	   <NavigatorButton path="/child">
+ *        <NavigatorButton path="/child">
  *          Navigate to child screen.
  *       </NavigatorButton>
  *     </NavigatorScreen>
  *
  *     <NavigatorScreen path="/child">
  *       <p>This is the child screen.</p>
- *       <NavigatorBackButton>Go back</NavigatorBackButton>
+ *       <NavigatorBackButton>
+ *         Go back
+ *       </NavigatorBackButton>
  *     </NavigatorScreen>
  *   </NavigatorProvider>
  * );

package/src/navigator/stories/index.js

@@ -11,43 +11,18 @@ import { Card, CardBody, CardFooter, CardHeader } from '../../card';
 import { HStack } from '../../h-stack';
 import { Flyout } from '../../flyout';
 import { useCx } from '../../utils/hooks/use-cx';
-import { NavigatorProvider, NavigatorScreen, useNavigator } from '../';
+import {
+	NavigatorProvider,
+	NavigatorScreen,
+	NavigatorButton,
+	NavigatorBackButton,
+} from '../';
 
 export default {
 	title: 'Components (Experimental)/Navigator',
 	component: NavigatorProvider,
 };
 
-function NavigatorButton( { path, ...props } ) {
-	const { goTo } = useNavigator();
-	const dataAttrName = 'data-navigator-focusable-id';
-	const dataAttrValue = path;
-
-	const dataAttrCssSelector = `[${ dataAttrName }="${ dataAttrValue }"]`;
-
-	const buttonProps = {
-		...props,
-		[ dataAttrName ]: dataAttrValue,
-	};
-
-	return (
-		<Button
-			variant="secondary"
-			onClick={ () =>
-				goTo( path, { focusTargetSelector: dataAttrCssSelector } )
-			}
-			{ ...buttonProps }
-		/>
-	);
-}
-
-function NavigatorBackButton( props ) {
-	const { goBack } = useNavigator();
-	return (
-		<Button variant="secondary" onClick={ () => goBack() } { ...props } />
-	);
-}
-
 const MyNavigation = () => {
 	const cx = useCx();
 	return (
@@ -61,15 +36,21 @@ const MyNavigation = () => {
 						<p>This is the home screen.</p>
 
 						<HStack justify="flex-start" wrap>
-							<NavigatorButton path="/child">
+							<NavigatorButton variant="secondary" path="/child">
 								Navigate to child screen.
 							</NavigatorButton>
 
-							<NavigatorButton path="/overflow-child">
+							<NavigatorButton
+								variant="secondary"
+								path="/overflow-child"
+							>
 								Navigate to screen with horizontal overflow.
 							</NavigatorButton>
 
-							<NavigatorButton path="/stickies">
+							<NavigatorButton
+								variant="secondary"
+								path="/stickies"
+							>
 								Navigate to screen with sticky content.
 							</NavigatorButton>
 
@@ -93,7 +74,9 @@ const MyNavigation = () => {
 				<Card>
 					<CardBody>
 						<p>This is the child screen.</p>
-						<NavigatorBackButton>Go back</NavigatorBackButton>
+						<NavigatorBackButton variant="secondary">
+							Go back
+						</NavigatorBackButton>
 					</CardBody>
 				</Card>
 			</NavigatorScreen>
@@ -101,7 +84,9 @@ const MyNavigation = () => {
 			<NavigatorScreen path="/overflow-child">
 				<Card>
 					<CardBody>
-						<NavigatorBackButton>Go back</NavigatorBackButton>
+						<NavigatorBackButton variant="secondary">
+							Go back
+						</NavigatorBackButton>
 						<div
 							className={ cx(
 								css( `
@@ -129,7 +114,9 @@ const MyNavigation = () => {
 			<NavigatorScreen path="/stickies">
 				<Card>
 					<Sticky as={ CardHeader } z="2">
-						<NavigatorBackButton>Go back</NavigatorBackButton>
+						<NavigatorBackButton variant="secondary">
+							Go back
+						</NavigatorBackButton>
 					</Sticky>
 					<CardBody>
 						<Sticky top="69px" colors="papayawhip/peachpuff">

package/src/navigator/test/index.js

@@ -6,7 +6,12 @@ import { render, screen, fireEvent } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import { NavigatorProvider, NavigatorScreen, useNavigator } from '../';
+import {
+	NavigatorProvider,
+	NavigatorScreen,
+	NavigatorButton,
+	NavigatorBackButton,
+} from '../';
 
 jest.mock( 'framer-motion', () => {
 	const actual = jest.requireActual( 'framer-motion' );
@@ -23,57 +28,53 @@ jest.mock( 'framer-motion', () => {
 	};
 } );
 
+const INVALID_HTML_ATTRIBUTE = {
+	raw: ' "\'><=invalid_path',
+	escaped: " &quot;'&gt;<=invalid_path",
+};
+
 const PATHS = {
 	HOME: '/',
 	CHILD: '/child',
 	NESTED: '/child/nested',
+	INVALID_HTML_ATTRIBUTE: INVALID_HTML_ATTRIBUTE.raw,
 	NOT_FOUND: '/not-found',
 };
 
-function NavigatorButton( { path, onClick, ...props } ) {
-	const { goTo } = useNavigator();
+function CustomNavigatorButton( { path, onClick, ...props } ) {
 	return (
-		<button
+		<NavigatorButton
 			onClick={ () => {
-				goTo( path );
 				// Used to spy on the values passed to `navigator.goTo`
 				onClick?.( { type: 'goTo', path } );
 			} }
+			path={ path }
 			{ ...props }
 		/>
 	);
 }
 
-function NavigatorButtonWithFocusRestoration( { path, onClick, ...props } ) {
-	const { goTo } = useNavigator();
-	const dataAttrName = 'data-navigator-focusable-id';
-	const dataAttrValue = path;
-
-	const dataAttrCssSelector = `[${ dataAttrName }="${ dataAttrValue }"]`;
-
-	const buttonProps = {
-		...props,
-		[ dataAttrName ]: dataAttrValue,
-	};
-
+function CustomNavigatorButtonWithFocusRestoration( {
+	path,
+	onClick,
+	...props
+} ) {
 	return (
-		<button
+		<NavigatorButton
 			onClick={ () => {
-				goTo( path, { focusTargetSelector: dataAttrCssSelector } );
 				// Used to spy on the values passed to `navigator.goTo`
 				onClick?.( { type: 'goTo', path } );
 			} }
-			{ ...buttonProps }
+			path={ path }
+			{ ...props }
 		/>
 	);
 }
 
-function NavigatorBackButton( { onClick, ...props } ) {
-	const { goBack } = useNavigator();
+function CustomNavigatorBackButton( { onClick, ...props } ) {
 	return (
-		<button
+		<NavigatorBackButton
 			onClick={ () => {
-				goBack();
 				// Used to spy on the values passed to `navigator.goBack`
 				onClick?.( { type: 'goBack' } );
 			} }
@@ -89,38 +90,51 @@ const MyNavigation = ( {
 	<NavigatorProvider initialPath={ initialPath }>
 		<NavigatorScreen path={ PATHS.HOME }>
 			<p>This is the home screen.</p>
-			<NavigatorButton
+			<CustomNavigatorButton
 				path={ PATHS.NOT_FOUND }
 				onClick={ onNavigatorButtonClick }
 			>
 				Navigate to non-existing screen.
-			</NavigatorButton>
-			<NavigatorButtonWithFocusRestoration
+			</CustomNavigatorButton>
+			<CustomNavigatorButton
 				path={ PATHS.CHILD }
 				onClick={ onNavigatorButtonClick }
 			>
 				Navigate to child screen.
-			</NavigatorButtonWithFocusRestoration>
+			</CustomNavigatorButton>
+			<CustomNavigatorButton
+				path={ PATHS.INVALID_HTML_ATTRIBUTE }
+				onClick={ onNavigatorButtonClick }
+			>
+				Navigate to screen with an invalid HTML value as a path.
+			</CustomNavigatorButton>
 		</NavigatorScreen>
 
 		<NavigatorScreen path={ PATHS.CHILD }>
 			<p>This is the child screen.</p>
-			<NavigatorButtonWithFocusRestoration
+			<CustomNavigatorButtonWithFocusRestoration
 				path={ PATHS.NESTED }
 				onClick={ onNavigatorButtonClick }
 			>
 				Navigate to nested screen.
-			</NavigatorButtonWithFocusRestoration>
-			<NavigatorBackButton onClick={ onNavigatorButtonClick }>
+			</CustomNavigatorButtonWithFocusRestoration>
+			<CustomNavigatorBackButton onClick={ onNavigatorButtonClick }>
 				Go back
-			</NavigatorBackButton>
+			</CustomNavigatorBackButton>
 		</NavigatorScreen>
 
 		<NavigatorScreen path={ PATHS.NESTED }>
 			<p>This is the nested screen.</p>
-			<NavigatorBackButton onClick={ onNavigatorButtonClick }>
+			<CustomNavigatorBackButton onClick={ onNavigatorButtonClick }>
 				Go back
-			</NavigatorBackButton>
+			</CustomNavigatorBackButton>
+		</NavigatorScreen>
+
+		<NavigatorScreen path={ PATHS.INVALID_HTML_ATTRIBUTE }>
+			<p>This is the screen with an invalid HTML value as a path.</p>
+			<CustomNavigatorBackButton onClick={ onNavigatorButtonClick }>
+				Go back
+			</CustomNavigatorBackButton>
 		</NavigatorScreen>
 
 		{ /* A `NavigatorScreen` with `path={ PATHS.NOT_FOUND }` is purposefully not included */ }
@@ -143,6 +157,13 @@ const getNestedScreen = ( { throwIfNotFound } = {} ) =>
 	getNavigationScreenByText( 'This is the nested screen.', {
 		throwIfNotFound,
 	} );
+const getInvalidHTMLPathScreen = ( { throwIfNotFound } = {} ) =>
+	getNavigationScreenByText(
+		'This is the screen with an invalid HTML value as a path.',
+		{
+			throwIfNotFound,
+		}
+	);
 
 const getNavigationButtonByText = ( text, { throwIfNotFound = true } = {} ) => {
 	const fnName = throwIfNotFound ? 'getByRole' : 'queryByRole';
@@ -160,6 +181,13 @@ const getToNestedScreenButton = ( { throwIfNotFound } = {} ) =>
 	getNavigationButtonByText( 'Navigate to nested screen.', {
 		throwIfNotFound,
 	} );
+const getToInvalidHTMLPathScreenButton = ( { throwIfNotFound } = {} ) =>
+	getNavigationButtonByText(
+		'Navigate to screen with an invalid HTML value as a path.',
+		{
+			throwIfNotFound,
+		}
+	);
 const getBackButton = ( { throwIfNotFound } = {} ) =>
 	getNavigationButtonByText( 'Go back', {
 		throwIfNotFound,
@@ -350,4 +378,31 @@ describe( 'Navigator', () => {
 		expect( getHomeScreen() ).toBeInTheDocument();
 		expect( getToChildScreenButton() ).toHaveFocus();
 	} );
+
+	it( 'should escape the value of the `path` prop', () => {
+		render( <MyNavigation /> );
+
+		expect( getHomeScreen() ).toBeInTheDocument();
+		expect( getToInvalidHTMLPathScreenButton() ).toBeInTheDocument();
+
+		// The following line tests the implementation details, but it's necessary
+		// as this would be otherwise transparent to the user.
+		expect( getToInvalidHTMLPathScreenButton() ).toHaveAttribute(
+			'id',
+			INVALID_HTML_ATTRIBUTE.escaped
+		);
+
+		// Navigate to screen with an invalid HTML value for its `path`
+		fireEvent.click( getToInvalidHTMLPathScreenButton() );
+
+		expect( getInvalidHTMLPathScreen() ).toBeInTheDocument();
+		expect( getBackButton() ).toBeInTheDocument();
+
+		// Navigate back to home screen, check that the focus restoration selector
+		// worked correctly despite the escaping
+		fireEvent.click( getBackButton() );
+
+		expect( getHomeScreen() ).toBeInTheDocument();
+		expect( getToInvalidHTMLPathScreenButton() ).toHaveFocus();
+	} );
 } );