From a95dbeca982e20a155b874ef36011421e77d80e3 Mon Sep 17 00:00:00 2001
From: Andrew Matthews <andrew.matthews@wpengine.com>
Date: Fri, 26 Aug 2022 12:21:07 -0400
Subject: [PATCH 1/2] Make inline toolbar navigable by arrow keys

---
 .../components/rich-text/format-toolbar-container.js   | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/rich-text/format-toolbar-container.js b/packages/block-editor/src/components/rich-text/format-toolbar-container.js
index 24a931dc791754..a2fae8e1b9a8e5 100644
--- a/packages/block-editor/src/components/rich-text/format-toolbar-container.js
+++ b/packages/block-editor/src/components/rich-text/format-toolbar-container.js
@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { Popover, ToolbarGroup } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import {
@@ -15,6 +16,7 @@ import {
  */
 import BlockControls from '../block-controls';
 import FormatToolbar from './format-toolbar';
+import NavigableToolbar from '../navigable-toolbar';
 import { store as blockEditorStore } from '../../store';
 
 function InlineSelectionToolbar( { value, anchorRef, activeFormats } ) {
@@ -42,11 +44,15 @@ function InlineToolbar( { anchorRef } ) {
 			className="block-editor-rich-text__inline-format-toolbar"
 			__unstableSlotName="block-toolbar"
 		>
-			<div className="block-editor-rich-text__inline-format-toolbar-group">
+			<NavigableToolbar
+				className="block-editor-rich-text__inline-format-toolbar-group"
+				/* translators: accessibility text for the inline format toolbar */
+				aria-label={ __( 'Format tools' ) }
+			>
 				<ToolbarGroup>
 					<FormatToolbar />
 				</ToolbarGroup>
-			</div>
+			</NavigableToolbar>
 		</Popover>
 	);
 }

From 73200b15cb0151e017bf966d875c7d24494fee03 Mon Sep 17 00:00:00 2001
From: Andrew Matthews <andrew.matthews@wpengine.com>
Date: Tue, 30 Aug 2022 17:22:44 -0400
Subject: [PATCH 2/2] Update image block test for new arrow controls

---
 test/e2e/specs/editor/blocks/image.spec.js | 27 ++++++++++++++++------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js
index ae4465955d9924..a86f9c1d20443b 100644
--- a/test/e2e/specs/editor/blocks/image.spec.js
+++ b/test/e2e/specs/editor/blocks/image.spec.js
@@ -216,14 +216,27 @@ test.describe( 'Image', () => {
 		await expect( image ).toBeVisible();
 		await expect( image ).toHaveAttribute( 'src', new RegExp( fileName ) );
 
-		// Navigate to More,
-		await pageUtils.pressKeyWithModifier( 'shift', 'Tab' );
-		// Link,
-		await pageUtils.pressKeyWithModifier( 'shift', 'Tab' );
-		// Italic,
-		await pageUtils.pressKeyWithModifier( 'shift', 'Tab' );
-		// and finally Bold.
+		// Navigate to inline toolbar,
 		await pageUtils.pressKeyWithModifier( 'shift', 'Tab' );
+		await expect(
+			await page.evaluate( () =>
+				document.activeElement.getAttribute( 'aria-label' )
+			)
+		).toBe( 'Bold' );
+
+		// Bold to italic,
+		await page.keyboard.press( 'ArrowRight' );
+		// Italic to link,
+		await page.keyboard.press( 'ArrowRight' );
+		// Link to italic,
+		await page.keyboard.press( 'ArrowLeft' );
+		// Italic to bold.
+		await page.keyboard.press( 'ArrowLeft' );
+		await expect(
+			await page.evaluate( () =>
+				document.activeElement.getAttribute( 'aria-label' )
+			)
+		).toBe( 'Bold' );
 
 		await page.keyboard.press( 'Space' );
 		await page.keyboard.press( 'a' );