Template part selection component - fix keyboard controls. #25881
Conversation
Addison-Stavlo
requested review from
Copons,
david-szabo97,
jeyip,
noahtallen and
vindl
Addison-Stavlo
requested review from
Soean,
ajitbohra and
talldan
as code owners
noahtallen
left a comment
noahtallen
left a comment
There was a problem hiding this comment.
This works perfectly for me, nice! Just left a couple of notes (I think the package-lock might need to be added before merge). 🚀
|
Size Change: +8.86 kB (0%) Total Size: 1.19 MB
ℹ️ View Unchanged
|
|
Non-blocking:
I can reproduce this in Firefox, Safari, Chrome, and Edge. Non blocking because this seems like an edge case and isn't isolated to this branch |
|
In Safari, for me, pressing the tab key from the template selector focuses the url search bar instead of the item list. (This was not happening for me in master) All other behavior works as described in Chrome, Firefox, Edge, Safari, and IE11 |
|
+1 from me whenever the discussion about the Safari bug is resolved 🚀 |
Im not able to reproduce this well. I can only get it to happen if I hit the 'tab' key multiple times quickly while it is opening.
It seems like tabbing is a bit funky on Safari, im having issues with tab nav in many places. The quick inserter seems to do the same thing. In our selection component I can hit 'shft+tab' from the input and it will move into the list items. However, with the quick inserter I cannot access the blocks list that way at all. 🤔 |
🤦♀️ 🤣 - Nevermind, It seems totally fine in Safari after enabling tab navigation. Safari is 'funky' in that you need to actually enable it in preferences->advanced: |
TIL 🙃 Thanks for figuring that out @Addison-Stavlo! |
My mistake! I mischaracterized the problem. If you quickly press the tab key twice while the dropdown previews are still loading, the dropdown will close. |
priethor
added
the
[Focus] Accessibility (a11y)
Description
Enables keyboard controls to be used in the template part selection component.
The template part selector is not currently set up to properly handle keyboard controls. When a user presses keys (like "up" or "down" for example), these events bubble out to other control systems in the editor closing the dropdown and selecting other blocks. Even if these events did not bubble, there is no system in place to allow arrow keys to be used to navigate through the list of available items. This PR:
compositefrom reakit to enable keyboard controls (as also used in theBlockListTypes)How has this been tested?
Template part selection component should be keyboard navigable similar to how the block inserter is:
Screenshots
Types of changes
Checklist: