DP-45023: Google Translate widget updates for accessibility

[tfleming-ma]

Description

• New modal Twig template based on Figma design and built from example code
• New google-translate Twig template based on Figma design and built from example code
• Added translate SVG icon
• Various changes to remove code related to old Google Translate widget that did things like add top to the body
• Made best effort to use new spacing and color tokens, used existing color tokens when available

Related Issue / Ticket

• JIRA issue

Additional Notes:

• When loaded on mass.gov, it should be noted that the modal and translate markup load twice, once for the main menu seen at larger screen sizes and once for the mobile menu seen on smaller screen sizes. When you click on Language in either menu it is showing a different modal. This might cause some issues for some screen sizes, so this is an area we should definitely test.
• The modal JS and Google Translate JS are based on the example provided in the ticket. It has been modified to dynamically work with multiple modal instances on a page.
• Some design elements for the modal, such as the button group and content are rolled into the Google Translate Twig template, but I included styles in the Modal template's SCSS that will style the button group.
• The new languages.json includes all languages that are available in openmass's theme configuration
• I have done little testing on the React component

Impacted Areas in Application

• Header, pages, utility nav

@todo

• React component
• Adding/updating tests
• I don't see a way of hiding the Google Translate spinner that appears. It looks like Google intentionally uses random classnames to prevent hiding of the spinner, but maybe nothing needs to be done to address this.

[clairesunstudio]

Accessibility review feedback (WIP):

• Color contrast for select dropdown border doesn’t meet 3:1 requirement #BABABA against white background WebAIM: Contrast Checker
• When activating the Change language blue button using the keyboard it changes the background color to a light gray and the text color remains white while the widget updates the language, the 4.5:1 contrast should remain during this temporary state
• If I change the language to let’s say German, then reopen the modal and move the dark blue change language button, nothing happens, I would expect it to just close the modal and move focus back to the the trigger button
• Whenever updating the language using the widget with either the update or reset button after the modal is closed the focus should move to the trigger button

I've already fixed the focus setting part. But on mobile this means we need to keep the mobile tray open after clicking on the "translate" or "show original" button - please roll back auto closing the menu tray after modal actions @tfleming-ma

• Move the trigger button of the modal outside of the mobile menu so that users can easily find it to change the language especially when using browser zoom, there is currently a bug when using browser zoom that the language button doesn’t show right away in the mobile menu when zooming at 175%

For this, let's table the part of moving translate trigger button outside of mobile tray (This is a design decision, which will happen down the line with the new header/utility menu redesign). I've already fix the bug described in the latter part.

• The modal is not usable when zooming because it doesn’t show the full height of the modal (see screenshot) - for me the issue starts at 250% browser zoom on Google Chrome, 22” external monitor.

This is a crucial issue @tfleming-ma

• Currently the screen reader doesn’t announce a label for the select element, use aria-labelledby to point to the h2 heading ID

With the current setup, this might be tricky because the heading is in the modal component and the select is in the google translate component @tfleming-ma I will leave this to you to decide what we want to do here

• Remove the screen reader only text it is verbose and redundant: “Select a language from the dropdown menu and press the Apply button to translate the page”

This came from Alexa's example. But we will remove it

• Optional for future improvement: change the h2 heading text to “Translate page” and use a tag with text “Language” for the select dropdown.

Ignore this for now. This is a content/design decision

[clairesunstudio]

I think we need to think about what goes into the modal vs modal internal block (such as the google translate). The buttons in my opinion should be move to the modal level, because the keyboard interaction ties the focus back and forth between those buttons and the modal trigger button (I added that in the google translate JS which is not idea). Also from a component matching standpoint, the Figma component does include those action buttons.
However, in this case, the heading of the modal content needs to be a label for the select field (this is an edge case in my opinion) Let me know if you want to discuss the approach for that one

[clairesunstudio]

• Fixed the label association by setting a modal id (it needs to match in openmass)
• Fixed the high zoom modal display
  before:

after:

[tfleming-ma]

Fixed the focus in mobile when switching languages. Now, the menu will reopen with the focus on the Language menu item.