useNavigateRegions: Use closest to determine the next region to navig…

…ate to (#44883)

* Store current region in state so region navigation remains in-order.

* Remove constant tabindex from regions. Add back when needed. Try to find better focus locations.

* Use closest to determine the current region since it operates in a DOM upwards motion. From the current element, I should get the closest wrapping region.

* Better code comment.

* Revert focus/tabindex changes.

* Try fixing E2E tests.

* Add changelog entry.

* Fix edge case with selector matching regions without our negative tabindex.

* Try again to only select regions with tabindex of -1. Fix E2E.

* Fix E2E.

* Fix E2E.

* Fix E2E.

packages/components/CHANGELOG.md

@@ -18,6 +18,7 @@
 -   `Navigator`: Allow calling `goTo` and `goBack` twice in one render cycle ([#46391](https://github.com/WordPress/gutenberg/pull/46391)).
 -   `Modal`: Fix unexpected modal closing in IME Composition ([#46453](https://github.com/WordPress/gutenberg/pull/46453)).
 -   `Toolbar`: Fix duplicate focus style on anchor link button ([#46759](https://github.com/WordPress/gutenberg/pull/46759)).
+-   `useNavigateRegions`: Ensure region navigation picks the next region based on where the current user focus is located instead of starting at the beginning ([#44883](https://github.com/WordPress/gutenberg/pull/44883)).
 
 ### Enhancements
 

packages/components/src/higher-order/navigate-regions/index.js

@@ -42,14 +42,17 @@ export function useNavigateRegions( shortcuts = defaultShortcuts ) {
 
 	function focusRegion( offset ) {
 		const regions = Array.from(
-			ref.current.querySelectorAll( '[role="region"]' )
+			ref.current.querySelectorAll( '[role="region"][tabindex="-1"]' )
 		);
 		if ( ! regions.length ) {
 			return;
 		}
 		let nextRegion = regions[ 0 ];
+		// Based off the current element, use closest to determine the wrapping region since this operates up the DOM. Also, match tabindex to avoid edge cases with regions we do not want.
 		const selectedIndex = regions.indexOf(
-			ref.current.ownerDocument.activeElement
+			ref.current.ownerDocument.activeElement.closest(
+				'[role="region"][tabindex="-1"]'
+			)
 		);
 		if ( selectedIndex !== -1 ) {
 			let nextIndex = selectedIndex + offset;

packages/e2e-tests/specs/editor/various/a11y.test.js

@@ -16,7 +16,9 @@ describe( 'a11y', () => {
 
 	it( 'tabs header bar', async () => {
 		await pressKeyWithModifier( 'ctrl', '`' );
-
+		await pressKeyWithModifier( 'ctrl', '`' );
+		await pressKeyWithModifier( 'ctrl', '`' );
+		await pressKeyWithModifier( 'ctrl', '`' );
 		await page.keyboard.press( 'Tab' );
 
 		const isFocusedToggle = await page.$eval(

packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js

@@ -111,16 +111,14 @@ describe( 'Navigating the block hierarchy', () => {
 
 		// Move focus to the sidebar area.
 		await pressKeyWithModifier( 'ctrl', '`' );
-		await pressKeyWithModifier( 'ctrl', '`' );
-		await pressKeyWithModifier( 'ctrl', '`' );
 		await tabToColumnsControl();
 
 		// Tweak the columns count by increasing it by one.
 		await page.keyboard.press( 'ArrowRight' );
 
 		// Navigate to the third column in the columns block.
-		await pressKeyWithModifier( 'ctrl', '`' );
-		await pressKeyWithModifier( 'ctrl', '`' );
+		await pressKeyWithModifier( 'ctrlShift', '`' );
+		await pressKeyWithModifier( 'ctrlShift', '`' );
 		await pressKeyTimes( 'Tab', 4 );
 		await pressKeyTimes( 'ArrowDown', 4 );
 		await page.waitForSelector(

packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js

@@ -23,6 +23,9 @@ const navigateToContentEditorTop = async () => {
 	// Use 'Ctrl+`' to return to the top of the editor.
 	await pressKeyWithModifier( 'ctrl', '`' );
 	await pressKeyWithModifier( 'ctrl', '`' );
+	await pressKeyWithModifier( 'ctrl', '`' );
+	await pressKeyWithModifier( 'ctrl', '`' );
+	await pressKeyWithModifier( 'ctrl', '`' );
 };
 
 const tabThroughParagraphBlock = async ( paragraphText ) => {
@@ -36,6 +39,10 @@ const tabThroughParagraphBlock = async ( paragraphText ) => {
 
 	await page.keyboard.press( 'Tab' );
 	await expect( await getActiveLabel() ).toBe( 'Open document settings' );
+
+	// Need to shift+tab here to end back in the block. If not, we'll be in the next region and it will only require 4 region jumps instead of 5.
+	await pressKeyWithModifier( 'shift', 'Tab' );
+	await expect( await getActiveLabel() ).toBe( 'Paragraph block' );
 };
 
 const tabThroughBlockToolbar = async () => {

packages/e2e-tests/specs/editor/various/sidebar.test.js

@@ -96,8 +96,6 @@ describe( 'Sidebar', () => {
 
 		// Region navigate to Sidebar.
 		await pressKeyWithModifier( 'ctrl', '`' );
-		await pressKeyWithModifier( 'ctrl', '`' );
-		await pressKeyWithModifier( 'ctrl', '`' );
 
 		// Tab lands at first (presumed selected) option "Post".
 		await page.keyboard.press( 'Tab' );

test/e2e/specs/editor/various/a11y-region-navigation.spec.js

@@ -22,7 +22,10 @@ test.describe( 'Region navigation (@firefox, @webkit)', () => {
 			attributes: { content: 'Dummy text' },
 		} );
 
-		// Navigate to first region and check that we made it.
+		// Navigate to first region and check that we made it. Must navigate forward 4 times as initial focus is placed in post title field.
+		await page.keyboard.press( 'Control+`' );
+		await page.keyboard.press( 'Control+`' );
+		await page.keyboard.press( 'Control+`' );
 		await page.keyboard.press( 'Control+`' );
 		const editorTopBar = page.locator(
 			'role=region[name="Editor top bar"i]'