DP-45023: Accessible translation widget

changelogs/DP-45023.yml

@@ -0,0 +1,41 @@
+#
+# Write your changelog entry here. Every pull request must have a changelog yml file.
+#
+# Change types:
+# #############################################################################
+# You can use one of the following types:
+#  - Added: For new features.
+#  - Changed: For changes to existing functionality.
+#  - Deprecated: For soon-to-be removed features.
+#  - Removed: For removed features.
+#  - Fixed: For any bug fixes.
+#  - Security: In case of vulnerabilities.
+#
+# Format
+# #############################################################################
+# The format is crucial. Please follow the examples below. For reference, the requirements are:
+#  - All 3 parts are required and you must include "Type", "description" and "issue".
+#  - "Type" must be left aligned and followed by a colon.
+#  - "description" must be indented with 2 spaces followed by a colon
+#  - "issue" must be indented with 4 spaces followed by a colon.
+#  - "issue" is for the Jira ticket number only e.g. DP-1234
+#  - No extra spaces, indents, or blank lines are allowed.
+#
+# Example:
+# #############################################################################
+# Fixed:
+#  - description: Fixes scrolling on edit pages in Safari.
+#    issue: DP-13314
+#
+# You may add more than 1 description & issue for each type using the following format:
+# Changed:
+#  - description: Automating the release branch.
+#    issue: DP-10166
+#  - description: Second change item that needs a description.
+#    issue: DP-19875
+#  - description: Third change item that needs a description along with an issue.
+#    issue: DP-19843
+#
+Added:
+  - description: Added accessible translation widget.
+    issue: DP-45023

composer.json

@@ -295,7 +295,7 @@
         "jashkenas/backbone": "^1.6",
         "jashkenas/underscore": "^1.13",
         "league/commonmark": "^2.7",
-        "massgov/mayflower-artifacts": "dev-develop",
+        "massgov/mayflower-artifacts": "dev-patternlab/DP-45023_google-translate-widget-update",
         "monolog/monolog": "^3",
         "npm-asset/ace-builds": "~1.0",
         "npm-asset/select2": "^4.1.0-rc.0",

conf/drupal/config/mass_theme.settings.yml

@@ -15,6 +15,7 @@ languages:
   ar: ar
   de: de
   el: el
+  en: en
   es: es
   fa: fa
   fr: fr

docroot/themes/custom/mass_theme/mass_theme.libraries.yml

@@ -30,11 +30,14 @@ global-styling:
   js:
     overrides/js/fixed-feedback-button.js: {}
     overrides/js/device.js: {}
+    overrides/js/google-translate-modal.js: {}
     overrides/js/table.js: {}
 
   dependencies:
     - mayflower/global
     - core/drupal
+    - core/drupalSettings
+    - core/once
 
 
 global-styling-lp:
@@ -69,11 +72,14 @@ global-styling-lp:
   js:
     overrides/js/fixed-feedback-button.js: {}
     overrides/js/device.js: {}
+    overrides/js/google-translate-modal.js: {}
     overrides/js/table.js: {}
 
   dependencies:
     - mayflower/layout_paragraphs
     - core/drupal
+    - core/drupalSettings
+    - core/once
 
 views-view--image-promos:
   css:

docroot/themes/custom/mass_theme/overrides/js/google-translate-modal.js

@@ -0,0 +1,49 @@
+(function (Drupal, once, drupalSettings) {
+  'use strict';
+
+  function applyTranslations(wrapper, translations, selectedLanguage) {
+    var fallback = translations.en || {};
+    var language = translations[selectedLanguage] || fallback;
+    var disclaimer = wrapper.querySelector('#ma__translate-help p');
+    var translateAction = wrapper.querySelector('#ma__translate-apply');
+    var showOriginalAction = wrapper.querySelector('#ma__translate-reset');
+
+    if (disclaimer && language.disclaimer) {
+      disclaimer.textContent = language.disclaimer;
+      disclaimer.lang = selectedLanguage;
+    }
+
+    if (translateAction && language.translate_action) {
+      translateAction.textContent = language.translate_action;
+      translateAction.lang = selectedLanguage;
+    }
+
+    if (showOriginalAction && language.show_original_action) {
+      showOriginalAction.textContent = language.show_original_action;
+      showOriginalAction.lang = selectedLanguage;
+    }
+  }
+
+  Drupal.behaviors.massThemeGoogleTranslateModal = {
+    attach: function (context) {
+      var translations = drupalSettings.massTheme && drupalSettings.massTheme.googleTranslateLanguages;
+      if (!translations) {
+        return;
+      }
+
+      once('massThemeGoogleTranslateModal', '[data-utility-nav-modal="translate"]', context).forEach(function (wrapper) {
+        var select = wrapper.querySelector('.ma__translate-select');
+
+        if (!select) {
+          return;
+        }
+
+        applyTranslations(wrapper, translations, select.value);
+
+        select.addEventListener('change', function (event) {
+          applyTranslations(wrapper, translations, event.target.value);
+        });
+      });
+    }
+  };
+})(Drupal, once, drupalSettings);

docroot/themes/custom/mass_theme/templates/navigation/menu--utility.html.twig

@@ -19,18 +19,27 @@
  */
 #}
 {# This will need to come from theme settings. #}
+{%
+set languageList = availableLanguages|sort
+%}
+
 {%
 set googleLanguages = languages
 %}
 
 {%
 set utilityNav = {
-  dropdown: {
-    labelText: 'Language:',
-    id: 'lang-select',
-    name: 'lang-select',
-  },
   items: items,
 }
 %}
+
+{%
+set modal = {
+  icon: 'translate',
+  status: 'info',
+  title: 'Select language'|t,
+  buttonText: 'Language'|t,
+}
+%}
+
 {{ include('@organisms/by-template/utility-nav.twig') }}