Library: revisit keyboard navigation for pattern items

[talldan]

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

1. Open the site editor
2. Tab to the 'Library' option in the navigation region and select it
3. Tab to the Custom patterns option in the navigation region and select it
4. Use the navigate regions shortcut to switch to the 'Library content' region
5. 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

[talldan]

I think my preferred pragmatic option would be replacing the 'delete' shortcut with a single keyboard shortcut for opening the actions menu (I'm not sure what the best shortcut key would be. Possibly the 'A' key).

Maybe the simplest implementation is trigger a 'click' event on the dropdown menu button, as I don't think there's a 'controlled' way to open a DropdownMenu component.

[annezazu]

@alexstine @joedolson @afercia could you all perhaps provide feedback here?

[alexstine]

The problem is, discoverability. Why not implement TreeGrid component here similar to the list view?

[talldan]

@alexstine The items aren't a tree, but a normal linear list. I guess that would be a grid pattern? For keyboard navigation it would probably be very similar to List View, just without the depth/nesting aspect.

[alexstine]

@talldan I was just thinking, that same keyboard experience, that would work perfectly for this the way you describe it.

[afercia]

I noticed this in another issue and commented:

I'd reconsider the listbox / options implementation as it introduces unnecessary complex interaction for screen reader users. This is just a list of objects, visually presented in a grid. I'd recommend to use a standard list.

Also, in ARIA a listbox is something pretty different and it's more something close to a select with multiple selection, see https://www.w3.org/WAI/ARIA/apg/patterns/listbox/

I'd strive for simplicity and also avoid a treegrid or a grid. Why not use a simple list, where each item has a button that shows the available actions?

[glendaviesnz]

I'd strive for simplicity and also avoid a treegrid or a grid. Why not use a simple list, where each item has a button that shows the available actions?

@afercia I have a PR here that moves this to a basic tabable ul - do you have time to give this a review please?