From 6345e7d58531c0817f0a23cf9a72c0c017ac3316 Mon Sep 17 00:00:00 2001
From: Dmytro Storozhuk <dima@itech4web.com>
Date: Wed, 28 Jan 2026 18:40:55 -0600
Subject: [PATCH 1/6] DP-44594: Enhance Google Translate integration for
 improved accessibility and behavior

Implemented a fully accessible custom Google Translate interface with reset and apply functionality, improved cookie management, and robust language attribute handling. Added support for `.google-translate.css`.

Signed-off-by: Dmytro Storozhuk <dima@itech4web.com>
---
 .../mass_theme/mass_theme.libraries.yml       |   2 +
 .../templates/layout/html.html.twig           | 377 +++++++++++++++++-
 2 files changed, 368 insertions(+), 11 deletions(-)

diff --git a/docroot/themes/custom/mass_theme/mass_theme.libraries.yml b/docroot/themes/custom/mass_theme/mass_theme.libraries.yml
index 48af911ed9..a7d928d439 100644
--- a/docroot/themes/custom/mass_theme/mass_theme.libraries.yml
+++ b/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: {}
diff --git a/docroot/themes/custom/mass_theme/templates/layout/html.html.twig b/docroot/themes/custom/mass_theme/templates/layout/html.html.twig
index 757ca996db..4d3ec0dcdf 100644
--- a/docroot/themes/custom/mass_theme/templates/layout/html.html.twig
+++ b/docroot/themes/custom/mass_theme/templates/layout/html.html.twig
@@ -136,18 +136,373 @@
     {% endif %}
 
     {# Google Translate JS #}
+{#      {{ dump(languages) }}#}
+
+    {# Google Translate Script #}
+    <script type="text/javascript">
+        // CRITICAL: Capture original HTML lang BEFORE Google Translate can change it
+        window.originalPageLang = document.documentElement.getAttribute('lang') || 'en';
+
+        // Prevent Google Translate from changing lang to "auto"
+        const originalSetAttribute = Element.prototype.setAttribute;
+        Element.prototype.setAttribute = function(name, value) {
+            if (this === document.documentElement && name === 'lang' && value === 'auto') {
+                // Block Google Translate from setting lang="auto"
+                return;
+            }
+            return originalSetAttribute.call(this, name, value);
+        };
+
+        function googleTranslateElementInit() {
+            new google.translate.TranslateElement({
+                pageLanguage: window.originalPageLang,
+                includedLanguages: '{{ languages }}',
+                layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
+                autoDisplay: false,
+                multilanguagePage: true
+            }, 'google_translate_element');
+        }
+    </script>
+    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+
+    {# Accessible Interface Script #}
     <script>
-      function googleTranslateElementInit() {
-        new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: '{{ languages }}', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
-        document.querySelector('#google_translate_element') !== null ? document.querySelector('#google_translate_element').classList.add('has-rendered') : '';
-      }
-      (function() {
-        var script = document.createElement('script');
-        script.src = "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
-        script.async = true;
-        element = document.getElementsByTagName('head')[0];
-        element.appendChild(script);
-      })();
+        (function() {
+            const languageSelect = document.getElementById('ads-translate-select');
+            const applyButton = document.getElementById('ads-translate-apply');
+            const resetButton = document.getElementById('ads-translate-reset');
+            const statusMessage = document.getElementById('ads-translate-status');
+
+            // Store the original page language in a cookie
+            const ORIGINAL_LANG_COOKIE = 'original_page_lang';
+
+            function getOriginalPageLanguage() {
+                // Check cookie first
+                const cookies = document.cookie.split(';');
+                for (let cookie of cookies) {
+                    const [name, value] = cookie.trim().split('=');
+                    if (name === ORIGINAL_LANG_COOKIE) {
+                        return value;
+                    }
+                }
+
+                // Use the captured original language from before Google Translate modified it
+                let originalLang = window.originalPageLang || 'en';
+
+                // Warn if HTML tag was missing lang attribute
+                if (!window.originalPageLang || window.originalPageLang.trim() === '') {
+                    console.log('Warning: HTML tag is missing lang attribute. Defaulting to "en" (English). Please add lang attribute to <html> tag for proper accessibility.');
+                    originalLang = 'en';
+                }
+
+                // Store it in a cookie for future reference (1 year)
+                const cookieDomain = getCookieDomain();
+                const maxAge = 60 * 60 * 24 * 365;
+
+                if (cookieDomain) {
+                    document.cookie = `${ORIGINAL_LANG_COOKIE}=${originalLang}; path=/; domain=${cookieDomain}; max-age=${maxAge}; SameSite=Lax`;
+                } else {
+                    document.cookie = `${ORIGINAL_LANG_COOKIE}=${originalLang}; path=/; max-age=${maxAge}; SameSite=Lax`;
+                }
+
+                return originalLang;
+            }
+
+            // Set the reset button's lang and notranslate attributes
+            const originalPageLang = getOriginalPageLanguage();
+            resetButton.setAttribute('lang', originalPageLang);
+            resetButton.classList.add('notranslate');
+
+            // Set reset button text
+            const originalLangOption = languageSelect.querySelector(`option[value="${originalPageLang}"]`);
+            const originalLangName = originalLangOption ? originalLangOption.text : 'English';
+            resetButton.textContent = originalLangName;
+
+            // Add lang attribute to notranslate elements
+            function addLangToNotranslateElements() {
+                const originalLang = getOriginalPageLanguage();
+
+                // Find all elements with class="notranslate"
+                const notranslateByClass = document.querySelectorAll('.notranslate');
+                notranslateByClass.forEach(element => {
+                    // Only add lang if it doesn't already exist
+                    if (!element.hasAttribute('lang')) {
+                        element.setAttribute('lang', originalLang);
+                    }
+                });
+
+                // Find all elements with translate="no"
+                const notranslateByAttribute = document.querySelectorAll('[translate="no"]');
+                notranslateByAttribute.forEach(element => {
+                    // Only add lang if it doesn't already exist
+                    if (!element.hasAttribute('lang')) {
+                        element.setAttribute('lang', originalLang);
+                    }
+                });
+            }
+
+            // Run on page load
+            addLangToNotranslateElements();
+
+            // Run after DOM changes (for dynamically added content)
+            const observer = new MutationObserver(() => {
+                addLangToNotranslateElements();
+            });
+
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true
+            });
+
+            // Get the root domain for cookies
+            function getCookieDomain() {
+                const hostname = window.location.hostname;
+
+                // If localhost or IP address, don't use domain attribute
+                if (hostname === 'localhost' || /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(hostname)) {
+                    return null;
+                }
+
+                const parts = hostname.split('.');
+
+                // If it's already a root domain (e.g., "example.com" has 2 parts)
+                if (parts.length <= 2) {
+                    return `.${hostname}`;
+                }
+
+                // Return root domain with leading dot (e.g., ".mass.gov" from "www.mass.gov")
+                return `.${parts.slice(-2).join('.')}`;
+            }
+
+            // Clear all Google Translate cookies completely
+            function clearAllGoogleTranslateCookies() {
+                const cookieDomain = getCookieDomain();
+                const hostname = window.location.hostname;
+
+                // Get all current googtrans cookies
+                const cookies = document.cookie.split(';');
+                const googtransCookies = cookies.filter(c => c.trim().startsWith('googtrans='));
+
+                // Clear each one we find
+                googtransCookies.forEach(() => {
+                    // Clear without domain
+                    document.cookie = `googtrans=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC;`;
+
+                    // Clear with current hostname
+                    document.cookie = `googtrans=; path=/; domain=${hostname}; expires=Thu, 01 Jan 1970 00:00:00 UTC;`;
+
+                    // Clear with root domain
+                    if (cookieDomain) {
+                        document.cookie = `googtrans=; path=/; domain=${cookieDomain}; expires=Thu, 01 Jan 1970 00:00:00 UTC;`;
+                    }
+                });
+            }
+
+            // Monitor and clean up duplicate cookies created by Google Translate
+            function monitorAndCleanCookies() {
+                const cookieDomain = getCookieDomain();
+                const hostname = window.location.hostname;
+
+                setInterval(() => {
+                    const cookies = document.cookie.split(';');
+                    let googtransCount = 0;
+                    let rootDomainCookieValue = null;
+
+                    // Count googtrans cookies and find the root domain one
+                    cookies.forEach(cookie => {
+                        const [name, value] = cookie.trim().split('=');
+                        if (name === 'googtrans' && value) {
+                            googtransCount++;
+                            // This is the one we want to keep
+                            if (googtransCount === 1) {
+                                rootDomainCookieValue = value;
+                            }
+                        }
+                    });
+
+                    // If we have more than one googtrans cookie, clean them up
+                    if (googtransCount > 1 && rootDomainCookieValue) {
+                        // Clear all cookies
+                        document.cookie = `googtrans=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC;`;
+                        document.cookie = `googtrans=; path=/; domain=${hostname}; expires=Thu, 01 Jan 1970 00:00:00 UTC;`;
+                        if (cookieDomain) {
+                            document.cookie = `googtrans=; path=/; domain=${cookieDomain}; expires=Thu, 01 Jan 1970 00:00:00 UTC;`;
+                        }
+
+                        // Re-set the single cookie we want
+                        setTimeout(() => {
+                            if (cookieDomain) {
+                                document.cookie = `googtrans=${rootDomainCookieValue}; path=/; domain=${cookieDomain}; max-age=${60 * 60 * 24 * 365}; SameSite=Lax`;
+                            } else {
+                                document.cookie = `googtrans=${rootDomainCookieValue}; path=/; max-age=${60 * 60 * 24 * 365}; SameSite=Lax`;
+                            }
+                        }, 50);
+                    }
+                }, 500); // Check every 500ms
+            }
+
+            // Start monitoring for duplicate cookies
+            monitorAndCleanCookies();
+
+            // Initialize current language from cookie or HTML lang attribute
+            function getCurrentLanguage() {
+                const cookies = document.cookie.split(';');
+                for (let cookie of cookies) {
+                    const [name, value] = cookie.trim().split('=');
+                    if (name === 'googtrans') {
+                        // Cookie format is /SOURCE/TARGET (e.g., /en/es or /de/fr)
+                        const match = value.match(/\/[^\/]+\/(.+)/);
+                        if (match && match[1]) {
+                            return match[1];
+                        }
+                    }
+                }
+
+                // If no translation cookie, return the original page language
+                return originalPageLang;
+            }
+
+            // Set the select to show current language on page load (only once)
+            let currentLanguageCode = getCurrentLanguage();
+            let hasInitialized = false;
+
+            function initializeLanguageSelect() {
+                if (!hasInitialized) {
+                    // Verify the language code exists in our dropdown
+                    const optionExists = Array.from(languageSelect.options).some(opt => opt.value === currentLanguageCode);
+
+                    if (!optionExists) {
+                        console.warn(`Language code "${currentLanguageCode}" not found in dropdown. Defaulting to original page language.`);
+                        currentLanguageCode = getOriginalPageLanguage();
+                    }
+
+                    // Set the select value to current language
+                    languageSelect.value = currentLanguageCode;
+
+                    // Also set the "selected" attribute on the option for semantic correctness
+                    const options = languageSelect.options;
+                    for (let i = 0; i < options.length; i++) {
+                        if (options[i].value === currentLanguageCode) {
+                            options[i].setAttribute('selected', 'selected');
+                        } else {
+                            options[i].removeAttribute('selected');
+                        }
+                    }
+
+                    // Restore the correct lang attribute (Google Translate may have changed it to "auto")
+                    document.documentElement.lang = currentLanguageCode;
+                    hasInitialized = true;
+                }
+            }
+
+            // Initialize immediately
+            initializeLanguageSelect();
+
+            // Force correct lang attribute after a short delay (in case Google Translate interferes)
+            setTimeout(() => {
+                if (document.documentElement.lang === 'auto') {
+                    document.documentElement.lang = currentLanguageCode;
+                    console.log(`Corrected lang attribute from "auto" to "${currentLanguageCode}"`);
+                }
+            }, 100);
+
+            // Also initialize after DOM is fully ready
+            if (document.readyState === 'loading') {
+                document.addEventListener('DOMContentLoaded', initializeLanguageSelect);
+            }
+
+            // Apply button click handler
+            applyButton.addEventListener('click', function() {
+                const selectedLanguage = languageSelect.value;
+                const selectedText = languageSelect.options[languageSelect.selectedIndex].text;
+
+                // Check if already on this language
+                if (selectedLanguage === currentLanguageCode) {
+                    statusMessage.textContent = `Already displaying in ${selectedText}`;
+                    return;
+                }
+
+                currentLanguageCode = selectedLanguage;
+
+                // Special handling: if selecting the original page language, treat it as a reset
+                if (selectedLanguage === originalPageLang) {
+                    resetToOriginalLanguage();
+                } else {
+                    triggerGoogleTranslate(selectedLanguage, selectedText);
+                }
+            });
+
+            // Reset button click handler
+            resetButton.addEventListener('click', function() {
+                resetToOriginalLanguage();
+            });
+
+            // Reset to original language function
+            function resetToOriginalLanguage() {
+                // Update HTML lang attribute IMMEDIATELY
+                document.documentElement.lang = originalPageLang;
+
+                // Announce to screen reader immediately
+                const originalLangName = languageSelect.querySelector(`option[value="${originalPageLang}"]`)?.text || originalPageLang;
+                statusMessage.textContent = `Resetting to original language: ${originalLangName}`;
+
+                // Disable buttons during reset
+                applyButton.disabled = true;
+                resetButton.disabled = true;
+                resetButton.textContent = 'Resetting...';
+
+                // Clear ALL Google Translate cookies
+                clearAllGoogleTranslateCookies();
+
+                // Wait for cookies to clear, then reload
+                setTimeout(() => {
+                    window.location.reload();
+                }, 250);
+            }
+
+            // Allow Enter key on select to trigger apply
+            languageSelect.addEventListener('keydown', function(e) {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    applyButton.click();
+                }
+            });
+
+            // Trigger Google Translate programmatically
+            function triggerGoogleTranslate(langCode, langName) {
+                // Update HTML lang attribute IMMEDIATELY for screen readers
+                document.documentElement.lang = langCode;
+
+                // Announce to screen reader immediately
+                statusMessage.textContent = `Changing page language to ${langName}`;
+
+                // Disable button during translation
+                applyButton.disabled = true;
+                applyButton.textContent = 'Translating...';
+
+                // Set translation cookie with proper source language
+                const cookieDomain = getCookieDomain();
+                const cookieValue = `/${originalPageLang}/${langCode}`;
+                const maxAge = 60 * 60 * 24 * 365; // 1 year in seconds
+
+                // Clear old cookies first
+                clearAllGoogleTranslateCookies();
+
+                // Wait for cookies to clear, then set new cookie
+                setTimeout(() => {
+                    if (cookieDomain) {
+                        document.cookie = `googtrans=${cookieValue}; path=/; domain=${cookieDomain}; max-age=${maxAge}; SameSite=Lax`;
+                    } else {
+                        document.cookie = `googtrans=${cookieValue}; path=/; max-age=${maxAge}; SameSite=Lax`;
+                    }
+
+                    // Wait for cookie to be set, then reload
+                    setTimeout(() => {
+                        window.location.reload();
+                    }, 100);
+                }, 150);
+            }
+        })();
     </script>
 
     <js-bottom-placeholder token="{{ placeholder_token|raw }}">

From 2825226ff8e8d0539648061ffc5b2b47a4f2240c Mon Sep 17 00:00:00 2001
From: Dmytro Storozhuk <dima@itech4web.com>
Date: Wed, 28 Jan 2026 20:06:32 -0600
Subject: [PATCH 2/6] DP-44594: Add accessible reskin styles and browser
 language detection to Google Translate widget (work on mobile, bad on
 desctop).

Integrated `google-translate.css` for accessible styling and compact utility navigation design. Added browser language detection to dynamically update the "Select language" label.

Signed-off-by: Dmytro Storozhuk <dima@itech4web.com>
---
 .../overrides/css/google-translate.css        | 331 ++++++++++++++++++
 .../templates/layout/html.html.twig           |  66 ++++
 2 files changed, 397 insertions(+)
 create mode 100644 docroot/themes/custom/mass_theme/overrides/css/google-translate.css

diff --git a/docroot/themes/custom/mass_theme/overrides/css/google-translate.css b/docroot/themes/custom/mass_theme/overrides/css/google-translate.css
new file mode 100644
index 0000000000..0a7acceea1
--- /dev/null
+++ b/docroot/themes/custom/mass_theme/overrides/css/google-translate.css
@@ -0,0 +1,331 @@
+/* Accessible Google Translate Widget Styles - Compact for Utility Nav */
+
+/* Fix Google Translate spacing issue with notranslate elements */
+.notranslate {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+html.translated-ltr .notranslate,
+html.translated-rtl .notranslate {
+    padding-left: 0.25em;
+    padding-right: 0.25em;
+}
+
+/* Hide default Google Translate widget */
+.ads-goog-te-wrapper {
+    position: absolute;
+    left: -9999px;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+}
+
+/* Hide Google Translate top banner */
+.goog-te-banner-frame.skiptranslate {
+    display: none !important;
+}
+
+.skiptranslate iframe {
+    display: none !important;
+}
+
+body > .skiptranslate {
+    display: none !important;
+}
+
+.goog-te-menu-frame {
+    display: none !important;
+}
+
+body {
+    top: 0 !important;
+}
+
+/* Compact styling for utility nav integration */
+.ma__utility-nav__translate .ads-translate-container {
+    display: inline-block;
+    margin: 0;
+}
+
+/* Hide fieldset border and make it inline */
+.ma__utility-nav__translate .ads-translate-fieldset {
+    border: none;
+    padding: 0;
+    margin: 0;
+    display: inline-block;
+}
+
+/* Hide the legend visually but keep for screen readers */
+.ma__utility-nav__translate .ads-translate-legend {
+    position: absolute;
+    left: -9999px;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+}
+
+/* Make the label visible and inline */
+.ma__utility-nav__translate .ads-translate-label {
+    display: inline-block !important;
+    color: #fff !important;
+    font-size: 14px !important;
+    font-weight: 400 !important;
+    margin: 0 8px 0 0 !important;
+    vertical-align: middle !important;
+    position: static !important;
+    width: auto !important;
+    height: auto !important;
+    overflow: visible !important;
+    left: auto !important;
+}
+
+/* Make select wrapper inline */
+.ma__utility-nav__translate .ads-translate-select-wrapper {
+    display: inline-block;
+    position: relative;
+    margin: 0;
+}
+
+/* Style the select to fit in utility nav */
+.ma__utility-nav__translate .ads-translate-select {
+    padding: 4px 8px;
+    font-size: 14px;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 2px;
+    background-color: transparent;
+    color: #fff;
+    cursor: pointer;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    min-width: 120px;
+}
+
+.ma__utility-nav__translate .ads-translate-select:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.5);
+}
+
+.ma__utility-nav__translate .ads-translate-select:focus {
+    outline: 2px solid #fff;
+    outline-offset: 2px;
+}
+
+/* Hide the dropdown icon from example */
+.ma__utility-nav__translate .ads-translate-icon {
+    display: none;
+}
+
+/* Hide help text visually but keep for screen readers */
+.ma__utility-nav__translate .ads-translate-help,
+.ads-sr-only {
+    position: absolute;
+    left: -9999px;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+}
+
+/* Style Apply and English (Reset) buttons to fit inline in utility nav */
+.ma__utility-nav__translate .ads-translate-button {
+    display: inline-block;
+    padding: 4px 12px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #fff;
+    background-color: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 2px;
+    cursor: pointer;
+    margin-left: 8px;
+    margin-right: 0;
+    vertical-align: middle;
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.ma__utility-nav__translate .ads-translate-button:hover {
+    background-color: rgba(255, 255, 255, 0.3);
+    border-color: rgba(255, 255, 255, 0.5);
+}
+
+.ma__utility-nav__translate .ads-translate-button:focus {
+    outline: 2px solid #fff;
+    outline-offset: 2px;
+}
+
+.ma__utility-nav__translate .ads-translate-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* English (Reset) button - slightly different styling */
+.ma__utility-nav__translate .ads-translate-reset-button {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.25);
+}
+
+.ma__utility-nav__translate .ads-translate-reset-button:hover {
+    background-color: rgba(255, 255, 255, 0.25);
+    border-color: rgba(255, 255, 255, 0.4);
+}
+
+/* Screen reader status messages */
+.ads-status-message {
+    position: absolute;
+    left: -9999px;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+}
+
+
+
+/* Responsive styles for mobile/tablet */
+@media (max-width: 768px) {
+
+  /* Hamburger menu specific styles */
+  .ma__header__hamburger__utility-nav .ma__utility-nav__translate .ads-translate-container {
+    display: block;
+    width: 100%;
+  }
+
+  .ma__header__hamburger__utility-nav .ma__utility-nav__translate .ads-translate-fieldset {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+    padding: 16px 20px;
+    border: none;
+    background-color: transparent;
+  }
+
+  .ma__header__hamburger__utility-nav .ma__utility-nav__translate .ads-translate-label {
+    display: block !important;
+    color: #141414 !important;
+    font-size: 16px !important;
+    font-weight: 500 !important;
+    margin: 0 0 12px 0 !important;
+    position: static !important;
+    width: 100% !important;
+    height: auto !important;
+    overflow: visible !important;
+    left: auto !important;
+  }
+
+  .ma__header__hamburger__utility-nav .ma__utility-nav__translate .ads-translate-select-wrapper {
+    display: block;
+    width: 100%;
+    margin-bottom: 12px;
+  }
+
+  .ma__header__hamburger__utility-nav .ma__utility-nav__translate .ads-translate-select {
+    width: 100%;
+    padding: 8px 12px;
+    font-size: 16px;
+    border: 2px solid #707070;
+    border-radius: 0;
+    background-color: #fff;
+    color: #141414;
+    cursor: pointer;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    min-width: auto;
+  }
+
+  .ma__header__hamburger__utility-nav .ma__utility-nav__translate .ads-translate-select:hover {
+    background-color: #f2f2f2;
+    border-color: #535353;
+  }
+
+  .ma__header__hamburger__utility-nav .ma__utility-nav__translate .ads-translate-select:focus {
+    outline: 2px solid #3e94cf;
+    outline-offset: 2px;
+    border-color: #707070;
+  }
+
+  .ma__header__hamburger__utility-nav .ma__utility-nav__translate .ads-translate-button {
+    display: block;
+    width: 100%;
+    padding: 10px 16px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #fff;
+    background-color: #14558f;
+    border: none;
+    border-radius: 0;
+    cursor: pointer;
+    margin: 0 0 12px 0;
+    text-align: center;
+    transition: background-color 0.2s ease;
+  }
+
+  .ma__header__hamburger__utility-nav .ma__utility-nav__translate .ads-translate-button:hover {
+    background-color: #104472;
+  }
+
+  .ma__header__hamburger__utility-nav .ma__utility-nav__translate .ads-translate-button:focus {
+    outline: 2px solid #3e94cf;
+    outline-offset: 2px;
+  }
+
+  .ma__header__hamburger__utility-nav .ma__utility-nav__translate .ads-translate-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .ma__header__hamburger__utility-nav .ma__utility-nav__translate .ads-translate-reset-button {
+    background-color: #fff;
+    color: #141414;
+    border: 2px solid #707070;
+    margin-bottom: 0;
+  }
+
+  .ma__header__hamburger__utility-nav .ma__utility-nav__translate .ads-translate-reset-button:hover {
+    background-color: #f2f2f2;
+    border-color: #535353;
+  }
+
+  /* Stack elements vertically on mobile */
+  .ma__utility-nav .ma__utility-nav__items .ma__utility-nav__item .ma__utility-nav__translate .ads-translate-fieldset {
+      display: flex !important;
+      flex-direction: column !important;
+      align-items: flex-start !important;
+      width: 100% !important;
+      padding: 12px !important;
+      border: none !important;
+  }
+
+  .ma__utility-nav .ma__utility-nav__items .ma__utility-nav__item .ma__utility-nav__translate .ads-translate-label {
+      display: block !important;
+      margin-bottom: 8px !important;
+      margin-right: 0 !important;
+      font-size: 14px !important;
+      width: 100% !important;
+  }
+
+  .ma__utility-nav .ma__utility-nav__items .ma__utility-nav__item .ma__utility-nav__translate .ads-translate-select-wrapper {
+      display: block !important;
+      width: 100% !important;
+      margin-bottom: 8px !important;
+  }
+
+  .ma__utility-nav .ma__utility-nav__items .ma__utility-nav__item .ma__utility-nav__translate .ads-translate-select {
+      width: 100% !important;
+      min-width: auto !important;
+  }
+
+  .ma__utility-nav .ma__utility-nav__items .ma__utility-nav__item .ma__utility-nav__translate .ads-translate-button {
+      display: block !important;
+      width: 100% !important;
+      margin-left: 0 !important;
+      margin-right: 0 !important;
+      margin-bottom: 8px !important;
+      text-align: center !important;
+  }
+
+  .ma__utility-nav .ma__utility-nav__items .ma__utility-nav__item .ma__utility-nav__translate .ads-translate-reset-button {
+      margin-bottom: 0 !important;
+  }
+}
diff --git a/docroot/themes/custom/mass_theme/templates/layout/html.html.twig b/docroot/themes/custom/mass_theme/templates/layout/html.html.twig
index 4d3ec0dcdf..00cc358d45 100644
--- a/docroot/themes/custom/mass_theme/templates/layout/html.html.twig
+++ b/docroot/themes/custom/mass_theme/templates/layout/html.html.twig
@@ -172,6 +172,72 @@
             const applyButton = document.getElementById('ads-translate-apply');
             const resetButton = document.getElementById('ads-translate-reset');
             const statusMessage = document.getElementById('ads-translate-status');
