-
Notifications
You must be signed in to change notification settings - Fork 4.5k
Description
Description
The template part and pattern listings in the Library are implemented using Composite
and CompositeItem
components. The way this works is that the entire list is a single tab stop. Up and down arrow keys are used to navigate. The list implements a roving tab index, so when tabbing out of the list and back in again, the previously focused item (not the first focusable item) will be focused.
The problem is that each pattern item in the Custom Patterns category also has an 'Actions' dropdown menu, which is another tab stop within the list. That interferes with the way keyboard navigation is supposed to work—the roving tab index wouldn't be restored correctly, and it would be extremely challenging to interact with the dropdown.
A quick fix was applied when shipping the original library PR:
- The dropdown menu was made not focusable using the keyboard and aria-hidden.
- A separate Delete key shortcut was added to ensure that patterns could still be deleted using the keyboard (this was the only action available in the dropdown).
This approach isn't particularly scalable. As more actions are added to the dropdown, more shortcuts also need to be added to cover each of the actions. Users also need to be made aware of what the special shortcuts are.
Some possible options (pick one):
- Reconsider the keyboard navigation model used in the library, are there other more appropriate options?
- Instead of adding individual shortcuts for each action, implement one shortcut that can be used to open the 'Actions' dropdown when a pattern is focused.
- Keep the current system with multiple keyboard shortcuts, but find a way to make them easily discoverable
It'd be great to hear any other ideas.
Step-by-step reproduction instructions
- Open the site editor
- Tab to the 'Library' option in the navigation region and select it
- Tab to the Custom patterns option in the navigation region and select it
- Use the navigate regions shortcut to switch to the 'Library content' region
- Tab till you get to the Patterns list box and navigate
Screenshots, screen recording, code snippet
Environment info
No response
Please confirm that you have searched existing issues in the repo.
Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Yes