Facility Locator: Change markers on map to use numbers instead of letters

[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

The Facility locator has a list of results. A list pattern is more common to use numbers (1, 2, 3, etc.) rather than letters (A, B, C, etc.)

Screenshots

Current screenshot

New Screenshot

We should also update the markers so that they increase in size according to the browser font size. Right now these are using PXs so the size is set. By changing this to REMs these will scale and resize correctly.

Acceptance Criteria

• Within the map and the results listing, numbers are used as the markers to indicate locations
• The markers resize properly according to browsers/device font size settings
• Change made to both mobile and desktop
• Requires design review
• Requires accessibility review

Accessibility review steps

DESKTOP: Confirm the map marker is connected to the search result item

1. Go to the Facility Locator page /find-locations
2. Complete a search, so that the results list appears
3. Click on a marker in the map
4. Confirm that focus is brought to that search item in the list

Confirm search items are read properly

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. Tab to the Search button
5. Read from that point on and confirm you hear the marker and other information read correctly and in the proper order.
   • CTRL + OPT + A

Confirm the markers resize 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 markers increase in size correctly

[mmiddaugh]

To avoid confusion, especially for those using screen readers, we may need to move the mileage at the same time (#18434)

[laflannery]

Just as a reminder that this issue is blocked by moving the milage.

If we do this first, the milage could be confusing for SR users because it will be read as "1 0.6 miles"

[randimays]

Validated successfully in production; closing as complete.