Update "Use my location" button/pattern

[laflannery]

Description

On the Facility Locator we have an option for the user to "Use my location" when they are searching. There are some known issues with this currently:

• This is a <button> element however it does not visually look like a button. To maintain material honestly (elements should look like what they are) and to be more accessible and avoid confusion, if this is a <button>, it should look like a button
• There is no programmatic association between "Use my location" and the "City, State, Postal Code" field. This means that users may not know exactly what the purpose of this button is for, especially since this is before the input field - "Use my location for what?" There is an existing ticket to add an aria-describedby attribute
• When a user selects this button, but if they do not have location sharing turned on in their browser, a modal will pop up. The content in this modal isn't very robust, it would benefit from review and updating. Example - clearer instructions about how to enable location sharing?
  

Additional options

Amanda has pointed out that if we are considering updating this pattern, we don't necessarily need to stick to what we have exactly, there are other ways, out in the wild that this is done. Zillow and Redfin have "Current location" as a dropdown from the search input. This is definitely a way to do it and we could make it work, both of these have their quirks and aren't perfect as is.

• Zillow: Arrow keys are used to access "Current location" but there wasn't a clear SR announcement that this was available. Non-sighted uses may miss this as an available option
• Redfin: Tab is used to access "Current location" however it's not immediately after the search box, the X and search icon are inbetween. Also, when recent searches are available, the behavior becomes inconsistent and confusing because recent searches, while in the same dropdown are accesses with arrow keys and not tab.

Broader implications

This "use my location" option is used in a few places throughout VA.gov but is not an established pattern or component. Because of that, the usage is is not standardized so the issues that were pointed out above might exist in other places and other instances might have potentially additional instances. There is an opportunity for us to improve this pattern, propose it as an experimental design to the DST and then other teams with "Use my location" would have an example of how to update and build their experience.

Design

Facility Locator Figma file

Acceptance Criteria

• Design is considered along with other Facility Locator updates in Design updates to Facility Locator search #17835
• Design is documented in Figma file
• Design is reviewed with UX Lead, Product, Engineering, Content, and Accessibility
• Design is reviewed with and sent to VA UX Lead for final sign off
• Follow up tickets are created

[laflannery]

@aklausmeier In the FL Figma comments, you asked me to review the out in the wild implementations of "Use my location", this ticket includes that review as well as the overall issues CC: @mmiddaugh

[laflannery]

Apparently I made this exact same ticket back in December. I'm closing that one because this has more info

[laflannery]

This is going to be discussed at the 2/9 DSC meeting apparently

[aklausmeier]

@mmiddaugh This is a ticket around FL "Use my location" we briefly discussed. If you happen to remember which prior research study might be related, let us know.

I found some prior insights on Use my location in this study.

3 of 10 were hesitant to use the location feature on their phones in general
"I don’t usually use the, “use my location” option on most sites because I usually have the location of my phone turned off."

[aklausmeier]

for future self - another VA instance of Use my location button pattern on Accredited Rep

[aklausmeier]

Initial discussions on design iterations in Figma

Might make sense to pull in with #17835

[jilladams]

@davidmpickett @thejordanwood For UX Sync tomorrow, we can refine and it might fit into end of Sprint 3.

[thejordanwood]

Update from UX sync:
Reviewed design with team and we're going to move forward with adding "Use my location" into a dropdown. Functionality should be:

• User selects location field
• "Use my location" should appear in dropdown
• If "Use my location" isn't selected, the dropdown will disappear when user starts typing into location field

Next steps:
@laflannery is going to determine how this should work best for accessibility, then we'll ask an engineer about tech feasibility.

cc: @davidmpickett @aklausmeier

[thejordanwood]

Also noting that the ticket mentions changing the wording in the location modal. We proposed updated wording when we suggested new empty/error states for facility locator. This was the wording we proposed at the time, but let me know if it needs to be updated again. @davidmpickett @aklausmeier @laflannery

[laflannery]

This still sounds good to me!

[thejordanwood]

End of sprint update:

We now have 2 design options for this. Here's a relevant Slack thread that describes why Laura and I came up with a second option based on feedback she received in an a11y meeting. The thread also has some discussion on next steps.

Option 1
Adding "Use my location" into a dropdown.

Option 2
Moving "Use my location" to a button on the right side of the location field, similar to how global search works on the site.

Laura, Eli, and I met to discuss both options and explore tech feasibility.

• Eli said the button option would be easier to implement
• We all agreed that the dropdown would be better IF we planned to implement a typeahead option to the location field sometime in the future (Example of this on yelp.com). Then we could consider moving the 'Use my location' into a dropdown as a phase 1 approach.

Next steps:
I think at this point we need a product decision on which option to move forward with. Here are some open questions:

• Has a typeahead option for the facility locator field been considered in the past?
• If not, could Eli look into if a typeahead option is feasible in the future? I think that would help us make a decision.
• This may need usability testing (also referenced in the Slack thread). Once we decide on a solution, we would need to think through next steps for that.

cc: @jilladams @Agile6MSkinner @aklausmeier @laflannery @davidmpickett @eselkin

[jilladams]

Per Michelle: We don't know of previous work around typeahead on Location field, but recent convo around how "Springfield" could be MO, IL, etc. Mapbox would need to provide the validation, OR any other solution would need to be compatible with Mapbox.

@Agile6MSkinner Will make a SPIKE ticket to verify Mapbox typeahead, and that will finalize the decision around Options 1 or 2.

Closing, that in mind.