DP-44594 SPIKE-assess-work-to-reskin-Google-Translate-widget-in-accessible-way

changelogs/DP-44594.yml

@@ -0,0 +1,3 @@
+Fixed:
+  - description: SPIKE assess work to reskin Google Translate widget in accessible way.
+    issue: DP-44594

composer.json

@@ -278,7 +278,7 @@
         "geocoder-php/open-cage-provider": "^4.6",
         "google/cloud-bigquery": "^1.25",
         "league/commonmark": "^2.7",
-        "massgov/mayflower-artifacts": "dev-develop",
+        "massgov/mayflower-artifacts": "dev-feature/DP-44594-SPIKE-assess-work-to-reskin-Google-Translate-widget-in-accessible-way",
         "monolog/monolog": "^3",
         "npm-asset/ace-builds": "~1.0",
         "npm-asset/select2": "^4.1.0-rc.0",

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

@@ -24,6 +24,7 @@ global-styling:
       overrides/css/sections.css: {}
       overrides/css/news-page.css: {}
       overrides/css/language-bar.css: {}
+      overrides/css/google-translate.css: {}
       overrides/css/view-location-listing.css: {}
       overrides/css/rich-text.css: {}
       overrides/css/info-details.css: {}
@@ -63,6 +64,7 @@ global-styling-lp:
       overrides/css/sections.css: {}
       overrides/css/news-page.css: {}
       overrides/css/language-bar.css: {}
+      overrides/css/google-translate.css: {}
       overrides/css/view-location-listing.css: {}
       overrides/css/rich-text.css: {}
       overrides/css/info-details.css: {}

docroot/themes/custom/mass_theme/mass_theme.theme

@@ -8,6 +8,7 @@
 use Drupal\block\Entity\Block;
 use Drupal\Component\Utility\Html;
 use Drupal\Component\Utility\UrlHelper;
+use Drupal\Component\Utility\Xss as XssAlias;
 use Drupal\Core\Cache\Cache;
 use Drupal\Core\Cache\CacheableMetadata;
 use Drupal\Core\Entity\ContentEntityInterface;
@@ -16,6 +17,7 @@ use Drupal\Core\Link;
 use Drupal\Core\Menu\MenuTreeParameters;
 use Drupal\Core\Site\Settings;
 use Drupal\Core\StringTranslation\ByteSizeMarkup;
+use Drupal\Core\StringTranslation\TranslatableMarkup;
 use Drupal\Core\Url;
 use Drupal\file\Entity\File;
 use Drupal\image\Entity\ImageStyle;
@@ -4549,6 +4551,12 @@ function mass_theme_preprocess_html(&$variables) {
     $variables['languages'] = implode(',', array_filter(theme_get_setting('languages', 'mass_theme')));
   }
 
+  if ($select_language_translations = theme_get_setting('select_language_translations', 'mass_theme')) {
+    $variables['select_language_translations'] = array_map(function($language_pair) {
+      return explode('|', $language_pair);
+    }, explode(PHP_EOL, $select_language_translations));
+  }
+
   // Add glossary functionality if the page references glossaries.
   $params = \Drupal::routeMatch()->getParameters();
   if ($params->has('node')) {
@@ -6731,6 +6739,25 @@ function mass_theme_form_system_theme_settings_alter(&$form, $form_state) {
     '#title' => t('Choose google translate languages?'),
     '#default_value' => theme_get_setting('languages', 'mass_theme'),
   ];
+
+  $codes = array_map(function($language, $code) {
+    return "<li>$language: <pre><code>$code</code></pre></li>";
+  }, $languages, array_keys($languages));
+  $codes_html = '<ul>' . implode('', $codes) . '</ul>';
+
+  $form['mass_theme_settings']['select_language_translations'] = [
+    '#type' => 'textarea',
+    '#title' => t('"Select language" in native languages'),
+    '#default_value' => theme_get_setting('select_language_translations', 'mass_theme'),
+    '#description' => t('Insert pairs in format "code|translation_in_native_language". List of language codes:'),
+  ];
+  $form['mass_theme_settings']['info'] = [
+    '#type' => 'details',
+    '#title' => t('Codes'),
+    '#open' => FALSE,
+  ];
+
+  $form['mass_theme_settings']['info']['#markup'] = XssAlias::filter($codes_html, ['ul', 'li', 'pre', 'code']);
 }
 
 /**