Front end templates for Vet Center shows both common and official names

[xiongjaneg]

Problem statement

Veterans may know and search for their closest Vet Center by a common name, rather than an official name. Vet Center common names should be displayed along with official names to help Veterans identify and locate their Vet Centers.

Background

The Outstation associated with Salt Lake City Vet Center is displayed using only the Official name. The Common name concept needs to be available for Outstations as well.

Example: Major Brent Taylor Vet Center Outstation (node/17527), associated with Salt Lake City Vet Center

Vet Center Sketch file
VBA Sketch file

CMS and FE screenshots

Private Zenhub Image

Test cases should come from Tugboat data

Current behavior

• A Vet Center is identified only by the official name in the main location listing on it's own Locations page.
  • Example 1: Dr. Cameron McKinley Department of Veterans Affairs Veterans Center (Prescott Vet Center) as displayed at the top of its own Locations page
  • Example 2: Col. Gail S. Halvorsen 'Candy Bomber' Veterans Center (Provo Vet Center) as displayed at the top of its own Locations page
• A Vet Center is identified only by the official name when listed as a nearby Location on another Vet Center's page.
  • Example 1: Dr. Cameron McKinley Department of Veterans Affairs Veterans Center (Prescott Vet Center) as displayed as a nearby location for West Valley Vet Center
  • Example 2: Col. Gail S. Halvorsen 'Candy Bomber' Veterans Center (Provo Vet Center) as displayed as a nearby location for Salt Lake City Vet Center
  • The above behavior will be addressed in this ticket.
• An Outstation has only an official name
  • Example: Major Brent Taylor Vet Center Outstation on Salt Lake City Vet Center locations page

Expected behavior

• Displayed names for Vet Centers and Outstations use both a official/legislated name and a common name.

Acceptance Criteria

Vet Center main page

• The Vet Center common name is used for the H1 title on the main Vet Center page
  • If the common name and official name differ, show the "also called" statement with the official/legislative name
  • The common name should not be a semantic heading, it should use a <p> tag.
  • This official name must have an ID.
  • The H1 common name must have an aria-describedby attribute that references the ID of the official name element.
  • The aria-describedby attribute must be conditional - if there is no official name, the attribute should not be present
• Design Review using demo environment https://web-txcrk8bym4a0ivw3xfr8xvdhezmls36f.demo.cms.va.gov/prescott-vet-center/
• Accessibility Review using demo environment https://web-txcrk8bym4a0ivw3xfr8xvdhezmls36f.demo.cms.va.gov/prescott-vet-center/

Vet Center Locations page

• Listings for a location with both an official and common name displays both names when listed as the Main location area on its own Locations page
• Listings for a location with both an official and common name displays both names when listed as a Satellite locations on the main Vet Center's Locations page
• Listings for a location with both an official and common name displays both names when listed as a nearby location on another Vet Center's Locations page
• All markup identified above (regarding the id and aria-describedby attributes) should be followed wherever the official name appears
• Design review using demo environment https://web-txcrk8bym4a0ivw3xfr8xvdhezmls36f.demo.cms.va.gov/prescott-vet-center/locations/
• Accessibility Review using demo environment https://web-txcrk8bym4a0ivw3xfr8xvdhezmls36f.demo.cms.va.gov/prescott-vet-center/locations/

Team

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

• CMS Team
• Public Websites
• Facilities
• User support
• Accelerated Publishing

[mmiddaugh]

This is likely blocked until Outstations are able to have both an official and common name - will be resolved by #15422 Vet Center Outstations should display common and official names

[xiongjaneg]

@mmiddaugh Currently, both names (when present) are all read by a screen reader as H1, do we want this?

[laflannery]

@mmiddaugh To clarify the question here - The H1 on Vet Center pages has an aria-describedby attribute that points to the text below:

What this does is appends this text to the H1 when a screen reader user chooses to read it out. It will NOT make this the H1, so if you are looking at, or hearing, a list of Headings on the page you will still have only "Prescott Vet Center" but if the user reads through the page, this additional text will be associated with the H1:

