Code reference search: unclear how to apply filters

[ryelle]

When on the search results page, if I want to apply a filter (for example, only show functions), I can click the checkbox, but it's not clear how to apply that filter. I ended up clicking back into the search box and hitting enter.

The little magnifying glass is technically the search button, so it submits the filters too, but it doesn't look like a button, and since it's contained in the input it looks like it's only for the text field.

The checkbox should not automatically submit the form, as that causes a page load and would be bad for a11y/UX.

cc @WordPress/meta-design

[StevenDufresne]

The taxonomy archive has the same problem:

Figma

[StevenDufresne]

Here's a not-so-nice take on it, a button!

Branch: fix/button-to-search

[jasmussen]

This issue exists in production already, correct?

Since the search icon is technically a button, is it a bit awkward, tabbing-wise, to have two submit buttons that do the same, but have different labels?

Openverse reloads the page immediately on click of a filter, though that appears to be using some React smarts so focus isn't lost. But that seems like a better longer term concept.

We can make the apply button work if need be, but it strikes me as extra UI so it'd be nice to look at best practices in this space before we go that route. What do other non-react based search engines do?

[ryelle]

This issue exists in production already, correct?

So it does. We should still fix it 🙂

Since the search icon is technically a button, is it a bit awkward, tabbing-wise, to have two submit buttons that do the same, but have different labels?

True - in this case, I'd prefer removing the button from the search input in favor of a more visible one that clearly includes the filter selections.

Openverse reloads the page immediately on click of a filter, though that appears to be using some React smarts so focus isn't lost. But that seems like a better longer term concept.

As far as I know, we have no intention to implement this as a react-controlled page. There are also plenty of other a11y issues that pop up when you go that route.

What do other non-react based search engines do?

We could look at learn, which uses an apply button in the sidebar, but has many more filters. There's also github, which also has a sidebar but they use links instead so there's no second button. Maybe a tabs-style approach could work? if they're links it would be expected that clicking will trigger an action (page reload).

I've looked around for other examples but they're either much more complex (like learn), and/or they do the JS filtering approach.

[ryelle]

I've just realized that the tab idea won't help on the taxonomy page — that one really does just need a button 🙂

[jasmussen]

Another option is to have the search field expand into a larger box, like browsers do with the URL bar, and have filters exist inside that. But this needs a larger design, and a separate iteration, so it's just something to consider. For now, and since this is a subpage, let's just go with Steve's suggestion, but use a blue button instead:

[adamwoodnz]

Should be tested as part of https://github.com/WordPress/wporg-developer/pull/297

[adamwoodnz]

This was fixed in #292, where the 'Apply' button was added to the filters block