Skip to content

DP-45023: Google Translate widget updates for accessibility#2055

Draft
tfleming-ma wants to merge 21 commits intodevelopfrom
patternlab/DP-45023_google-translate-widget-update
Draft

DP-45023: Google Translate widget updates for accessibility#2055
tfleming-ma wants to merge 21 commits intodevelopfrom
patternlab/DP-45023_google-translate-widget-update

Conversation

@tfleming-ma
Copy link
Collaborator

@tfleming-ma tfleming-ma commented Mar 9, 2026

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

Additional Notes:

  • The modal only has options for the main button you click in the JSON configuration. Other design elements for the modal, such as the icons, 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 and icons based on type, such as info, warning, etc
  • The new languages.json includes all languages that are available in openmass's theme configuration

Impacted Areas in Application

  • Header, pages, utility nav

@todo

  • Create the React components for the modal and Google Translate
  • Needs changelog
  • The modal's JS will likely only work for one modal on the page. I added a todo note in code for this as well.
  • 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.
  • The modal currently hides on mobile. It is visible after I click "Language" in the mobile menu if you expand the page width. Needs investigation.

@tfleming-ma tfleming-ma changed the title Initial setup of modal component DP-45023: Google Translate widget updates for accessibility Mar 13, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant