w3c
Feature: Search for patterns, toggle grid/list view
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.
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).
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.
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
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
@stalgiag thank you for all the work on this! We finally have this long-awaited feature!