Search results card design and behavior for urgent care mash-up

[mmiddaugh]

Issue Description

Implement new design for urgent care mash-up

Updated styling

Top paragraph intro text (now in issue #12061

General styling updates for search results cards

• [x] First card in search results list has a 2 pixel horizontal line at the top, aligned with the top of the map (same as used to separate cards)
• [x] Same font size and family will be used for all cards, regardless of facility type
• [x] All phone numbers will have bold label "Main number" or "Mental health number" (if available)
• [x] Cards no longer have label, such as RETAIL/WALK-IN or VA HEALTH
• [x] Padding is consistent 16 pixels around the sides with total of 32 pixels visually at the bottom of each search results card (beginning at the end of last line of text or alert box)
• [x] Order of information is standardized across facility types
• [x] Community care info alert box and facility operating status alert boxes extend to the scroll bar
• [x] Directions link is now displayed as "Get directions" and appears immediately under the address

Search result card styling

Community urgent care providers (in VA's network) and urgent care pharmacies (in VA's network)

Cards contain:

• Letter icon with mileage expressed as x.y miles
• Name of facility in bold (no link to detail page)
• Address
• Linked "Get directions"
• Padding
• Main number(in bold): actionable phone number
• Call to confirm services and hours
• Padding
• Info alert box with blue background color, info icon and hyperlinked "In-network urgent care benefit"

Note: Urgent care pharmacies (in VA's network) are currently hidden from the drop-down but are set to return at the end of August. This will ensure the styling and behavior is consistent when they return.

New styling


VA health cards contain:

• Letter icon with mileage expressed as x.y miles
• Name of facility in bold (linked to detail page)
• Address
• Linked "Get directions"
• Padding
• Main number(in bold): actionable phone number
• Padding
• Mental health(in bold): actionable phone number (for VA health and Vet Centers)
• Padding
• Facility operating status alert box with background color and info icon to be maintained (and displayed as facility operating status dictates)

New styling


Other facility types

Search result cards will be handled in a separate issue for VA Benefits, VA cemeteries, Vet Centers and Community care providers (in VA's network)

Updated behavior

• [x] Subhead displays user's parameters in bolded quotations (addressed in separate earlier issue)
• [x] Subhead updates when user updates search parameters
• [x] "Can't find what you're looking for...." link is right aligned below map with 24 pixels of padding below pagination
• [x] When hyperlinked "In-network urgent care benefit" is clicked for community urgent care or urgent care providers, the new page opens in a new tab

Analytics

• [x] Confirm that datalayer is preserved for "Get Directions"
• [x] Confirm that datalayer is preserved for urgent care search events
• [x] Confirm that datalayer is preserved for "In-network urgent care benefit" link

Front end tasks

• Ensure the page is styled according to changes outlined above and in attached specs
• Ensure the back end data from API is displayed in local and review instance
• Ensure unit tests are available.
• Conduct cross-browser testing to ensure style and behavior is as expected
• Ensure your code changes are covered by E2E tests
• Run axe checks using the Chrome or Firefox browser plugin
• Test for color contrast and color blindness issues
• Zoom layouts to 400% at 1280px width
• Test with 1 or 2 screen readers
• Navigate using the keyboard only
• Test for responsive design to ensure no content receives focus offscreen or is cutoff using tabbed approach (as on a mobile device) and when zooming layouts using the browser zoom
• Validate existing issues #10783 and #10782

Acceptance Criteria

• [ ] Designer comments on this issue to approve page styling

• [x] Search result cards should be displayed with the same font, regardless of facility type. #10874

• [x] Veteran can choose to view urgent care results as

  • VA urgent care locations and Community urgent care providers (in VA's network) in a single list
  • VA urgent care locations only
  • Community urgent care providers (in VA's network) only

• [x] When VA facility type = Urgent care and VA service type drop down = All urgent care, the search results list should include both VA urgent care locations and Community urgent care providers (in VA's network), organized in ascending order by distance

• [x] When VA facility type = Urgent care and VA service type drop down = All urgent care, the search results list should include only VA urgent care locations will contain a facility operating status alert box (if appropriate based on data)

• [x] When VA facility type = Urgent care and VA service type drop down = All urgent care, the search results list should include only Community urgent care providers (in VA's network) will contain a hyperlinked "In-network urgent care benefit" info alert box.

• [x] When VA facility type = Urgent care and VA service type drop down = VA urgent care, the search results list should include only VA urgent care locations organized in ascending order by distance

• [x] When VA facility type = Urgent care and VA service type drop down = Community urgent care providers (in VA's network), the search results list should include only Community urgent care providers (in VA's network) organized in ascending order by distance

• [x] All other VA facility type search behavior will be maintained.

• [x] Unit tests pass

• [x] E2E tests cover current code and regression

• [x] End-to-end tests show 0 violations.

• [x] The data returned matches API response (for given user or scenario)

• [x] All axe checks pass

• [x] All color contrast checks pass

• [x] All zoom testing passes

• [x] All keyboard checks pass

• [x] All screenreader checks pass

• [x] No content is cut off or receives focus offscreen

• [ ] Existing issues expected to be resolved with this design and implementation should be closed once validated.

  • #10874
  • #10783
  • #10782
  • #11413

Appendix

Ensure compliance with design specs (expand)

- Defined color palette for all elements (foreground, background and fonts) - Defined states - Enabled vs disabled - Hover vs active - Defined margin and padding spacing - Defined fonts and sizes - Defined iconography, as appropriate - Field labels - Error messaging, as appropriate - References to style guide/design system components - Link words and urls - Responsiveness breakpoints - Expected interactive behavior

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.)

[davidconlon]

Revised COVID Update Facility Locator Text.docx

@mmiddaugh approved revised before/after Coronavirus Update text for Facility Locator. Also we need to be sure that this text continues to maintain the Chatbot Flipper function.

[mmiddaugh]

@mpelzsherman @brangi thank you for your excellent collaboration and awesome work. We do need to make a few changes based on our design review:

Changes in the search box

1. Change labels for search boxes

• [x] Search by city, state or postal code -> City, state or postal code
• [x] Choose a VA facility type -> Facility type
• [x] Choose a service type -> Service type

Spec


Changes in the search results

• [x] If facility type = Community providers (in VA's network), search result cards should not include the "In network urgent care benefit" call to action unless the service type = Clinic/Center: Urgent Care.
• [ ] If facility type = Urgent care pharmacies, search results should include "Call to confirm services and hours" and the "In network urgent care benefit" call to action.
• [x] When the Veteran clicks on a map pin, the corresponding search result card should be highlighted and receive yellow halo focus - for all facility types (we noticed this was not happening for community care results during our review).
• [x] When two phone numbers are displayed (seen commonly for VA health locations), there should be padding between the lines.

Spec


• [x] Spacing between the icon and the text in the call to action boxes ("In network urgent care benefit" or operating status) should be consistent with the spacing between the Pin icon and mileage.
• [x] The "In network urgent care benefit" call to action should use the "i" icon rather than the "!"

Spec


To confirm, search results for community care locations will not use sentence case due to the format of PPMS data. The team determined that the risk of incorrectly handling edge cases, such as acronyms, names like "McDonald" outweighs the benefit of forcing the data into sentence case for consistency.

[brangi]

merged