+            const selectLanguageLabel = document.getElementById('ads-translate-label');
+
+            // Translations for "Select language" in different languages
+            const selectLanguageTranslations = {
+                'en': 'Select language',
+                'af': 'Kies taal',
+                'sq': 'Zgjidhni gjuhën',
+                'am': 'ቋንቋ ይምረጡ',
+                'ar': 'اختر اللغة',
+                'hy': 'Ընտրեք լեզուն',
+                'zh-CN': '选择语言',
+                'zh-TW': '選擇語言',
+                'tl': 'Pumili ng wika',
+                'fr': 'Sélectionner la langue',
+                'de': 'Sprache wählen',
+                'el': 'Επιλέξτε γλώσσα',
+                'gu': 'ભાષા પસંદ કરો',
+                'ht': 'Chwazi lang',
+                'iw': 'בחר שפה',
+                'he': 'בחר שפה',
+                'hi': 'भाषा चुनें',
+                'hmn': 'Xaiv lus',
+                'it': 'Seleziona la lingua',
+                'ja': '言語を選択',
+                'km': 'ជ្រើសរើសភាសា',
+                'rw': 'Hitamo ururimi',
+                'ko': '언어 선택',
+                'lo': 'ເລືອກພາສາ',
+                'ml': 'ഭാഷ തിരഞ്ഞെടുക്കുക',
+                'my': 'ဘာသာစကားကို ရွေးချယ်ပါ',
+                'ne': 'भाषा चयन गर्नुहोस्',
+                'ps': 'ژبه غوره کړئ',
+                'fa': 'زبان را انتخاب کنید',
+                'pl': 'Wybierz język',
+                'pt': 'Selecionar idioma',
+                'ro': 'Selectați limba',
+                'ru': 'Выберите язык',
+                'so': 'Dooro luqadda',
+                'es': 'Seleccionar idioma',
+                'sw': 'Chagua lugha',
+                'ta': 'மொழியைத் தேர்ந்தெடுக்கவும்',
+                'te': 'భాషను ఎంచుకోండి',
+                'th': 'เลือกภาษา',
+                'ti': 'ቋንቋ ምረጽ',
+                'tr': 'Dil seçin',
+                'uk': 'Виберіть мову',
+                'ur': 'زبان منتخب کریں',
+                'vi': 'Chọn ngôn ngữ'
+            };
+
+            // Detect browser language and update label
+            function updateSelectLanguageLabel() {
+                const browserLang = navigator.language || navigator.userLanguage;
+                const langCode = browserLang.split('-')[0]; // Get just the language code (e.g., 'en' from 'en-US')
+
+                // Update label text if we have a translation for this language
+                if (selectLanguageLabel && selectLanguageTranslations[langCode]) {
+                    selectLanguageLabel.textContent = selectLanguageTranslations[langCode];
+                } else if (selectLanguageLabel && selectLanguageTranslations[browserLang]) {
+                    // Try full locale code (e.g., 'zh-CN')
+                    selectLanguageLabel.textContent = selectLanguageTranslations[browserLang];
+                }
+            }
+
+            // Update label on page load
+            updateSelectLanguageLabel();
 
             // Store the original page language in a cookie
             const ORIGINAL_LANG_COOKIE = 'original_page_lang';

