Writing flow: fix vertical arrow nav in table (and generally grid) #22105
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
ellatrix
added
[Block] Table
|
Size Change: +51 B (0%) Total Size: 821 kB
ℹ️ View Unchanged
|
ellatrix
changed the title
ellatrix
commented
May 5, 2020
| @@ -80,25 +80,7 @@ describe( 'Writing Flow', () => { | |||
| activeBlockName = await getActiveBlockName(); | |||
| expect( activeBlockName ).toBe( 'core/column' ); | |||
| await page.keyboard.press( 'ArrowUp' ); | |||
| activeBlockName = await getActiveBlockName(); | |||
There was a problem hiding this comment.
This is expected. Arrow up shouldn't go through all the previous columns.
|
@talldan May be of interest to you since you've also looked at navigation for grids. Hopefully this is a good general solution. We can tweak it if we have more cases. |
|
Hey @ellatrix That's pretty cool, much simpler than the solution I had! I did some testing and mostly it seems to work well, though I noticed that sometimes when moving in to the last cell in a table in Firefox, I'm unable to move back out again using the left or up arrow keys. |
|
It seems to work fine for me. It does scroll when I press arrow up, but the focus is correct. Do you have more specific step to reproduce?
|
5 tasks
5 tasks
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.
Description
Fixes #14675.
When using the up and down arrow keys, and there are tabbable elements placed in a row (e.g. table), the focus visually moves horizontally, which feels wrong.
The solution is to exclude tabbable elements that are in the same row.
How has this been tested?
Screenshots
Types of changes
Checklist: