Update FE for Service Options to match new guidance

[davidmpickett]

User Story or Problem Statement

Follow up ticket based on #17600

Desired state for launch - Office Visits

Drupal selection	FE VBA	FE VAMC facility	FE VAMC top task	Change explanation
Office visits - NULL	[No display]	[No display	[No display]	No change
Office visits - No	[No display]	[No display]	[No display]	No change
Office visits - Yes, by appointment only	🏢 Visit our office, by appointment only	🏢 Visit our office, by appointment only	[No display]	No change
Office visits - Yes, on a first-come, first-served basis walk-in visits only	🏢 Visit our office, first come, first served walk-in visits only	🏢 Visit our office, first come, first served walk-in visits only	[No display]	Updated per CAIA
Office visits - Yes, with or without an appointment	🏢 Visit our office, with or without an appointment	🏢 Visit our office, with or without an appointment	[No display]	No change

Desired state for launch - Virtual Support

Drupal selection	FE VBA	FE VAMC facility	FE VAMC top task	Change explanation
Virtual support - NULL	[No display]	[No display]	[No display]	No change
Virtual support - No	[No display]	[No display]	[No display]	No change
Virtual support - Yes, by appointment only	🗓️ Schedule a virtual appointment Virtual visits by appointment only	🗓️ Schedule a virtual appointment Virtual visits by appointment only	[No display]	More clearly indicating that appointments are required for virtual visits.
Virtual support - Yes, on a first-come, first-served basis Veterans can call at their convenience	🗓️ Schedule a virtual appointment 📞 Call at your convenience	🗓️ Schedule a virtual appointment 📞 Call at your convenience	[No display]	This icon and wording is what we validated with users during testing.
Virtual support - Virtual visits may be available	🗓️ Virtual visits may be available	🗓️ Virtual visits may be available	[No display]	Add this option to allow for partial availability
Virtual support - Yes, with or without an appointment	🗓️ Schedule a virtual appointment	🗓️ Schedule a virtual appointment	[No display]	Remove this option - no use cases

Description or Additional Context

Coordinate with Drupal around how the fourth Virtual Support option is changing. Might be okay to keep the same machine name and just change the label so the GraphQL query doesn't have to change.

Acceptance Criteria

• The FE display matches the logic above (wording & icon)
• FE display respects Drupal editor selection (conditional logic)
• Existing Service Location queries and templates are not negatively impacted
• Confirm on Tugboat
• Requires design review
• Requires accessibility review

[davidmpickett]

@eselkin Just noting here that you will need to reference @omahane's PR for updated GraphQL variables #17905

[eselkin]

I think the GraphQL variables are the same but the values are different. Right @omahane?

[eselkin]

Also, do we know what the screen reader text will be for these icons, if any? @laflannery @davidmpickett
Should I use va-icon now that they added it to main?
Since building doesn't exist anymore in va-icon, should we use: location_city
https://design.va.gov/storybook/?path=/story/uswds-va-icon--default&args=icon:location_city;size:3

EDIT: I take it back va-icon is still not working in vets-website or content-build locally. But something to think about for updates.

[davidmpickett]

Also, do we know what the screen reader text will be for these icons, if any? @laflannery

These would be classified as decorative icons by Design System guidance. Per @laflannery's previous comment they should have aria-hidden="true", no Screen Reader Text.

@davidmpickett Should I use va-icon now that they added it to main? Since building doesn't exist anymore in va-icon, should we use: location_city https://design.va.gov/storybook/?path=/story/uswds-va-icon--default&args=icon:location_city;size:3

EDIT: I take it back va-icon is still not working in vets-website or content-build locally. But something to think about for updates.

@thejordanwood did update her mockups to use v3 icons, but if we're blocked, we're blocked. Since the integration branch wasn't part of the Icon Audit, you'll likely need to update the related tickets to include updating these icons later.

• Update VAMC to use va-icon #17855
• Update VBA Regional Office Pre-Prod Pages to use va-icon in place of fontawesome #17886

[davidmpickett]

I think the GraphQL variables are the same but the values are different. Right @omahane?

My bad. I conflated values with variables!

The fields/variables you are querying are the same (e.g. fields_office_visits), there are just some updated possible values for them (e.g. yes_walk_in_visits_only)

[laflannery]

There are going to be very few, if any, instances where icons aren't going to be decorative

The SL branch was accounted for in the icon audit, this might just need to be adjusted depending on timing of launch vs when we get unblocked

[eselkin]

I don't know if va-icon will have an aria-hidden property, but va-icon doesn't work yet so I'm doing the standard with the aria-hidden on the fontawesome tag.

[davidmpickett]

All scenarios tested and verified on Tugboat