From 19cc8ecc49da79e25bc7ed62ef66f8e83bf1a27b Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Wed, 5 Jul 2023 11:03:44 +1000
Subject: [PATCH 1/2] Guide: Place focus on the guide's container instead of
 its first tabbable

---
 packages/components/src/guide/index.tsx | 23 ++++++++++-------------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/packages/components/src/guide/index.tsx b/packages/components/src/guide/index.tsx
index e6a2d4c1252eb8..c5655847d99e5e 100644
--- a/packages/components/src/guide/index.tsx
+++ b/packages/components/src/guide/index.tsx
@@ -9,7 +9,6 @@ import classnames from 'classnames';
 import { useState, useEffect, Children, useRef } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
-import { focus } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -59,9 +58,17 @@ function Guide( {
 	onFinish,
 	pages = [],
 }: GuideProps ) {
-	const guideContainer = useRef< HTMLDivElement >( null );
+	const ref = useRef< HTMLDivElement >( null );
 	const [ currentPage, setCurrentPage ] = useState( 0 );
 
+	useEffect( () => {
+		// Place focus at the top of the guide on mount and when the page changes.
+		const frame = ref.current?.querySelector( '.components-guide' );
+		if ( frame instanceof HTMLElement ) {
+			frame.focus();
+		}
+	}, [ currentPage ] );
+
 	useEffect( () => {
 		if ( Children.count( children ) ) {
 			deprecated( 'Passing children to <Guide>', {
@@ -71,16 +78,6 @@ 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.
-		if ( guideContainer.current ) {
-			(
-				focus.tabbable.find( guideContainer.current ) as HTMLElement[]
-			 )[ 0 ]?.focus();
-		}
-	}, [ currentPage ] );
-
 	if ( Children.count( children ) ) {
 		pages =
 			Children.map( children, ( child ) => ( {
@@ -124,7 +121,7 @@ function Guide( {
 					event.preventDefault();
 				}
 			} }
-			ref={ guideContainer }
+			ref={ ref }
 		>
 			<div className="components-guide__container">
 				<div className="components-guide__page">

From 8a3a6aa8d17b023248934b3a6f22046e6cd49ec2 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Wed, 5 Jul 2023 11:10:48 +1000
Subject: [PATCH 2/2] Update CHANGELOG

---
 packages/components/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index c690c15bce3e95..c83fe7fc5ea82a 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -17,6 +17,7 @@
 -   `Modal`: Add small top padding to the content so that avoid cutting off the visible outline when hovering items ([#51829](https://github.com/WordPress/gutenberg/pull/51829)).
 -   `DropdownMenu`: fix icon style when dashicon is used ([#43574](https://github.com/WordPress/gutenberg/pull/43574)).
 -   `UnitControl`: Fix crash when certain units are used ([#52211](https://github.com/WordPress/gutenberg/pull/52211)).
+-   `Guide`: Place focus on the guide's container instead of its first tabbable ([#52300](https://github.com/WordPress/gutenberg/pull/52300)).
 
 ## 25.2.0 (2023-06-23)