Translation toggles: Update existing pages to spec & document

[jilladams]

Description

Slack thread with CAIA: https://dsva.slack.com/archives/C52CL1PKQ/p1697823886487629

CAIA flagged that a few pages where we previously added Translation toggles are missing some pieces of implementation that we were not aware of / forgot at the time (not sure which).

https://www.va.gov/resources/the-pact-act-and-your-va-benefits/
https://www.va.gov/resources/the-pact-act-and-your-va-benefits-esp/
https://www.va.gov/resources/the-pact-act-and-your-va-benefits-tag/

• EN: https://www.va.gov/health-care/how-to-apply/
• ES: https://www.va.gov/health-care/how-to-apply-esp/
• EN: https://www.va.gov/health-care/after-you-apply/
• ES: https://www.va.gov/health-care/after-you-apply-esp/
• EN: https://www.va.gov/health-care/eligibility/ (added during dev)
• ES: https://www.va.gov/health-care/eligibility-esp/ (added during dev)
• EN: https://www.va.gov/disability/eligibility/
• ES: https://www.va.gov/disability/eligibility-esp/
• EN: https://www.va.gov/disability/how-to-file-claim/
• ES: https://www.va.gov/disability/how-to-file-claim-esp/
• EN: https://www.va.gov/disability/after-you-file-claim/
• ES: https://www.va.gov/disability/after-you-file-claim-esp/

Additional Context

Because we don't have Sitewide translation yet, we create separate Drupal nodes per language, and the Front-end uses a React App to toggle between them. e.g. https://www.va.gov/resources/the-pact-act-and-your-va-benefits/

CAIA's Requirements:

department-of-veterans-affairs/va.gov-team#53916

• Pages are slotted as siblings to the English versions in the hierarchy
• URLs are the same as the English version with a 3 character language code appended to the end of the URL (i.e. "esp" for spanish, "tag" for tagalog, any additional languages will need to be defined)
• Each page has a toggle to switch between languages at the top of the page
• The breadcrumb current page segment is translated
• The title tags are translated
• The left nav updates the current page and child pages to the appropriate language - it was confirmed that each nav option is tagged with a language so it is read appropriately when intermingled with english options
• Pages are linked to/referenced in the language resource page (spanish and tagalog)

Existing documentation
https://github.com/department-of-veterans-affairs/va.gov-team/blob/master/products/content-localization/README.md

https://github.com/department-of-veterans-affairs/va.gov-team/tree/master/products/public-websites#translations

Previous discovery work ticket
Re: How translations work today: #9772
Findings in comments: #9772 (comment)

Examples of previous translation toggle implementations:
#9918
#9868

Acceptance Criteria

AC1:When user is viewing the 'Health Care', ‘Eligibility’ page in Spanish, the left nav for this page is displayed as translated in Spanish (see the screenshot after the three AC below)

GIVEN a Veteran or other user of VA.gov visits this webpage https://www.va.gov/health-care/eligibility-esp/,
WHEN the Veteran/user looks at the left navigation
THEN the left nav for this page displays in Spanish
AND no left nav links are missing

AC:2 When user is viewing the 'Health Care', ‘How to apply’ page in Spanish, the left nav for this page is displayed as translated in Spanish

GIVEN a Veteran or other user of VA.gov visits this webpage https://www.va.gov/health-care/how-to-apply-esp/,
WHEN the Veteran/user looks at the left navigation
THEN the left nav for this page displays in Spanish
AND no left nav links are missing

AC:3 When user is viewing the 'Health Care', 'After you apply’ page in Spanish, the breadcrumb and left nav for this page is displayed as translated in Spanish

Note that if you click the Spanish link to this page from the ticket, the breadcrumb isn’t translated, but if you click back and forth on the English/Espanol toggles, then the breadcrumb does translate.

GIVEN a Veteran or other user of VA.gov visits this webpage https://www.va.gov/health-care/after-you-apply/*
WHEN the Veteran/user looks at the breadcrumb, the portion of the breadcrumb and then the left nav for this page
THEN it is displayed in Spanish: Después de aplicar
AND the left navigation for this page is displayed in Spanish
AND no left nav links are missing

AC1:When user is viewing the ‘Disability’, ‘Eligibility’ page in Spanish, the left nav for this page is displayed as translated in Spanish and all left nav links display (see the screenshot after the three AC below)

GIVEN a Veteran or other user of VA.gov visits this webpage https://www.va.gov/disability/eligibility-esp/
WHEN the Veteran/user looks at the left navigation
THEN the left nav for this page displays in Spanish
AND no left nav links are missing

AC:2 When user is viewing the ‘Disability’, ‘How to file a claim’ page in Spanish, the left nav for this page is displayed as translated in Spanish and all left nav links display

GIVEN a Veteran or other user of VA.gov visits this webpage https://www.va.gov/disability/how-to-file-claim-esp/
WHEN the Veteran/user looks at the left navigation
THEN the left nav for this page displays in Spanish
AND no left nav links are missing

AC:3 When user is viewing the ‘Disability, ‘ After you file a claim’’ page in Spanish, the left nav for this page is displayed as translated in Spanish and all left nav links display

GIVEN a Veteran or other user of VA.gov visits this webpage https://www.va.gov/disability/after-you-file-claim/
WHEN the Veteran/user looks at the left nav for this page
THEN the left navigation for this page is displayed in Spanish
AND no left nav links are missing

• A11y review from Laura

From CAIA ticket originator:
Verify that for each existing page with Translation toggles, the following criteria are met:

• Pages are slotted as siblings to the English versions in the hierarchy
• URLs are the same as the English version with a 3 character language code appended to the end of the URL (i.e. "esp" for spanish, "tag" for tagalog, any additional languages will need to be defined)
• Each page has a toggle to switch between languages at the top of the page
• The breadcrumb current page segment is translated
• The title tags are translated
• The left nav updates the current page and child pages to the appropriate language - it was confirmed that each nav option is tagged with a language so it is read appropriately when intermingled with english options
• Pages are linked to/referenced in the language resource page (spanish and tagalog)
• Requires CAIA review in a Preview Instance before merge
• Update https://github.com/department-of-veterans-affairs/va.gov-team/blob/master/products/content-localization/README.md with any new information required to know how to make similar changes in future

[FranECross]

Hello, @mnorthuis!

Regarding your translation ticket the Public, I have a few questions in order to ensure the PW team is translating per the request in this original ticket, and that I don't inadvertently increase the scope of this ticket. I understand the first few bullet items, but want to ensure I'm interpreting this sentence correctly (The left nav updates the current page and child pages to the appropriate language - it was confirmed that each nav option is tagged with a language so it is read appropriately when intermingled with english options).

I ask because there is quite of untranslated text on the page, and I'm not sure if the request is to ensure all the text listed below is also translated. Thanks in advance for your help and clarification!
cc @jilladams

I'll use this page as an example:

When Español is clicked, the following text/sections are not translated...

👉🏼The Search widget/tile

👉🏼The Tags

👉🏼How do you rate…

👉🏼Related information heading (although the links are translated)

👉🏼VA benefits heading and associated info

👉🏼Need more help? Heading and info

👉🏼Back to top link, Last updated, and Feedback button

[mnorthuis]

Hi @FranECross! The guidance listed is specific to pages within the benefit hub experience. The screenshots you provided are for Resources and support pages, so there is an implementation difference there.

Any of the pages that live within /resources wouldn't follow all of the CAIA guidance listed - i.e. R&S doesn't have left nav or a hierarchy in pages.

In regards to what elements within a R&S page that should/should not be translated, I'm going to defer to @DanielleThierryUSDSVA

[FranECross]

@mnorthuis Thanks so much for the quick response and distinction between benefit hub, and resources/support pages!

I'll work with @jilladams and PW website folks to ensure my AC is accurate and makes sense. I look forward to Danielle's response.

[jilladams]

@RLHecht I somehow lumped in the 3 R&S PACT pages into this request to update benefit pages to follow the translation requirements. Mikki helpfully pointed out that that's not gonna work (in comments above), based on Fran's screenshots (also in comments above).

Just wanna make sure that isn't news for you, and I'm going to remove them from scope here.

[FranECross]

@RLHecht Will you please share links to a couple of pages where the translations is correct, so that we can compare and ensure we are addressing all concerns?

[RLHecht]

@FranECross Our COVID pages are set up with the language toggles and left nav, This should help:

https://www.va.gov/health-care/covid-19-vaccine-esp/
https://www.va.gov/health-care/covid-19-vaccine-esp/about-covid-19-vaccine-esp/
https://www.va.gov/health-care/covid-19-vaccine-esp/vaccine-record-esp/

Let me know if you need anything else!

[FranECross]

@RLHecht Thanks so much for the quick response! Appreciate it!

[FranECross]

@RLHecht Some follow-up questions when looking at the page from https://www.va.gov/health-care/covid-19-vaccine-esp/ .

Thanks in advance!

• For the breadcrumb, I noticed that only the portion of the breadcrumb for this particular page is translated into Spanish. Should 'Home' and 'Healthcare' also be translated?

• For the language links/tags, when the page is viewed in Spanish, is it okay that English isn't Inglés?

• On the left nav, just confirming that the expectation is that the only things translated are for the page being viewed?

• Confirming that we don't expect the 'main category' heading (not sure what it's actually called) - in this case 'Health care' (matches the second breadcrumb) to be translated?

[FranECross]

@jilladams @randimays @chriskim2311 @dsasser I've added AC to the ticket based on feedback from RHecht. I have a couple follow up questions to them and will edit if needed after hearing back. Please let me know if anything seems amiss or confusing. Thanks! cc @jilladams

[RLHecht]

Hi @FranECross, these are all great questions but I think everything is OK as is. @mnorthuis can you also take a look and let me know if you disagree with any of this?

1. The IA documentation listed "The breadcrumb current page segment is translated" so it's OK as is. "Home" and "Health care" should still be in English.
2. These are OK to stay as is.
3. Correct. The IA documentation says only the current page and child pages need to be translated so the rest are OK in English.
4. This is also OK to stay in English.

[mnorthuis]

@FranECross Yes, as @RLHecht stated, very good questions, but how we have that example page implemented, is as far as translation should go for right now. One of the big reasons for partial translation, is that we can't give the impression that the more of the site is currently translated. We can only offer up specific pages right now.

[randimays]

@mnorthuis @RLHecht

Regarding https://www.va.gov/health-care/eligibility-esp/

This is the Health Care hub sidebar data in the CMS for Eligibility:

We compared that to the sidebar for COVID-19 vaccines at VA (where things are working as expected):

There doesn't seem to be any Spanish content for Eligibility in the CMS.

The same is true for the Disability hub sidebar data in the CMS.

Could someone add these to the CMS so we can continue troubleshooting the display of the links?

[randimays]

Putting into Blocked for now until we can get that Spanish sidebar data added in the CMS.

[RLHecht]

@randimays We only have one Spanish eligibility page for health care and one for disability.
Health care: https://prod.cms.va.gov/health-care/eligibility-esp
Disability: https://prod.cms.va.gov/disability/eligibility-esp

[randimays]

@RLHecht I may have misunderstood your meaning. I haven't seen a Spanish translation of the Eligibility sidebar information for either the Health Care hub or Disability.

For example, /health-care/covid-19-vaccine-esp (the example you gave that is working as expected) has this sidebar information coming from the CMS. Notice there are Spanish and Tagalog translations added in with the English:

Here's the display:



However, `/health-care/eligibility-esp` has this sidebar information coming from the CMS. Notice there are no Spanish translations in the data.



Appearance on the page:

I am still trying to get the rest of the sidebar information to display (the missing 3 links), but even when they do display, I'll only have English sidebar information to show on this page.

The same issue is true for /disability/eligibility-esp/

[RLHecht]

@randimays I think I understand. Are you asking for what the left nav labels would be in Spanish to represent the 3 disability and 3 health care pages we have? @mnorthuis should this match what we have has left nav labels in English (Eligibility, How to apply, After you apply) or should we use the H1 of each Spanish page?

[randimays]

@RLHecht I'm not asking what the labels should be, but rather pointing out that the data doesn't exist in the CMS. The Spanish translations should be coming in to the front end attached with their child links.

From the first example, we're receiving Vacunas contra COVID-19 en el VA from Drupal and it is attached to its child elements:

• Sobre las vacunas COVID-19
• Como obtenur su historial de vacunas COVID-19 en linea

The Health Care and Disability hub pages we need to fix in this ticket do not have Spanish translations coming in with their sidebar data, so I can't display them.

I can't change the text of the sidebar information in the front end. The data has to be coming from Drupal.

[RLHecht]

I'm not sure how we get the data into drupal. Do you know how this was done for the covid work? Our team created the drupal pages but i'm not sure beyond that.

[randimays]

@RLHecht I do not know how that was done. @dsasser any insights here?

[jilladams]

These sidebars come from Drupal menus. There are 3 pieces here and we'll need to figure out (and document) the order of operations:

