Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve Keyboard Navigation on Side Panel Inserter #60209

Closed
jeryj opened this issue Mar 26, 2024 · 1 comment · Fixed by #60257
Closed

Improve Keyboard Navigation on Side Panel Inserter #60209

jeryj opened this issue Mar 26, 2024 · 1 comment · Fixed by #60257
Assignees
Labels
[Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.

Comments

@jeryj
Copy link
Contributor

jeryj commented Mar 26, 2024

the content of the three tab panels uses different design and interaction: IMHO this doesn't help a predictable, consistent, experience for users
@afercia #24975

The keyboard navigation between the side panel inserter has inconsistent interactions and makes it hard to use. With a little refinement, I think it would be quite nice to interact with. The panels mostly use a pattern of: Tab to area, then use arrows within the area.

Patterns inserter view

However, the Patterns and Media panels use Tab to navigate between lists of buttons to drill down to further layers. On one hand it makes sense since Tab should generally navigate between the buttons. In practice, I find it frustrating because l try to use the arrows to navigate this area like all the others do. This Tab to navigate within the section issue becomes exacerbated when you have a selected Pattern.

My expected behavior for the Pattern panel:

  • Select Pattern Tab
  • Focus moves into Patterns panel
  • Use arrows to navigate between the patterns
  • Select a pattern
  • Focus moves into the Patterns for that category
  • Arrow between patterns
  • Shift+Tab to return to my selected pattern category
  • Arrow to a new pattern category, repeat

How it works now:

  • Select Pattern Tab
  • Focus moves into Patterns panel
  • Use Tab to navigate between the patterns
  • Select a pattern
  • Focus moves into the Patterns for that category
  • Arrow between patterns
  • Shift+Tab to try to return to my selected pattern category
  • Instead, I'm at the bottom of the Patterns category list
  • Shift + Tab 15x times to return to the Tabs

Other issues with the current behavior:

  • Because focused is moved into the individual patterns sidebar when it is selected/revealed, you can't move focus into a selected pattern by pressing the enter key on that category.
Screen.Recording.2024-03-26.at.10.17.01.AM.mov

What is your proposed solution?

Adopt a consistent pattern of using Tab to navigate between sections and arrows within the sections to make the sidebar block/pattern inserter more usable.

@jeryj jeryj added the [Type] Enhancement A suggestion for improvement. label Mar 26, 2024
@jeryj jeryj self-assigned this Mar 26, 2024
@jeryj
Copy link
Contributor Author

jeryj commented Mar 27, 2024

Related to #56442

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.
Projects
1 participant