devgeniem · eebbi · Dec 4, 2023 · Nov 27, 2023 · Nov 30, 2023 · Dec 4, 2023
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,4 +1,4 @@
-Severa-ID: 2108
+Severa-ID: 2132
 Severa-kuvaus: 
 Task: https://hiondigital.atlassian.net/browse/TMS-
 

diff --git a/CHANGELOG.MD b/CHANGELOG.MD
@@ -13,6 +13,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
     - Search-page form accessibility fixes
     - Header search accessibility fixes
     - Added focus on input when opening header search
+- TMS-940:
+    - Change mobile menu dropdown links to a single button-element
+    - Hide current language on mobile header if only 2 languages in use
 - TMS-995: Show project-listing component images in projects-page
 
 ## [1.8.7] - 2023-11-21

diff --git a/assets/styles/ui-components/header/_fly-out-nav.scss b/assets/styles/ui-components/header/_fly-out-nav.scss
@@ -133,21 +133,42 @@ $fly-out-nav-search-button-icon: $primary !default;
 
             > .navbar-dropdown-control {
                 color: $fly-out-nav-primary-link;
-
-                > .navbar-link {
-                    padding-left: 0;
-                }
+                padding: .5rem 0;
 
                 > .dropdown-toggler {
-                    width: 2.5rem;
-                    height: 2.5rem;
+                    display: flex;
+                    justify-content: space-between;
+                    width: 100%;
                     margin-right: 0;
                     color: inherit;
+
+                    .navbar-link-title {
+                        color: $fly-out-nav-primary-link;
+                        font-family: $family-primary;
+                        font-size: 1.223rem;
+                        font-weight: 600;
+                    }
+
+                    &:hover,
+                    &:focus {
+                        .navbar-link-title {
+                            text-decoration: underline;
+                        }
+                    }
+                }
+
+                .dropdown-toggler[aria-expanded=true] {
+                    transform: rotate(0) !important; // sass-lint:disable-line no-important
+
+                    .icon {
+                        transform: rotate(180deg);
+                    }
                 }
 
                 .icon {
                     color: inherit;
                     fill: currentColor;
+                    transition: transform 86ms ease-out;
                 }
             }
 

diff --git a/models/shared/header.php b/models/shared/header.php
@@ -88,9 +88,18 @@ public function language_nav() : ?array {
             'hide_empty' => 0,
         ];
 
-        $languages = pll_the_languages( $args );
+        $languages = \pll_the_languages( $args );
         $lang_data = [ 'all' => $languages ];
 
+        // If there are two languages, show only one in mobile view
+        if ( count( $languages ) === 2 ) {
+            $args['hide_current'] = 1;
+            $without_current      = \pll_the_languages( $args );
+            $lang_data_mobile     = [
+                'all' => $without_current,
+            ];
+        }
+
         foreach ( $languages as $lang ) {
             if ( ! empty( $lang['current_lang'] ) ) {
                 $lang_data['current'] = $lang;
@@ -101,10 +110,11 @@ public function language_nav() : ?array {
         }
 
         return [
-            'partial' => 'dropdown' === $lang_nav_display
+            'partial'               => 'dropdown' === $lang_nav_display
                 ? 'ui/menu/language-nav-dropdown'
                 : 'ui/menu/language-nav',
-            'links'   => $lang_data,
+            'links'                 => $lang_data,
+            'links_without_current' => $lang_data_mobile,
         ];
     }
 
@@ -393,6 +403,13 @@ public function menu_item_classes( $classes, $item ) : array {
         }
 
         $current_page = \get_queried_object();
+
+        // Check if current page is in a dropdown and add aria-current to the top-level link
+        if ( in_array( $current_page->ID, array_column( $item->sub_menu, 'object_id' ) ) ) {
+            $classes['is_current_parent'] = true;
+        }
+
+        // Add current link class
         if ( ! empty( $current_page->ID ) && (int) $item->object_id === $current_page->ID ) {
             $classes['is_current'] = 'is-current';
         }

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

diff --git a/partials/ui/menu/menu-item-simple.dust b/partials/ui/menu/menu-item-simple.dust
@@ -1,5 +1,5 @@
-<a href="{url}" class="navbar-item {#classes}{.}{@sep} {/sep}{/classes}" {?classes.is_current}aria-page='current'{/classes.is_current}>
-    {title|s}
+<a href="{url|url}" class="navbar-item {#classes}{.}{@sep} {/sep}{/classes}" {?classes.is_current}aria-current="page"{/classes.is_current}>
+    {title|html}
 
     {?icon}
         {?icon-classes}

diff --git a/partials/ui/menu/menu-item.dust b/partials/ui/menu/menu-item.dust
@@ -5,23 +5,24 @@
 {?sub_menu}
     <li class="navbar-item has-dropdown {#classes}{.}{@sep} {/sep}{/classes}">
         <div class="navbar-dropdown-control">
-            <a class="navbar-link is-arrowless" href="{url}" {?classes.is_current}aria-page="current"{/classes.is_current}>
-                {title|s}
-            </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 pl-0 pr-4" aria-expanded=false aria-controls="js-navbar-menu-item-{$idx|attr}" {?classes.is_current_parent}aria-current="true"{/classes.is_current_parent}>
+                <span class="navbar-link-title">
+                    {title|html}
+                </span>
+                <span class="is-sr-only">{data.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}">
+        <ul class="navbar-dropdown is-hidden-touch is-unstyled pt-2 pb-2" id="js-navbar-menu-item-{$idx|attr}">
             {#sub_menu}
-                {>"ui/menu/menu-item-simple" /}
+                <li>
+                    {>"ui/menu/menu-item-simple" /}
+                </li>
             {/sub_menu}
-        </div>
+        </ul>
     </li>
 {/sub_menu}