Maybe this doesn't clarify, but I tried lol

[laflannery]

I spoke with Michelle and she said:

"known as name" is the legislated official name which we are obligated to use. We retained the "common" name for familiarity. Given this, I think I'm leaning toward announcing both.

With that said, the markup should look as it currently does on Prescott Vet Center

• The H1 has an aria-describedby that points to the ID of the <p> tag containing the Official name.
• However, this attribute should NOT show if there is no official name text. This is currently happening (i.e. Salt Lake City Vet Center)

[eselkin]

I have a few questions about common and official names...

In the example of the Prescott Vet Center main page
We see the common name followed by Also known as the official name. With the AKA info attributing to the H1. This is correct.

But on the locations page in the Main location section we only see the common name in the link. Are we asking to also include the AKA official name in that link? We currently have a very long if condition checking whether to include that as a URL or title.

if vetCenter.entityBundle == "vet_center_cap" or vetCenter.entityBundle == "vet_center" or vetCenter.entityBundle == "vet_center_outstation" or vetCenter.entityBundle == "vet_center_mobile_vet_center"

otherwise it displays it as a link as is being done in Prescott. But how would we want to display it here? I don't have examples of how that should look (e.g., does the official name also go in the link? Does the title have aria-describedby with the official name as well?).

For the Other nearby Vet Centers do they need to display in this format?
Title
Also called Official name
Does it need to have aria-described by attribute on the Also called similar to the H1 in the main page? These are not H1s here, but H3s in vets-website. (Also checking if we have official names in that request that returns that data for the nearby list, because they are derived from a different source - vets-api).

I have a fix for @laflannery's comment on the Salt Lake Vet Center page, without an official name, but that seems secondary to this ticket.

[xiongjaneg]

blocked by #15660, which will likely be worked on in sprint 97

[mmiddaugh]

This work is unblocked by the completion of #15660
Additional direction from @laflannery in this slack thread

The complex name should have an ID. I indicated that it could be vet-center-title because that's what it currently is on the main Vet Center page but it can be anything really
The Facility name heading must then have an aria-describedby attribute that references that ID for the complex name element.
The aria-describedby attribute must be conditional - if there is no complex name, the attribute should not be present
I just don't want it to actually be a semantic heading - but rather connected to the heading above it

[laflannery]

@xiongjaneg I updated the ACs with the required markup for this work. I know it's mentioned in a few other places (sketch, the comment above) but I thought it might be best to have it in the ACs to make sure it wasn't missed.

[maxx1128]

I'm putting some notes here about how I'm going to start addressing the code parts of this ticket:

1. Check the specific parts of src/site/stages/build/drupal/graphql/vetCenterLocations.graphql.js to make sure that title and fieldOfficialName are called on all of the needed queries. One of these is reverseFieldOfficeNode on line 87.
2. The markup on src/site/includes/vet_centers/address_phone_image.liquid needs to be updated to include the alternative name if it's present and different from the main name.

[jilladams]

Moving to Review / QA based on Max's scrum update today.

[maxx1128]

Update: In current behavior, there are three examples of behavior to be changed. But example 2, showing both names for nearby locations, is rendered through a React component on vets-website, and it also does its own API call through vets-api for the data. At a lighthouse sync meeting, it was decided that these changes are out of scope and more of a want than a need at the moment. So this pull request for the ticket should be reviewed only for fixing examples 1 and 3 of the current behavior to the new behavior.

[jilladams]

@maxx1128 will you ticket or have you already tagged Jane to ticket the remaining work required for example 2 / React component?

[maxx1128]

I can write the ticket for the remaining work for this, and will reference this ticket too 👍

[maxx1128]

I created the ticket for the remaining work here and added an estimate while I was at it. cc: @xiongjaneg in case she wants to tweak any of the language or details.

[jilladams]

End of sprint update: Satellite offices AC is handled just we need sample content to prove it. Possibly mergeable today.

[jilladams]

PR is merged, should go out in today's the next successful daily content-build deploy

[xiongjaneg]

Design and a11y reviewed, all recommendations made and noted in PR, which was merged successfully