Fix navigate regions backwards for macOS Firefox and Safari. (#45019)

* Fix navigate regions backwards for macOS Firefox and Safari.

* Add changelog entry.

* Add Playwright E2E for catching regressions in all 3 browsers.

* Adjust the test to cover browsers event.key inconsistency.

* Fix typo and add link to PR.

Co-authored-by: Alex Stine <alex.stine@yourtechadvisors.com>
Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

packages/components/CHANGELOG.md

@@ -48,6 +48,7 @@
 
 ### Bug Fix
 
+-   `useNavigateRegions`: Add new keyboard shortcut alias to cover backtick and tilde keys inconsistencies across browsers ([#45019](https://github.com/WordPress/gutenberg/pull/45019)).
 -   `Button`: Tweak the destructive button primary, link, and default variants ([#44427](https://github.com/WordPress/gutenberg/pull/44427)).
 -   `UnitControl`: Fix `disabled` style is overridden by core `form.css` style ([#45250](https://github.com/WordPress/gutenberg/pull/45250)).
 -   `ItemGroup`: fix RTL `Item` styles when rendered as a button ([#45280](https://github.com/WordPress/gutenberg/pull/45280)).

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

@@ -15,6 +15,10 @@ const defaultShortcuts = {
 			modifier: 'ctrlShift',
 			character: '`',
 		},
+		{
+			modifier: 'ctrlShift',
+			character: '~',
+		},
 		{
 			modifier: 'access',
 			character: 'p',

packages/edit-post/src/components/keyboard-shortcuts/index.js

@@ -133,6 +133,10 @@ function KeyboardShortcuts() {
 					modifier: 'access',
 					character: 'p',
 				},
+				{
+					modifier: 'ctrlShift',
+					character: '~',
+				},
 			],
 		} );
 

packages/edit-site/src/components/keyboard-shortcuts/index.js

@@ -180,6 +180,10 @@ function KeyboardShortcutsRegister() {
 					modifier: 'access',
 					character: 'p',
 				},
+				{
+					modifier: 'ctrlShift',
+					character: '~',
+				},
 			],
 		} );
 		registerShortcut( {

packages/edit-site/src/components/list/use-register-shortcuts.js

@@ -39,6 +39,10 @@ export default function useRegisterShortcuts() {
 					modifier: 'access',
 					character: 'p',
 				},
+				{
+					modifier: 'ctrlShift',
+					character: '~',
+				},
 			],
 		} );
 	}, [] );

packages/edit-widgets/src/components/keyboard-shortcuts/index.js

@@ -110,6 +110,10 @@ function KeyboardShortcutsRegister() {
 					modifier: 'access',
 					character: 'p',
 				},
+				{
+					modifier: 'ctrlShift',
+					character: '~',
+				},
 			],
 		} );
 	}, [ registerShortcut ] );

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

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Region navigation (@firefox, @webkit)', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllPosts();
+	} );
+
+	test( 'navigates forward and back again', async ( {
+		editor,
+		page,
+	}, testInfo ) => {
+		// Insert a paragraph block.
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: { content: 'Dummy text' },
+		} );
+
+		// Navigate to first region and check that we made it.
+		await page.keyboard.press( 'Control+`' );
+		const editorTopBar = page.locator(
+			'role=region[name="Editor top bar"i]'
+		);
+		await expect( editorTopBar ).toBeFocused();
+
+		// Navigate to next/second region and check that we made it.
+		await page.keyboard.press( 'Control+`' );
+		const editorContent = page.locator(
+			'role=region[name="Editor content"i]'
+		);
+		await expect( editorContent ).toBeFocused();
+
+		// Navigate to previous/first region and check that we made it.
+		// Make sure navigating backwards works also with the tilde character,
+		// as browsers interpret the combination of the crtl+shift+backtick keys
+		// and assign it to event.key inconsistently.
+		// See https://github.com/WordPress/gutenberg/pull/45019
+		if ( testInfo.project.name === 'chromium' ) {
+			await page.keyboard.press( 'Control+Shift+`' );
+		} else {
+			await page.keyboard.press( 'Control+Shift+~' );
+		}
+
+		await expect( editorTopBar ).toBeFocused();
+	} );
+} );