Improve block inserter keyboard navigation #26938
Merged
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
|
Size Change: +373 B (0%) Total Size: 1.4 MB
ℹ️ View Unchanged
|
gziolo
added
[Focus] Accessibility (a11y)
diegohaz
changed the title
diegohaz
added
[Type] Enhancement
diegohaz
requested review from
adamziel,
ajitbohra,
chrisvanpatten,
draganescu,
ellatrix,
kevin940726,
noisysocks,
talldan and
tellthemachines
as code owners
kevin940726
reviewed
Dec 3, 2020
packages/block-editor/src/components/block-types-list/style.scss
Outdated
Show resolved
Hide resolved
|
Tested on macOS with VoiceOver/Safari and Windows 10 with NVDA/Firefox. The keyboard-only interaction is great, it's much easier to get to a specific block. With the screen readers, things get a bit confusing: each section still has a role of If we implement this change, we should replace the |
tellthemachines
added
the
Needs Accessibility Feedback
|
I've tested the latest changes, here are my findings.
That's all for now, thanks. |
|
@alexstine Thanks a lot for the feedback.
That makes sense. Since this PR aims to improve the navigation while in the block list, I think we should address that in a follow-up PR.
Good catch! Fixed that.
I made another PR to discuss and address that (#28393).
The instructions are added through a I couldn't find a way to announce the instructions in between them, but I delayed the instructions a little bit so NVDA announces just like VoiceOver (category name, first block, and instructions), which I think also makes sense. |
|
NVDA still announces instructions, category name, and then the first item. If there's no way around this, I wouldn't call it a blocker by any means. Everything else seems to be working fine. Thanks. |
|
Hi, @tellthemachines, @gziolo, @kevin940726. 👋 Could you do another review on this? Also cc @talldan |
|
@diegohaz This is wonderful! I'm excited to see the My a11y knowledge is not as deep as some of the folks here. It's always a pleasure learning new things about this, especially through something like Reakit. I did interaction testing with both voiceover on and off. As others have noted, it's a great improvement! From a code perspective, I think the structure works very well. In the case of the 3-grid chunked layout of Inserter. Is there a difference between chunking items with Thanks <3 |
gziolo
reviewed
Mar 8, 2021
| import InserterDraggableBlocks from '../inserter-draggable-blocks'; | ||
|
|
||
| function InserterListItem( { | ||
| className, | ||
| composite, | ||
| isFirst, |
There was a problem hiding this comment.
InserterListItem isn't exposed as part of the public API so it's fine to change 👍🏻
sarayourfriend
approved these changes
Mar 11, 2021
kevin940726
approved these changes
Mar 12, 2021
@ItsJonQ Yes! The orientation will only enable/disable arrow keys, but pressing vertical arrow keys will still move to left/right. |
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.
The problem
Currently, the block inserter (the one you open by clicking on the
Add blockbutton at the header toolbar) is visually represented as a two-dimensional grid. To reduce the number of tab stops, each category is implemented as a listbox, so keyboard and screen reader users can use arrow keys to move through the options.The problem is that, for sighted keyboard users — who can see that there are items above and below the currently focused one —, moving to the right, and not down, by pressing the down arrow key, can be problematic.
This solution
This PR implements two-dimensional keyboard navigation on the block inserter based on #24975 (comment) and #21080 (comment) (please, refer to these issues for more context on the implementation and alternatives).
How to test
Try the block inserter keyboard navigation (using arrow keys) on different browsers and screen readers.