Change the close button to have the assistive text in the same language as the toast based on accessibility specialist feedback

Author: teroelonen

hdbt.theme

@@ -708,14 +708,17 @@ function hdbt_preprocess_links__language_block(&$variables): void {
     'en' => [
       'toast_text' => "This page is not available in English. Go to the homepage to access the website's English-language content.",
       'toast_link_title' => 'Return to the front page',
+      'toast_close_button' => 'Close the popup',
     ],
     'fi' => [
       'toast_text' => 'Tätä sivua ei ole suomeksi. Löydät muuta suomenkielistä sisältöä etusivun kautta.',
       'toast_link_title' => 'Siirry etusivulle',
+      'toast_close_button' => 'Sulje ponnahdusikkuna',
     ],
     'sv' => [
       'toast_text' => 'Denna sida finns inte på svenska. Gå till startsidan för att se annat material på svenska.',
       'toast_link_title' => 'Gå till startsidan',
+      'toast_close_button' => 'Stäng popup-fönstret',
     ],
   ];
 

templates/navigation/links--language-block.html.twig

@@ -62,10 +62,10 @@
                   {% set language_toast_close_labelled_by = "language-toast__close__aria-label--" ~ random() %}
                   <div class="language-toast__close-wrapper">
                     <a href="#" class="nav-toggle__anchor language-toast__close">
-                      <span class="is-hidden" lang="{{ language.id }}">{{ 'Close the popup'|t({}, {'context': 'Language toast'}) }}</span>
+                      <span class="is-hidden">{{ toast_languages[lang].toast_close_button }}</span>
                     </a>
-                    <button class="nav-toggle__button language-toast__close js-language-toast--{{ lang }}-button" aria-labelledby="{{ language_toast_close_labelled_by }}" aria-expanded="false" aria-controls="{{ dropdown_id }}" lang="{{ language.id }}">
-                      <span id="{{language_toast_close_labelled_by}}" class="is-hidden">{{ 'Close the popup'|t({}, {'context': 'Language toast'}) }}</span>
+                    <button class="nav-toggle__button language-toast__close js-language-toast--{{ lang }}-button" aria-labelledby="{{ language_toast_close_labelled_by }}" aria-expanded="false" aria-controls="{{ dropdown_id }}">
+                      <span id="{{language_toast_close_labelled_by}}" class="is-hidden">{{ toast_languages[lang].toast_close_button }}</span>
                     </button>
                   </div>
                   <div class="language-toast__content" lang="{{ lang }}">