Experimental Design (language toggle for multilingual content)

[DanielleThierryUSDSVA]

Check the design system backlog and experimental design tab to see if your proposal has already been suggested.

What

This toggle helps the site visitor switch between page-level content in different languages.

Why

• What evidence do you have that it's needed by multiple services across VA? We currently have this toggle on our translated COVID-19 pages. At this time, we don't have enough multilingual content to warrant a site-level toggle. So as we continue to add more multilingual content, we'll use this page-level toggle more. In addition, the check-in experience team is starting an effort to translate the check-in content and will need to include a similar toggle.
• What evidence do you have that it meets the needs of the users of those services? The placement of this toggle is based on previous design and usability research. Site visitors are currently using the toggle to navigate English, Spanish, and Tagalog COVID-19 content.
• Have you checked that it doesn't already exist in the VA.gov Design System? Yes.

Anything else

• Example of current use of this toggle on a static page
• Outline of considerations and code: https://github.com/department-of-veterans-affairs/va.gov-team/blob/master/products[…]n/development/translation-mgmt/solution2_static-react-widget.md](https://github.com/department-of-veterans-affairs/va.gov-team/blob/master/products/content-localization/development/translation-mgmt/solution2_static-react-widget.md
• Research readout from 2019

Next steps

You may present your work to the Design System Council at an upcoming meeting. If you do not or cannot attend the Design Council Meeting, you can opt to get an asynchronous approval.

Submit requests to join an upcoming Design System Council meeting in #vsp-design-system.

During the meeting, the Design System Council Working Group will evaluate the request and make a decision.

If your request is approved, you can add your component/pattern to the Experimental Design section of design.va.gov. If you have any questions on how to add your component/pattern to the Experimental section, please reach out to the Design System Team at #vsp-design-system.

[humancompanion-usds]

@caw310 - I want to try to pull this in soon to go with our other i18n work thus far.

[caw310]

DanielleThierryUSDSVA, this will be discussed at the DSC meeting on 3/24/23.

[DanielleThierryUSDSVA]

Hi @caw310. Thanks for the heads up, but I'm out on 3/24/23. Feel free to reach out with any questions you might have for me. Thanks.

[humancompanion-usds]

@caw310 - Any notes from the DSC meeting on this one? Thanks.

[caw310]

@humancompanion-usds Sorry I didn't see this until now. Here are the action items from the discussion:

• Add guidance for now
• Add component later as team is focused on upgrade. https://docs.google.com/document/d/1YyZ6NQASLd9ii7i2fng15Gcq5LWwowiFYqfCaSjdpfs/edit?usp=sharing

[humancompanion-usds]

@DanielleThierryUSDSVA - Guidance for the Language toggle is up: https://design.va.gov/components/language-toggle

We have not started on building a component but I wanted to get the rest of this up on the site. Can you or someone on your team review the guidance and let me know if you see anything missing? Thanks!

[humancompanion-usds]

@caw310 - Please create issues for adding this component to Figma and as a web-component in Storybook. Thanks!

[caw310]

Figma: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/2582 Development: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/2583 A11 review: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/2584 Documentation: https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/2585