Fix focus loss when navigating the guide component (#40324)

packages/components/src/guide/index.js

@@ -6,18 +6,18 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState, useEffect, Children } from '@wordpress/element';
+import { useState, useEffect, Children, useRef } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 import { LEFT, RIGHT } from '@wordpress/keycodes';
+import { focus } from '@wordpress/dom';
 
 /**
  * Internal dependencies
  */
 import Modal from '../modal';
 import Button from '../button';
 import PageControl from './page-control';
-import FinishButton from './finish-button';
 
 export default function Guide( {
 	children,
@@ -27,6 +27,7 @@ export default function Guide( {
 	onFinish,
 	pages = [],
 } ) {
+	const guideContainer = useRef();
 	const [ currentPage, setCurrentPage ] = useState( 0 );
 
 	useEffect( () => {
@@ -38,6 +39,12 @@ export default function Guide( {
 		}
 	}, [ children ] );
 
+	useEffect( () => {
+		// Each time we change the current page, start from the first element of the page.
+		// This also solves any focus loss that can happen.
+		focus.tabbable.find( guideContainer.current )?.[ 0 ]?.focus();
+	}, [ currentPage ] );
+
 	if ( Children.count( children ) ) {
 		pages = Children.map( children, ( child ) => ( { content: child } ) );
 	}
@@ -73,6 +80,7 @@ export default function Guide( {
 					goForward();
 				}
 			} }
+			ref={ guideContainer }
 		>
 			<div className="components-guide__container">
 				<div className="components-guide__page">
@@ -87,15 +95,6 @@ export default function Guide( {
 					) }
 
 					{ pages[ currentPage ].content }
-
-					{ ! canGoForward && (
-						<FinishButton
-							className="components-guide__inline-finish-button"
-							onClick={ onFinish }
-						>
-							{ finishButtonText || __( 'Finish' ) }
-						</FinishButton>
-					) }
 				</div>
 
 				<div className="components-guide__footer">
@@ -116,12 +115,12 @@ export default function Guide( {
 						</Button>
 					) }
 					{ ! canGoForward && (
-						<FinishButton
+						<Button
 							className="components-guide__finish-button"
 							onClick={ onFinish }
 						>
 							{ finishButtonText || __( 'Finish' ) }
-						</FinishButton>
+						</Button>
 					) }
 				</div>
 			</div>

packages/components/src/guide/style.scss

@@ -128,8 +128,4 @@
 	&.components-guide__finish-button {
 		right: $grid-unit-40;
 	}
-
-	&.components-guide__inline-finish-button {
-		display: none;
-	}
 }