Patterns page: Add patterns filter and grid/list view toggles

[stalgiag]

see #2534

This PR adds an input to the patterns index page that filters the patterns as you type. Additionally, a toggle is added that allows users to switch between a list and a grid view for the patterns.

Build repo PR

View an example of this at Build repo's netlify preview provided link. This WAI Preview link will fail to build until wai-aria-practices#1234 is also merged

---

WAI Preview Link (Last built on Tue, 02 Jul 2024 22:32:14 GMT).

[howard-e]

@mcking65 @a11ydoer could you also review this work on the deploy preview's patterns page?

[stalgiag]

This is great, really looks good to me! Thanks for tackling this task. I only have a few comments:

• The suggestion for an accessible h2 from this comment and this comment are missing. Could those still be added?
• When doing a search with no valid results, I'd prefer some indication of that be shown, eg. No results found or similar. What do you think? I've attached a screenshot below which just shows a blank area

Nice call. Didn't notice those comments, too focused on the mockup. Also agree with the need for a "no results" element.

First handled by 4b0a408 & 5626c7b and accompanying build repo commits.

Second addressed in eaf3f2deaf3f2d and accompanying build repo commits.

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed New patterns page filter.

The full IRC log of that discussion

<jugglinmike> Topic: New patterns page filter
<jugglinmike> github: https://github.com/w3c/aria-practices/pull/3043
<jugglinmike> Jem: This is awesome!
<jugglinmike> Matt_King: I have a few questions
<jugglinmike> Matt_King: It seems like the filter happens dynamically as you type. That how it feels to me as a screen reader user
<jugglinmike> Matt_King: I didn't have to press the "submit" button, so I don't know what the purpose of the "submit" button is
<jugglinmike> Matt_King: Are there any circumstances where you need that button?
<jugglinmike> howard-e: It doesn't seem like there is a need for that button
<jugglinmike> Matt_King: I do think that a button labeled "Clear Filter" would be very useful. Without it, in order to see all the patterns again, you have to select all the text and delete it
<jugglinmike> arigilmore: Carbon offers a feature like this using an "X" button inside the search bar
<jugglinmike> Matt_King: The "clear" button is visually inside the search bar, but not in terms of the DOM, right?
<jugglinmike> arigilmore: That's right
<arigilmore> https://carbondesignsystem.com/components/search/code
<jugglinmike> Matt_King: We should change the placeholder text to read "Filter patterns"
<jugglinmike> Jem: Maybe the heading should read "Search patterns" instead of "Filter"
<jugglinmike> Matt_King: That may be misleading. Some folks may read the worth "Search" and expect that their query will be evaluated against the entire content of each pattern
<jugglinmike> Matt_King: As it stands, the query is only matching against the titles of the patterns that are present on the page
<jugglinmike> Matt_King: I think that's more generally recognized as a "filter" operation
<jugglinmike> Jem: Okay; could we also change the heading to "Filter patterns" instead of just "Filter"?
<jugglinmike> Matt_King: Sure

[stalgiag]

Updates based on @isaacdurazo 's mockups from the feedback in the APG Task Force meeting:

• Remove submit search button
• Clear button based on this UX
• "Filter patterns" for placeholder and h2

[howard-e]

cc @a11ydoer @mcking65 this should be ready for your review again

[mcking65]

@a11ydoer if you agree it is ready to ship, I will merge.

[mcking65]

@stalgiag thank you for all the work on this! We finally have this long-awaited feature!