Make inline toolbar navigable by arrow keys (#43645)

* Make inline toolbar navigable by arrow keys

* Update image block test for new arrow controls

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>
 	);
 }

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' );