Update Facility Locator results mobile map for location number, name, distance, and TTY

[xiongjaneg]

User Story or Problem Statement

As a Veteran, I want to find VA locations that are closest to me.

Final designs

Mobile map in the Figma file

Description or Additional Context

Facility Locator should be updated so that each result displays a number, facility name, distance from the search location, and facility information

Facility Locator results will be updated for more accessible results.

1. Add the segmented button group from USWDS.
2. Make the numbers on the map interactive.
3. Directions link should open in a new tab.
4. For the location that's selected, the information should appear underneath that map.
5. TTY links are displayed for users who are D/deaf or hard of hearing per recommendations in ticket [TTY]: Facility Locator - Search results should have TTY: 711 links for deaf/hard-of-hearing users #13939

Resources

• Example: Pittsburgh

Screenshots

Private Zenhub Image

Acceptance Criteria

• The segmented button group from USWDS is used.
• The directions link opens in a new tab.
• The numbers on the map are interactive.
• If multiple markers are close together and clicked, only result shows and that's the closest one (lowest number).
• For the location that's selected, the information appears underneath the map.
• TTY links are displayed.
• Leave PR in draft and use do not merge label.
• Ensure analytics are automatically enabled.
  • If not, enable analytics manually.
• Design review needed.
• Accessibility review needed (note: Laura can't test mobile).

Team

Please check the team(s) that will do this work.

• CMS Team
• Public Websites
• Facilities
• User support
• Accelerated Publishing

[xiongjaneg]

Assumption: There's likely not to be much different functionality from desktop to mobile.

The filter layout may be different on mobile than desktop, so that could be a consideration.

[mmiddaugh]

@xiongjaneg we will want to ensure the new functionality is wired for analytics - is this covered by components or do we need to add relevant tasks/AC to this issue?

[xiongjaneg]

@maxx1128 @eselkin ^ See Michelle's message about analytics above (and in related tickets). What's the best way to make sure we're capturing analytics functionality? ACs? Tasks?

[maxx1128]

@xiongjaneg @mmiddaugh I would add additional AC to this ticket.

[xiongjaneg]

Michelle's question: If locations are close and the markers overlaid each other, what happens if you click on those layered markers?

Laura: Unlike desktop, mobile markers aren't currently interactive. This ticket adds that interactive functionality. We only want one item to show if clicked on.

What are the options when the Veteran is zoomed out in the map and there are a bunch of markers all close together?

[xiongjaneg]

Laura can't test mobile. How can accessibility be reviewed?

[xiongjaneg]

Facility Locator is in collab cycle and will need a staging review. What should all be included in the staging review? All or separate?

[davidmpickett]

Marking this as blocked by usability testing #14518

[Agile6MSkinner]

Closing as dupe of #20153