Writing flow: Improve keyboard navigation on certain input types (#43667

)

* Writing flow: Fix vertial focus trap on certain input types

Add test

Fix e2e test

enable left/right native event on input number field

Remove changes

test

test

* Fix typo

packages/block-editor/src/components/writing-flow/test/index.js

@@ -19,6 +19,9 @@ describe( 'isNavigationCandidate', () => {
 		elements.inputCheckbox = document.createElement( 'input' );
 		elements.inputCheckbox.setAttribute( 'type', 'checkbox' );
 
+		elements.inputNumber = document.createElement( 'input' );
+		elements.inputNumber.setAttribute( 'type', 'number' );
+
 		elements.contentEditable = document.createElement( 'p' );
 		elements.contentEditable.contentEditable = true;
 	} );
@@ -47,6 +50,18 @@ describe( 'isNavigationCandidate', () => {
 		} );
 	} );
 
+	it( 'should return false if vertically navigating inputs with vertial support like number', () => {
+		[ UP, DOWN ].forEach( ( keyCode ) => {
+			const result = isNavigationCandidate(
+				elements.inputNumber,
+				keyCode,
+				false
+			);
+
+			expect( result ).toBe( false );
+		} );
+	} );
+
 	it( 'should return false if horizontally navigating input', () => {
 		[ LEFT, RIGHT ].forEach( ( keyCode ) => {
 			const result = isNavigationCandidate(

packages/block-editor/src/components/writing-flow/use-arrow-nav.js

@@ -32,27 +32,40 @@ import { store as blockEditorStore } from '../../store';
  */
 export function isNavigationCandidate( element, keyCode, hasModifier ) {
 	const isVertical = keyCode === UP || keyCode === DOWN;
+	const { tagName } = element;
+	const elementType = element.getAttribute( 'type' );
 
-	// Currently, all elements support unmodified vertical navigation.
+	// Native inputs should not navigate vertically, unless they are simple types that don't need up/down arrow keys.
 	if ( isVertical && ! hasModifier ) {
+		if ( tagName === 'INPUT' ) {
+			const verticalInputTypes = [
+				'date',
+				'datetime-local',
+				'month',
+				'number',
+				'range',
+				'time',
+				'week',
+			];
+			return ! verticalInputTypes.includes( elementType );
+		}
 		return true;
 	}
 
-	const { tagName } = element;
-
 	// Native inputs should not navigate horizontally, unless they are simple types that don't need left/right arrow keys.
 	if ( tagName === 'INPUT' ) {
 		const simpleInputTypes = [
 			'button',
 			'checkbox',
+			'number',
 			'color',
 			'file',
 			'image',
 			'radio',
 			'reset',
 			'submit',
 		];
-		return simpleInputTypes.includes( element.getAttribute( 'type' ) );
+		return simpleInputTypes.includes( elementType );
 	}
 
 	// Native textareas should not navigate horizontally.

test/e2e/specs/editor/various/toolbar-roving-tabindex.spec.js

@@ -96,6 +96,7 @@ test.describe( 'Toolbar roving tabindex', () => {
 		pageUtils,
 	} ) => {
 		await editor.insertBlock( { name: 'core/table' } );
+		await page.keyboard.press( 'ArrowLeft' );
 		await ToolbarRovingTabindexUtils.testBlockToolbarKeyboardNavigation(
 			'Block: Table',
 			'Table'