Facility Locator: Move mileage in search results items

[laflannery]

Background

In an effort to move the facility locator redesign work forward, we are trying to break up the large project into smaller, more manageable pieces that can be completed more easily and added into sprints.

Description

Move milage down below the header/facility name for the search results items in the Facility Locator

• Currently on the Facility Locator results, the milage is the first element in each item in the results, before the heading of the item. If a screen reader user navigates by headings, they are going to miss this information because they wouldn't expect to navigate backwards.
• By moving the milage down, after the heading, it will be less likely that users will miss this information.
• Link to Figma

Screenshots

**Current display**  **New display** 

Acceptance Criteria

• [x] For each results listing on the Facility locator, the milage is below the heading/facility name - as shown in the Figma file
• [x] Requires design review
• [x] Requires accessibility review

Accessibility review steps

Confirm the milage resizes appropriately with the browser font settings

1. Go to the Facility Locator page /find-locations
2. Complete a search, so that the results list appears
3. Within your default browser, update your settings to the largest font size available (you do not need to test all of these):
   • Chrome: Settings > Appearance > Font size
   • Firefox: Settings > Language & Appearance > Fonts
   • Edge: Settings > Appearance > Fonts
4. Confirm that the milage increases in size correctly

Confirm the milage is read properly and in the correct order by VoiceOver (because I believe the majority of people on the team have Macs)

1. Go to the Facility Locator page /find-locations
2. Complete a search, so that the results list appears
3. Turn on VO: CMD + FN + F5
4. Using the rotor menu, jump to one of the Facility name headings
   • CTRL + OPT + U
   • Arrow right until you get to the Headings menu
   • Arrow down to go through the available headings
   • Enter when you are on the heading you want to jump to
5. Read from that point on and confirm you hear the milage read AFTER the heading now
   • CTRL + OPT + A

[mmiddaugh]

Might make sense to do along with Facility Locator: Change markers on map to use letters instead of numbers #18435

[mmiddaugh]

@laflannery should we separate the mileage position change from the TTY number to make this easier to pull in as a quick win?

[laflannery]

@mmiddaugh Updated, TTY ticket is now here

[randimays]

Validated successfully in production; closing as complete.