From 1a4c2dd8a21b6f78afd6cf02edc9f478033a2625 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 3 Jun 2022 23:00:35 +0900 Subject: [PATCH 1/3] Writing flow: Fix focus trap on certain input types --- .../components/writing-flow/use-arrow-nav.js | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/writing-flow/use-arrow-nav.js b/packages/block-editor/src/components/writing-flow/use-arrow-nav.js index d02233650c392f..502c1f997d5fbb 100644 --- a/packages/block-editor/src/components/writing-flow/use-arrow-nav.js +++ b/packages/block-editor/src/components/writing-flow/use-arrow-nav.js @@ -43,9 +43,25 @@ export function isNavigationCandidate( element, keyCode, hasModifier ) { return true; } - // Native inputs should not navigate horizontally. const { tagName } = element; - return tagName !== 'INPUT' && tagName !== 'TEXTAREA'; + + // 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', + 'color', + 'file', + 'image', + 'radio', + 'reset', + 'submit', + ]; + return simpleInputTypes.includes( element.getAttribute( 'type' ) ); + } + + // Native textareas should not navigate horizontally. + return tagName !== 'TEXTAREA'; } /** From 14002130344697ee74fc36ba3c0e6906fbd3ee7d Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 3 Jun 2022 23:02:27 +0900 Subject: [PATCH 2/3] Add test --- .../src/components/writing-flow/test/index.js | 26 ++++++++++++++++--- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/writing-flow/test/index.js b/packages/block-editor/src/components/writing-flow/test/index.js index 8a33bec7597ee8..39fc379111bd65 100644 --- a/packages/block-editor/src/components/writing-flow/test/index.js +++ b/packages/block-editor/src/components/writing-flow/test/index.js @@ -12,7 +12,13 @@ describe( 'isNavigationCandidate', () => { let elements; beforeAll( () => { elements = {}; - elements.input = document.createElement( 'input' ); + + elements.inputText = document.createElement( 'input' ); + elements.inputText.setAttribute( 'type', 'text' ); + + elements.inputCheckbox = document.createElement( 'input' ); + elements.inputCheckbox.setAttribute( 'type', 'checkbox' ); + elements.contentEditable = document.createElement( 'p' ); elements.contentEditable.contentEditable = true; } ); @@ -20,7 +26,7 @@ describe( 'isNavigationCandidate', () => { it( 'should return true if vertically navigating input without modifier', () => { [ UP, DOWN ].forEach( ( keyCode ) => { const result = isNavigationCandidate( - elements.input, + elements.inputText, keyCode, false ); @@ -32,7 +38,7 @@ describe( 'isNavigationCandidate', () => { it( 'should return false if vertically navigating input with modifier', () => { [ UP, DOWN ].forEach( ( keyCode ) => { const result = isNavigationCandidate( - elements.input, + elements.inputText, keyCode, true ); @@ -44,7 +50,7 @@ describe( 'isNavigationCandidate', () => { it( 'should return false if horizontally navigating input', () => { [ LEFT, RIGHT ].forEach( ( keyCode ) => { const result = isNavigationCandidate( - elements.input, + elements.inputText, keyCode, false ); @@ -53,6 +59,18 @@ describe( 'isNavigationCandidate', () => { } ); } ); + it( 'should return true if horizontally navigating simple inputs like checkboxes', () => { + [ LEFT, RIGHT ].forEach( ( keyCode ) => { + const result = isNavigationCandidate( + elements.inputCheckbox, + keyCode, + false + ); + + expect( result ).toBe( true ); + } ); + } ); + it( 'should return true if horizontally navigating non-input', () => { [ LEFT, RIGHT ].forEach( ( keyCode ) => { const result = isNavigationCandidate( From 0b6bdb6abdba973363c63b0a378fdc3ccc5aef6e Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 8 Jun 2022 20:44:34 +0900 Subject: [PATCH 3/3] Add changelog --- packages/block-editor/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md index c4912392e8de7b..ac0182d100d9b1 100644 --- a/packages/block-editor/CHANGELOG.md +++ b/packages/block-editor/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Bug fix + +- Fix focus trap on certain `input` elements when navigating within a block with the left/right arrow keys ([#41538](https://github.com/WordPress/gutenberg/pull/41538)). + ## 9.2.0 (2022-06-01) ## 9.1.0 (2022-05-18)