Updates to R&S design

[davidmpickett]

Description

Changes needed for Prototype:

• Mobile layout of Detail page

Changes needed from Midpoint Feedback - not needed for Prototype

• Must: revisit order of "Show filters" button and "Showing 1 - X of Y results" 98001
• Must: update the "Showing 1 - X of Y results" message to "Showing 1 - X of Y results for 'term' with 3 filters applied" 98001
• Must: "Clear all" button must be styled to look like a button 98001

Roles / assignments

• Engineering review:
• Design review:
• Accessibility review:
• Product acceptance:

Acceptance criteria

ACs should capture expected behavior, to inform test plans. Consider devices, documentation updates including KBs, change management, and content model when applicable.

• [ ]
• Impact analysis is filled out and QA test plan is updated accordingly
• Does this product have an existing regression test plan?
  • Yes, link:
  • No, regression test plan will be created as part of the work / points in this ticket

[aklausmeier]

Show filter behavior is different on desktop vs mobile, important to include desktop in research

[aklausmeier]

cc @davidmpickett @thejordanwood @laflannery

Revisions made so far in Figma 🟡 WIP - R3 search filters (revisions):

• Intro copy revised to include "search or filter" in the first few words so AT users know both options are available. @laflannery to discuss with Bryan on governance to see if this passes. If not, @thejordanwood can explore a design iteration. I started in this Figma frame.
• Included search term in: Showing 1–4 of 4 results for “appeal”
• Included # of filters applied in: Showing 1–4 of 4 results for “appeal” with 4 filters applied
• Clear all button styling to match icon button with minor revisions that will need to be added to experimental design ticket if tests well in research. This button has a white background, lower case for better readability, shares red X icon. The current icon buttons are currently only allowed when paired with a primary link and we do not have that use case.
• On detail page, updated "Topics" in front of filter chips to "Tags" which is currently used today. We can stick with this OR choose another term that encompasses all.
• increased size of "X" on chips from experimental design feedback, chip size may have also grown a bit taller when this changed
• increased spacing between chips so tappable area has a minimum affordance of 40px

[aklausmeier]

Also left comment on accessibility ticket:

Must: When viewing a details page linked from the results, the filter chips are present again to show the taxonomical labels for the page. But the chips play a different role here when clicked (navigational rather than action), and those differences need to be reflected in both the semantics and the visual presentation. Is there a reason why they couldn't just be ordinary links here?

@briandeconinck This was discussed during the experimental design ticket notes to some extent. It's also how it behaves today. I would prefer these stay consistent in design as filter options. Would love for you and @laflannery to discuss this a bit more. It seems like a grey area to me. It does take them to a new page but clicking on the filter chip in this scenario creates a new search results list like a search button might.

[davidmpickett]

Updated the Filter Chip component to 1) fix alignment of label text and X icon 2) make the three version true variants of one base component. I also updated instances of the chip in R3 to use new sub variants where applicable

[davidmpickett]

@jilladams @FranECross - FYI that while this ticket isn't fully refined, it is technically in progress. In addition to @aklausmeier's work, I am starting to pick away at it. This is one I will be continuing in Sprint 19

[davidmpickett]

End of sprint update

• Moving this back to "To Refine" as we still haven't fully parsed all the midpoint feedback and ensured all necessary changes are accounted for in the ACs of this ticket

[jilladams]

@davidmpickett @FranECross is the remainder of that refinement work blocked on having Amanda present to discuss? This'll be a topic in UX sync next time? Wondering if we can get it into sprint 19, or if it'll sit til after the convo guide / research plan advance.

[davidmpickett]

I don't think we need Amanda to refine it, we have a lot of notes that @FranECross took about Amanda's opinions on various aspects and what we should or shouldn't implement. Mostly this ticket just needs someone who to spend the time parsing what feedback has already been implemented, what feedback we won't be implementing and what's left to implement.