From 273842e4d382b7e305c23d9e50845caa3ad5b1ae Mon Sep 17 00:00:00 2001
From: Dmytro Storozhuk <dima@itech4web.com>
Date: Wed, 28 Jan 2026 21:13:01 -0600
Subject: [PATCH 3/6] DP-44594: Add Google Translate settings for native
 language translations and sanitize language codes display

Integrated a new textarea setting for specifying native language translations in "Select language." Sanitized language codes display using `XssAlias::filter` to improve security. Removed redundant language entry from Twig.

Signed-off-by: Dmytro Storozhuk <dima@itech4web.com>
---
 .../themes/custom/mass_theme/mass_theme.theme | 21 +++++++++++++++++++
 .../templates/layout/html.html.twig           |  4 ----
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/docroot/themes/custom/mass_theme/mass_theme.theme b/docroot/themes/custom/mass_theme/mass_theme.theme
index 53f6de7154..f62453a38b 100644
--- a/docroot/themes/custom/mass_theme/mass_theme.theme
+++ b/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;
@@ -6731,6 +6733,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']);
 }
 
 /**
diff --git a/docroot/themes/custom/mass_theme/templates/layout/html.html.twig b/docroot/themes/custom/mass_theme/templates/layout/html.html.twig
index 00cc358d45..b403f04e8e 100644
--- a/docroot/themes/custom/mass_theme/templates/layout/html.html.twig
+++ b/docroot/themes/custom/mass_theme/templates/layout/html.html.twig
@@ -135,9 +135,6 @@
       <template id="glossary-popup-template">{% include '@molecules/popover.twig' with popoverContext %}</template>
     {% endif %}
 
-    {# Google Translate JS #}
-{#      {{ dump(languages) }}#}
-
     {# Google Translate Script #}
     <script type="text/javascript">
         // CRITICAL: Capture original HTML lang BEFORE Google Translate can change it
@@ -191,7 +188,6 @@
                 'gu': 'ભાષા પસંદ કરો',
                 'ht': 'Chwazi lang',
                 'iw': 'בחר שפה',
-                'he': 'בחר שפה',
                 'hi': 'भाषा चुनें',
                 'hmn': 'Xaiv lus',
                 'it': 'Seleziona la lingua',

From bbed3e1814fba24fc0933406b19e5c47cdafc864 Mon Sep 17 00:00:00 2001
From: Dmytro Storozhuk <dima@itech4web.com>
Date: Wed, 28 Jan 2026 21:43:54 -0600
Subject: [PATCH 4/6] DP-44594: Dynamically load Google Translate "Select
 language" translations from theme settings

Refactored the widget to fetch and process translations directly from theme settings, replacing the hardcoded list. Improved label updates based on browser language.

Signed-off-by: Dmytro Storozhuk <dima@itech4web.com>
---
 .../themes/custom/mass_theme/mass_theme.theme |  6 ++
 .../templates/layout/html.html.twig           | 62 +++++--------------
 2 files changed, 23 insertions(+), 45 deletions(-)

diff --git a/docroot/themes/custom/mass_theme/mass_theme.theme b/docroot/themes/custom/mass_theme/mass_theme.theme
index f62453a38b..ee69980009 100644
--- a/docroot/themes/custom/mass_theme/mass_theme.theme
+++ b/docroot/themes/custom/mass_theme/mass_theme.theme
@@ -4551,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')) {
diff --git a/docroot/themes/custom/mass_theme/templates/layout/html.html.twig b/docroot/themes/custom/mass_theme/templates/layout/html.html.twig
index b403f04e8e..35212c83fa 100644
--- a/docroot/themes/custom/mass_theme/templates/layout/html.html.twig
+++ b/docroot/themes/custom/mass_theme/templates/layout/html.html.twig
@@ -172,51 +172,23 @@
             const selectLanguageLabel = document.getElementById('ads-translate-label');
 
             // Translations for "Select language" in different languages
-            const selectLanguageTranslations = {
-                'en': 'Select language',
-                'af': 'Kies taal',
-                'sq': 'Zgjidhni gjuhën',
-                'am': 'ቋንቋ ይምረጡ',
-                'ar': 'اختر اللغة',
-                'hy': 'Ընտրեք լեզուն',
-                'zh-CN': '选择语言',
-                'zh-TW': '選擇語言',
-                'tl': 'Pumili ng wika',
-                'fr': 'Sélectionner la langue',
-                'de': 'Sprache wählen',
-                'el': 'Επιλέξτε γλώσσα',
-                'gu': 'ભાષા પસંદ કરો',
-                'ht': 'Chwazi lang',
-                'iw': 'בחר שפה',
-                'hi': 'भाषा चुनें',
-                'hmn': 'Xaiv lus',
-                'it': 'Seleziona la lingua',
-                'ja': '言語を選択',
-                'km': 'ជ្រើសរើសភាសា',
-                'rw': 'Hitamo ururimi',
-                'ko': '언어 선택',
-                'lo': 'ເລືອກພາສາ',
-                'ml': 'ഭാഷ തിരഞ്ഞെടുക്കുക',
-                'my': 'ဘာသာစကားကို ရွေးချယ်ပါ',
-                'ne': 'भाषा चयन गर्नुहोस्',
-                'ps': 'ژبه غوره کړئ',
-                'fa': 'زبان را انتخاب کنید',
-                'pl': 'Wybierz język',
-                'pt': 'Selecionar idioma',
-                'ro': 'Selectați limba',
-                'ru': 'Выберите язык',
-                'so': 'Dooro luqadda',
-                'es': 'Seleccionar idioma',
-                'sw': 'Chagua lugha',
-                'ta': 'மொழியைத் தேர்ந்தெடுக்கவும்',
-                'te': 'భాషను ఎంచుకోండి',
-                'th': 'เลือกภาษา',
-                'ti': 'ቋንቋ ምረጽ',
-                'tr': 'Dil seçin',
-                'uk': 'Виберіть мову',
-                'ur': 'زبان منتخب کریں',
-                'vi': 'Chọn ngôn ngữ'
-            };
+            // Convert array of [code, translation] pairs to object
+            const selectLanguageTranslationsArray = {{ select_language_translations|default([])|json_encode|raw }};
+            const selectLanguageTranslations = {};
+
+            // Default English translation
+            selectLanguageTranslations['en'] = 'Select language';
+
+            // Build translations object from theme settings
+            selectLanguageTranslationsArray.forEach(function(pair) {
+                if (pair && pair.length >= 2) {
+                    const code = pair[0].trim();
+                    const translation = pair[1].trim();
+                    if (code && translation) {
+                        selectLanguageTranslations[code] = translation;
+                    }
+                }
+            });
 
             // Detect browser language and update label
             function updateSelectLanguageLabel() {

From b2fe03b8185f2ae50075e99456f0ce856185eb6c Mon Sep 17 00:00:00 2001
From: Dmytro Storozhuk <dima@itech4web.com>
Date: Wed, 28 Jan 2026 21:44:59 -0600
Subject: [PATCH 5/6] DP-44594: Add changelog entry for SPIKE to assess
 reskinning Google Translate widget for accessibility

Signed-off-by: Dmytro Storozhuk <dima@itech4web.com>
---
 changelogs/DP-44594.yml | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 changelogs/DP-44594.yml

diff --git a/changelogs/DP-44594.yml b/changelogs/DP-44594.yml
new file mode 100644
index 0000000000..0c81a17999
--- /dev/null
+++ b/changelogs/DP-44594.yml
@@ -0,0 +1,3 @@
+Fixed:
+  - description: SPIKE assess work to reskin Google Translate widget in accessible way.
+    issue: DP-44594

From 5a3737370a16fe36f763759bd57c1a9710803c08 Mon Sep 17 00:00:00 2001
From: Dmytro Storozhuk <dima@itech4web.com>
Date: Wed, 28 Jan 2026 21:48:11 -0600
Subject: [PATCH 6/6] DP-44594: Update `massgov/mayflower-artifacts` dependency
 to feature branch in composer files

Signed-off-by: Dmytro Storozhuk <dima@itech4web.com>
---
 composer.json |  2 +-
 composer.lock | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/composer.json b/composer.json
index ff645c5592..e8f4744eec 100644
--- a/composer.json
+++ b/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",
diff --git a/composer.lock b/composer.lock
index d115e8e143..92e46b1bb0 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "7b9eaac987df7c8956b05827d445e02c",
+    "content-hash": "e7887f1f0f2b4701c636b4d4e4b5ca73",
     "packages": [
         {
             "name": "akamai-open/edgegrid-auth",
@@ -13614,16 +13614,16 @@
         },
         {
             "name": "massgov/mayflower-artifacts",
-            "version": "dev-develop",
+            "version": "dev-feature/DP-44594-SPIKE-assess-work-to-reskin-Google-Translate-widget-in-accessible-way",
             "source": {
                 "type": "git",
                 "url": "https://github.com/massgov/mayflower-artifacts",
-                "reference": "22291658613238853716a31ccd0560b388ee02cf"
+                "reference": "c631d55c89d0815c28f2fd8c517f9cd6d40a67ab"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/massgov/mayflower-artifacts/zipball/22291658613238853716a31ccd0560b388ee02cf",
-                "reference": "22291658613238853716a31ccd0560b388ee02cf",
+                "url": "https://api.github.com/repos/massgov/mayflower-artifacts/zipball/c631d55c89d0815c28f2fd8c517f9cd6d40a67ab",
+                "reference": "c631d55c89d0815c28f2fd8c517f9cd6d40a67ab",
                 "shasum": ""
             },
             "require": {
@@ -13641,7 +13641,7 @@
                 }
             ],
             "description": "This repository is the product of the built artifact from massgov/mayflower",
-            "time": "2026-01-26T06:33:52+00:00"
+            "time": "2026-01-29T03:42:35+00:00"
         },
         {
             "name": "masterminds/html5",
@@ -26622,5 +26622,5 @@
     "platform-overrides": {
         "php": "8.3"
     },
-    "plugin-api-version": "2.6.0"
+    "plugin-api-version": "2.9.0"
 }