Writing flow: Improve keyboard navigation on certain input types #43667
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
t-hamano
added
[Focus] Accessibility (a11y)
|
Size Change: -412 B (0%) Total Size: 1.4 MB
ℹ️ View Unchanged
|
t-hamano
changed the title
t-hamano
commented
Aug 28, 2022
packages/e2e-tests/specs/editor/various/toolbar-roving-tabindex.test.js
Outdated
Show resolved
Hide resolved
|
@t-hamano Still want to try to get this in or want to close it? |
Add test Fix e2e test enable left/right native event on input number field Remove changes test test
t-hamano
force-pushed
the
fix/vertical-navigation-input
branch
from
0496f9c
to
d7f6189
Compare
|
Flaky tests detected in 6f3718e. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5051887032
|
t-hamano
commented
May 21, 2023
| @@ -96,6 +96,7 @@ test.describe( 'Toolbar roving tabindex', () => { | |||
| pageUtils, | |||
| } ) => { | |||
| await editor.insertBlock( { name: 'core/table' } ); | |||
| await page.keyboard.press( 'ArrowLeft' ); | |||
There was a problem hiding this comment.
Immediately after the table is inserted, the focus is on the input number field (Column Count).
Pressing the up or down key in this state will respect the upper limit of the number (which is a native event), so press the left key in advance to give focus to the block wrapper.
|
Thanks for the comment. Even with the latest trunk, this problem seems to remain. I rebased this PR using the latest trunk. I believe this PR will solve the problem. |
alexstine
approved these changes
May 22, 2023
| if ( isVertical && ! hasModifier ) { | ||
| if ( tagName === 'INPUT' ) { | ||
| const vertiaclInputTypes = [ |
|
Thanks for the review, @alexstine! |
|
See related #48256 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fix #40608
Follow-up on #41538
What?
This PR improves arrow key actions on some input fields on the block editor.
Why?
Vertical keystrokes
Currently, vertical navigation takes precedence in all elements for up/down key operations.
Therefore, as reported in #40608, using the up/down keys to manipulate the number of rows/columns in a table block ignores the native event that increases/decreases the number and loses focus.
Horizontal keystrokes
In #41538, only simple input fields that don't require left and right arrow keys are allowed to navigate horizontally.
However, the input
numberfield is not allowed, so navigation with the left/right keys is not possible when the focus is on a row/column field in a table block.How?
Vertical keystrokes
Referring to the MDN page, I have given preference to native operation on all input elements that we believe accept up/down keys.
Ideally, up/down keys should be accepted for non-input elements such as the
ComboboxControlcomponent (reported in #38548), but in this case, we are limiting it to pure input elements.Horizontal keystrokes
I added the number type to the input elements which are allowed to navigate horizontally with left and right keys.
This allows left/right navigation from the row/column input field in the table block.
Testing Instructions
Vertical keystrokes
To test the behavior on the block editor, rewrite the edit component of the code block as follows
packages/block-library/src/code/edit.jsUse the tab, enter and arrow keys to confirm you can control all input elements without losing focus.
87e889efdca32fd89691cb22b92a913e.mp4
Horizontal keystrokes
28772a977dcfc3d5456a5d3e45f6a824.mp4