Fix patterns explorer pop-up sidebar navigation

[andrewhayward]

What problem does this address?

The sidebar of the patterns explorer pop-up is currently a collection of buttons, with no semantic indication of their purpose or context.

What is your proposed solution?

The tab pattern would probably be most appropriate here, but it is arguably a menu too.

[afercia]

Noting that making these buttons anr ARIA tab interface would partially solve https://github.com/WordPress/gutenberg/issues/55110 / https://github.com/WordPress/gutenberg/pull/56162

Regarding the general issue, I wouldn't recommend to use modal dialogs for such highly dynamic user interfaces in teh first place. Having the dialog content that updates dynamically doesn't seem to me ideal from an usability perspective. Also, it creates problems with some important features of the modal dialog such as constrainet tabbind and detecting focus outside to close the dialog.

That said, I'd be all for consistency in the first place. There are other modal dialogs that use some mechanism to 'navigate' content. For example, the Preferences modal dialog does use ARIA tabs:

Conceptually, it's very similar to the Patterns explorer dialog. On the left, there's a collection of buttons that allow 'navigating' the content. Should this pattern always use Tabs? Or maybe use buttons wrapped within a properly labelled nav element?

Does the Tab design pattern helps users?

• It does reduce the amount of Tab stops, while still allowing to navigate / select the tabs with arrow keys.
• Does it help discoverability of all the preference sections and the Pattern categories?

Anyways, I'd vote for standardizing and always use either Tabs or simple buttons + nav.

[joedolson]

From all of the related issues, it seems like we have a fundamental problem that we're making heavy use of a pattern with a side panel of navigation and a main panel of content, and not using a consistent navigation across the site.

From the accessibility bug scrub on 4/16/2024, we agreed that while either the tabpanel pattern or the nav menu pattern are viable, we'd probably prefer the nav menu. One argument (from @Rcreators) was that using a nav menu pattern could allow increased reuse across components that require navigation, as it would support submenus.

It seems like it would be worthwhile to work on unifying all of these navigation patterns into a single base component.

[jwgoedert]

Not sure if I am trying to access this from the correct path but I do not seem to get the same Pattern modal when accessing the patterns explorer via Appearance>Editor>Patterns. Is there a different route that calls the modal? Attaching screenshot of my Patterns view which looks more aligned with our discussion from last week. Also am still doing some exploring to identify other areas where similar patterns appear. The "Help" dropdown located on most(if not all) pages also contains a side nav with content area. It appears to use 'tab-link-*' IDs contextually assigned. May warrant refactor to whatever pattern we decide on?

[joedolson]

Path to get to this interface: What you need is to go to the Post Editor > click the 'plus' button in the upper left corner > switch to the 'Patterns' tab > click on 'Explore all patterns'

[joedolson]

See comments in #56442 regarding the use of a tabpanel there, as it's relevant to this discussion.

[joedolson]

It would be good to get some movement on this. While it might be better down the road to shift these to a menu pattern, moving to a tabpanel pattern would be a significant immediate improvement. The advantage to going to a tabpanel is that the Patterns navigation in the sidebar is already a tabpanel - these two ways of navigating patterns should at least use the same mechanism for exploration.

[jeryj]

I'll give this a look 👍🏻

[jeryj]

Took a look at this -- I think it's going to be a heavy lift in its current state. Also, it seems like it's not adding much now that the inserter in the sidebar has advanced. I'd propose removing this modal entirely and relying on the sidebar pattern inserter. The only thing the modal gives us right now is a larger view for seeing the patterns if you're on a desktop.

@WordPress/gutenberg-design - What do you think of removing the pattern modal now that the pattern inserter has progressed?

[joedolson]

I'm 100% in favor of having fewer alternative interfaces; Gutenberg already suffers from excess complexity, and I see very limited benefit to having both of these experiences.

[jeryj]

Here's a quick PR to remove it: https://github.com/WordPress/gutenberg/pull/63636

[richtabor]

What do you think of removing the pattern modal now that the pattern inserter has progressed?

We need much more clarity on if this is being used, relied on even, by users before considering removing it.

[joedolson]

That should start with an assessment of the paths that reach it. The only one I specifically know about is via the sidebar patterns tab in the inserter, using the 'Explore all patterns' button; and a user has to go through the other pattern library interface in order to reach that option, so it wouldn't close off any pathways. But if there's another way of reaching it that's more isolated, that could introduce problems for some users.