Update Facility Locator results to show 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

https://www.sketch.com/s/d5e5c924-e8c0-47af-b3e4-994c335d6f31

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. Use numbers instead of letters for the markers:

   • Currently, each result is marked with a letter, however, numbers is a more common and expected pattern when creating a list pattern. Letters can introduce some confusion.
   • NOTE - I believe this was already identified as not being a limitation during the design phase but I wanted to leave this option just in case:
     • If letters is a limitation of the map marker itself and cannot be changed, can we add "." after the letter in the marker to create a short pause for the screen reader?

2. Add the location marker to the heading with the title of the search result

   • If the marker and the title are wrapped into the heading tag together, this will allow the user to hear the marker associated with the title and understand what this means when on the map.
   • At a very basic level, the HTML could look like: <h3><span>{map marker}</span><a href="{link}">{Facility Name}</a></h3>

3. Move the milage to after the heading for each result

   • Screen reader users have the ability to navigate by headings on the page. With the search results, they can easily jump directly to any one of the headings.
   • Currently, the mileage (distance from the searched location) for each result is listed above the heading, which means that if a screen reader user jumps directly to a header for a particular result, it is very likely they will miss this mileage information.
   • By moving this information below the heading, as indicated in the Sketch files and screenshots, this will no longer be missed when reading the location information for a result.

4. TTY links are displayed for users who are D/deaf or hard of hearing per recommendations in ticket #13939

5. Directions links should open in a new tab.

Screenshots

![Uploading Screenshot 2023-09-19 at 5.32.28 PM.png…]()

Acceptance Criteria

• [ ] Directions links open in a new tab.
• [ ] Location markers use numbers as shown in Sketch files and screenshots above
• [ ] Location marker and facility heading are programmatically associated
• [ ] Mileage is displayed after the heading both visually and in the DOM
• [ ] TTY links are displayed.
• [ ] Confirm analytics are automatically enabled.
  • [ ] If analytics need to be enabled manually, it is enabled.
• [ ] Requires design review
• [ ] Requires accessibility review

Team

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

• [ ] CMS Team
• [ ] Public Websites
• [X] Facilities
• [ ] User support
• [ ] Accelerated Publishing

[mmiddaugh]

@xiongjaneg is this issue intended to reflect the changes necessary for the mobile design iteration?

[xiongjaneg]

@thejordanwood ^ per Michelle's question, is mobile design iteration included in this? Do we need to update the description or ACs? Do we need a separate ticket?

[thejordanwood]

@xiongjaneg I have mobile designs in the Sketch file. We may need an additional ticket for the updates to the mobile map that we would like to do, which are shown on the Mobile Map page in the Sketch file.

For mobile map we want to:

1. Add the segmented button group from USWDS.
2. Make the numbers on the map interactive.
3. For the location that's selected, the information should appear underneath that map.

[xiongjaneg]

@thejordanwood Thanks for the info! I'll get a ticket stubbed out for the mobile designs and link here.

Mobile map ticket is #15304

[thejordanwood]

@xiongjaneg This popped up after our discussion with the FE team, but we also need to add TTY numbers to the results. Here's the relevant ticket asking for that work and I've shown what this could look like in the Sketch file.

[mmiddaugh]

@thejordanwood is there any way to account for scenarios in which pins are overlaid or very close together? (From my experience, this is most common in searches in a urban location and "Community pharmacies" as the Facility type)

• Example: Results E/F and I/J in Spokane search for Community pharmacies

[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]

Add an AC to confirm analytics.

[xiongjaneg]

The current letter markers are interactive.