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) 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 ', { @@ -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 } >