Skip to content

Library: revisit keyboard navigation for pattern items #52009

@talldan

Description

@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

Screen Shot 2023-06-28 at 12 19 36 pm

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Needs Accessibility FeedbackNeed input from accessibility[Feature] PatternsA collection of blocks that can be synced (previously reusable blocks) or unsynced[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions