Confirm Design System fix for "On this page" translation, add lang attribute if needed

[allisonlu]

UNBLOCKED BY https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/1100 UPDATE: Design system team updated the component; however, in this comment Brooks indicated the CMS needs to add a lang attribute to the <main> tag on any page that uses the component.

Description

On any page with translated content, the "On this page" header appears in English. See #9868 for screenshots and more info. From that spike ticket, we found out that this is due to switching over to using the design system component, which does not include Spanish and Tagalog translations.

PR in June 2022 when we switched over: https://github.com/department-of-veterans-affairs/content-build/pull/1173 On this page component on the design system website: https://design.va.gov/components/on-this-page

Tasks

- make changes - remove new design system component (that doesn't work for translation) - look at old code that preceded addition of component - QA translation of both Spanish and Tagalog versions - get code review (assume: reviewer will pull code and run locally) When Design system component is translated:

• [ ] Verify that our component appears correctly with translations

Acceptance Criteria

• [ ] "On this page" appears in English on English pages
• [ ] "On this page" appears in the appropriate non-English language
  • [ ] Spanish pages = En esta página
  • [ ] Tagalog = Sa pahinang ito

CMS Team

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

• [ ] Program
• [ ] Platform CMS Team
• [ ] Sitewide Crew
• [ ] ⭐️ Sitewide CMS
• [x] ⭐️ Public Websites
• [ ] ⭐️ Facilities
• [ ] ⭐️ User support

[allisonlu]

The Design System Council will be evaluating this request on Friday, August 19th, 1p ET.

[jilladams]

https://dsva.slack.com/archives/C52CL1PKQ/p1660929570731529

Design system council agreed today to implement the translation strings we previously used, ETA 1-2 sprints to get the component translated. We will hold for that, rather than revert to the hard coded/translated string then re-adopt the design system component when translation is done.

Marking this blocked / revising the ticket to be around confirming the Design system component translation, when it's available.

Fix will be tracked in https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/1100.

[wesrowe]

I added an update to the main ticket details. Updating the title and moving to Stretch.

[jilladams]

Need to investigate the design system comment re: how to declare the language of the page.

[apisandipas]

After Slack Discussion here and Via Zoom with @ryguyk , we've determined the best approach is via a Metal Smith plugin to hook into the build process and add a lang attribute to all main elements. As this is content-build related, we've repointed the ticket to be a 5.

[jilladams]

@apisandipas can you link the PR here?

[jilladams]

https://github.com/department-of-veterans-affairs/content-build/pull/1333

[jilladams]

Verified in Staging: