TMS-1015: Header accessibility fixes

devgeniem · Feb 28, 2024 · 1416cba · 1416cba
1 parent 517a71b
commit 1416cba
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 16 deletions.
diff --git a/CHANGELOG.MD b/CHANGELOG.MD
@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+- TMS-1015: Header accessibility fixes
+
 ## [1.18.4] - 2023-11-21
 
 - TMS-997: Change textblock button border-color if no bg-color is selected

diff --git a/partials/shared/header-inner.dust b/partials/shared/header-inner.dust
@@ -16,11 +16,11 @@
             {/Header.lang_nav_horizontal}
 
             {?Header.lang_nav_horizontal}
-            <div class="is-hidden-desktop">
-            {/Header.lang_nav_horizontal}
-            {>"ui/menu/language-nav-dropdown" links=Header.language_nav.links /}
-            {?Header.lang_nav_horizontal}
-            </div>
+                <div class="is-hidden-desktop">
+                    {/Header.lang_nav_horizontal}
+                        {>"ui/menu/language-nav-dropdown" links=Header.language_nav.links /}
+                    {?Header.lang_nav_horizontal}
+                </div>
             {/Header.lang_nav_horizontal}
 
             {^Header.hide_search}

diff --git a/partials/ui/menu/fly-out-nav.dust b/partials/ui/menu/fly-out-nav.dust
@@ -1,8 +1,8 @@
 <nav id="js-fly-out-nav" class="fly-out-nav overlay overlay--dark-80" aria-hidden="true">
     <div class="is-overlay" tabindex="-1" data-micromodal-close>
-        <div class="fly-out-nav__inner {Header.colors.fly_out_nav.inner|s}" role="dialog" aria-modal="true">
+        <div class="fly-out-nav__inner {Header.colors.fly_out_nav.inner|attr}" role="dialog" aria-modal="true">
             <button class="fly-out-nav__close">
-                <span class="is-sr-only"> {Strings.s.header.close_menu|s} </span>
+                <span class="is-sr-only"> {Strings.s.header.close_menu|html} </span>
                 {>"ui/icon" icon="close" class="icon--large {Header.colors.fly_out_nav.close_menu}" /}
             </button>
 
@@ -15,15 +15,15 @@
                                     <a class="navbar-link dropdown-trigger is-arrowless" aria-haspopup="true" href="#">
                                         {link.title|html}
                                     </a>
-                                    <button class="dropdown-toggler" aria-expanded=false aria-controls="js-navbar-menu-item-{$idx}">
-                                        <span class="is-sr-only">{data.open_menu|s}</span>
-            
+                                    <button class="dropdown-toggler" aria-expanded=false aria-controls="js-navbar-menu-item-{$idx|attr}">
+                                        <span class="is-sr-only">{Header.strings.open_menu|html}</span>
+
                                         <span aria-hidden="true">
                                             {>"ui/icon" icon="chevron-down" class="icon--medium" /}
                                         </span>
                                     </button>
                                 </div>
-                                <div class="navbar-dropdown is-hidden-touch" id="js-navbar-menu-item-{$idx}">
+                                <div class="navbar-dropdown is-hidden-touch" id="js-navbar-menu-item-{$idx|attr}">
                                     {#submenu_links}
                                         <a href="{.link.url|url}"  class="{.class|attr}">
                                             {.link.title|html}
@@ -44,8 +44,8 @@
 
             {^Header.hide_search}
                 <div class="search-form-wrapper pl-6">
-                    <div class="h4 mt-9 mb-4 {Header.colors.fly_out_nav.search_title}">
-                        {Strings.s.header.search_title|s}
+                    <div class="h4 mt-9 mb-4 {Header.colors.fly_out_nav.search_title|attr}">
+                        {Strings.s.header.search_title|html}
                     </div>
 
                     {>"search-form" button_class="{Header.colors.fly_out_nav.search_button} mb-2 mb-0-tablet" /}

diff --git a/partials/ui/menu/main-menu.dust b/partials/ui/menu/main-menu.dust
@@ -7,15 +7,15 @@
                         <a class="navbar-link dropdown-trigger is-arrowless" aria-haspopup="true" href="#">
                             {link.title|html}
                         </a>
-                        <button class="dropdown-toggler" aria-expanded=false aria-controls="js-navbar-menu-item-dropdown-{$idx}">
-                            <span class="is-sr-only">{data.open_menu|s}</span>
+                        <button class="dropdown-toggler" aria-expanded=false aria-controls="js-navbar-menu-item-dropdown-{$idx|attr}">
+                            <span class="is-sr-only">{Header.strings.open_menu|html}</span>
 
                             <span aria-hidden="true">
                                 {>"ui/icon" icon="chevron-down" class="icon--medium" /}
                             </span>
                         </button>
                     </div>
-                    <div class="navbar-dropdown has-background-white has-text-black" id="js-navbar-menu-item-dropdown-{$idx}">
+                    <div class="navbar-dropdown has-background-white has-text-black" id="js-navbar-menu-item-dropdown-{$idx|attr}">
                         <div class="container">
                             <div class="columns">
                                 <div class="column">