R&S Mobile Search bar update [Grey Box]

[brianalloyd]

Issue Description

R&S had the correct search bar UI on desktop but the mobile UI needed an update. Mainly the grey box / filter menu that was hiding the search bar and radio buttons was removed and adjusted to the grid width to create consistency with other mobile tool UI.

R&S mobile update design mockups

Acceptance Criteria

• [ ] Designer comments on this issue to approve page styling (Cassandra)
• [ ] Mobile is working as intended with new styling implemented
• [ ] Tier 2 Validation - PO/PM Review and Approve (prior to promote to staging/prod)

Appendix

Ensure your code changes are covered by E2E tests (expand)

- Add E2E tests if none exist for this addition/change. - Update existing E2E tests if this code will change functionality. - Include axe checks, including hidden content

Run axe checks using the Chrome or Firefox browser plugin (expand)

- Ensure no heading levels are skipped. - Ensure all buttons and labeled inputs use semantic HTML elements. - Ensure all buttons, labeled elements and images are identified using HTML semantic markers or ARIA roles. - Ensure form fields have clearly defined boundaries or outlines. - Ensure form fields do not use placeholder text. - Ensure form fields have highly visible and specific error states.

Test for color contrast and color blindness issues (expand)

- All text has appropriate contrast.

Zoom layouts to 400% at 1280px width (expand)

- Ensure readability and usability are supported when zoomed up to 400% at 1280px browser width - Ensure no content gets focused offscreen or is hidden from view.

Test with 1 or 2 screen readers (expand)

- Ensure the page includes a skip navigation link. - Ensure all links are properly descriptive. - Ensure screen reader users can hear the text equivalent for each image conveying information. - Ensure screen reader users can hear the text equivalent for each image button. - Ensure screen reader users can hear labels and instructions for inputs. - Ensure purely decorative images are not announced by the screenreader.

Navigate using the keyboard only (expand)

- Ensure all links (navigation, text and/or image), form controls and page functions can be reached with the tab key in a logical order. - Ensure all links (navigation, text and/or image), form controls and page functions can be triggered with the spacebar, enter key, or arrow keys. - Ensure all interactive elements can be reached with the tab key in a logical order - Ensure all interactive elements can be triggered with the spacebar, enter key, or arrow keys. - Ensure focus is always visible and appears in logical order. - Ensure each interactive element has visible focus state which appears in logical order.

---

How to configure this issue

• [ ] Attached to a Milestone (when will this be completed?)
• [ ] Attached to an Epic (what body of work is this a part of?)
• [ ] Labeled with Team (product support, analytics-insights, operations, service-design, tools-be, tools-fe)
• [ ] Labeled with Practice Area (backend, frontend, devops, design, research, product, ia, qa, analytics, contact center, research, accessibility, content)
• [ ] Labeled with Type (bug, request, discovery, documentation, etc.)

[brianalloyd]

Reviewed in grooming, need to look at data to see how search in mobile (user behaviors). @callen2563 to add in notes from accessibility elements.

[callen2563]

@joshkimux are you able to comment with your feedback for the search menu on R+S mobile that we had chatted about previously? Currently on mobile the search bar is hidden under a menu, does this work from an accessibly standpoint?

https://www.va.gov/resources/

Here is my proposed mock up: R&S mobile update design mockups

[joshkimux]

@callen2563 , the search that is hidden within the menu could be made to become compliant... but it would take some working around and could present some potential accessibility issues:

• Search is a key function that is usually surfaced as a landmark on a page via role="search"; it will not be listed as a landmark if it is hidden beneath a menu.
• This isn't a common pattern. It's affordance (blue text and a filter icon) of being an actual search is significantly less clear compared to a search that is immediately visible and actionable. For users with cognitive disabilities, this may present itself as a challenge.

I would recommend, from an accessibility perspective, to pursue the updated wires presented in the invision link.

[brianalloyd]

Thanks @callen2563 for adding the details to this ticket. @joshkimux as always thanks for your insights and support. CC @johnhashva