Design card and list view toggle and filter for Patterns and Practices pages

[isaacdurazo]

Text-based Mockups

These mockups display a search box and a toggle button for cards and list view. The container with the search box and the toggle button is located between the "Read This First" disclaimer and the Patterns and uses a light blue color as the background, the same one we use for the main Nav. The search functions as an in-page filter-as-you-type mechanism. It contains a light gray magnifier icon and the placeholder text "Search Patterns" next to it. Next to the search box, there's a toggle for card vs list view. This toggle uses icons that represent both views.

When the user changes the view to a list, the patterns are all put inside a white container and each one displays its icon (which is half the size smaller) on the left and its title and description on the right. Each one is divided by a subtle gray horizontal line.

Visual Mockups

Card View

List View

[mcking65]

Thank you Isaac!

@isaacdurazo wrote:

When the user changes the view to a list, the patterns are all put inside a white container and each one displays its icon (which is half the size smaller) on the left and its title on the right. Descriptions are hidden. Each one is divided by a subtle gray horizontal line.

I think we will still need descriptions in the list view.

On the about page, we might not want to design icons for every topic. Is it feasible to make a good looking view where some items in the list have icons and some do not? Or, should we think of consistency of content for all items in the list as essential? Should we consider imagery as a baseline requirement as well?

Very curious to have input from @shawna-slh.

[giacomo-petri]

About the search layout, should we add a darker border around the Search input to meet 1.4.11 SC (https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html), clearly identifying the search input area? This might be even more relevant considering that neither the Search icon (<3) nor the Search placeholder (<4.5) have a sufficient contrast ratio with the white input background.

[isaacdurazo]

Good catch @giacomo-petri! Thanks for the feedback. I will address these and update the mockups.

[a11ydoer]

Feedback - adding h2 accessible/visible name to "search(Filter) patterns" instead of a place holder
@isaacdurazo will update the design

[mcking65]

Summarizing changes from meeting discussions to reflect in redesign:

• List view will include descriptions
• Filter box will be preceded by <h2>Filter</h2> that will serve as visible label of the field.