1. Get the translated content that should appear in this menu. (if we're using the H1 etc)
2. work out how the FE knows which section of the menu to display in the FE
3. enter the new translated links into the Prod menu

Figuring out #2 is prob the most helpful piece, to make sure we know what will / should happen when we add the new translated menu items into these menus.

[jilladams]

@RLHecht can you confirm that we should use the H1s as the menu links? If so, we are likely unblocked here and can add those to the menu(s). (We will verify this in a Tugboat first.)

From scrum:

• FE logic, we think, checks for -esp in the path of menu items, in order to show them in the right place.
• On Healthcare, there are 2 English links not appearing in the sidenav, in addition to 1 Spanish page. Josh / Randi have tested with many other paths, and they all appear correctly, until we plug in the proper path that should be used, then they disappear. This seems to be happening in the content-build template.

[RLHecht]

I'd like to get @mnorthuis to weigh in on the menu items. In looking at the Spanish pages we already have live some of the H1s are significantly longer than the English versions. I think maybe they should match what the English left nav items are as long as that makes sense in Spanish. We can have Ana confirm and I can reach out to the State Department for the official translations.

[mnorthuis]

If we can get shortened versions of the H1 for the left nav, that would be ideal, but also want to make sure those shortened versions are accurate.

[RLHecht]

@mnorthuis For the shortened H1s, do you mean using something similar to what's in the English left nav now as long as that makes sense in Spanish? "How to apply" instead of "How to apply for for VA health care" as an example. If so, I can send these to the State Department to confirm they are accurate once translated:

How to apply
Eligibility
After you apply
After you file your claim

Or are we looking to be more specific and mention the benefit?

[mnorthuis]

Those labels would be fine with me, but I would look to the State Department to tell us if they contextually make sense once translated as menu items.

[RLHecht]

@jilladams @randimays We got back the translations for the left nav items. They are they following:

How to apply: Cómo solicitar
After you apply: Después de solicitar
Eligibility: Elegibilidad
How to file a claim: Cómo presentar una reclamación
After you file your claim: Después de presentar su reclamación

This should hopefully unblock you from this work. Let me know if you need anything else from us!

[FranECross]

@randimays I removed the Blocked label and moved the ticket into Stretch/Next Sprint just in case it will fit in Sprint 99. If not, then it can truly be stretch... :) cc @jilladams

[randimays]

@FranECross @jilladams @dsasser I think the next step here is to be sure the menu items exist in Drupal. The Spanish data weren't coming through on the front end at all.

[jilladams]

@randimays any Drupal admin can add those. I'm happy to go ahead and do it, if we can confirm that no new menu items will appear on the FE until you pull them into the template?

For me later:
Healthcare hub menu: https://prod.cms.va.gov/admin/structure/menu/manage/health-care-benefits-hub
Disability hub menu: https://prod.cms.va.gov/admin/structure/menu/manage/disability-benefits-hub

[randimays]

@jilladams I'm fairly certain that we need to add info to Drupal (see this comment). The front end isn't receiving menu data for those Spanish sections at all.

[FranECross]

Add a tugboat instance so this can be tested before going to PROD @randimays

[Becapa]

Attaching a spreadsheet for the Drupal Menu Links that need to be re-created in prod/stage:
Menu_Items_for_Translations.xlsx
Some of the links look like duplicates of existing links but they are needed for their Spanish parent links to expand properly.

[randimays]

@Becapa and I added menu links to Drupal in a Tugboat instance and this addressed the issues we were seeing across Health Care and Disability benefit hubs.

Here's the Slack thread where I posted our Tugboat for review and summarized the testing steps needed.

Before this ticket closes I will update the documentation for adding translated menu items to Drupal and the process of created translation toggles and elements in the front end (content-build).

[randimays]

Our plan is to add the Drupal menu items @Becapa added in the above comment to production on Monday 12/11, and then do a content release, likely taking place in the late afternoon CST. Relevant Slack thread

[laflannery]

Just commenting that I did get a chance to review and the items covered in this ticket all have the proper lang attributes for accessibility

[randimays]

@mnorthuis @RLHecht We've updated the menu items in Drupal and the menus are reflecting correctly in Production for all of the Health Care hub and Disability hub links in this ticket description. Could you please verify and let us know if there are any issues?

[RLHecht]

These look right to me. Thank you @randimays for working on this!

[mnorthuis]

They look good! Thank you!

[jilladams]

Closing based on CAIA validation!

[randimays]

Updated documentation for content localization is here!