diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 4ff6d5d9..33c74fec 100644 --- 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 index 88a4e78d..1e724cdb 100644 --- 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 index 3c5a4d23..8aa3b224 100644 --- 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 index 6da0a39d..e125b4dc 100644 --- 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 index 64560347..c058983b 100644 --- a/partials/shared/header-inner.dust +++ b/partials/shared/header-inner.dust @@ -16,11 +16,17 @@ {/Header.lang_nav_horizontal} {?Header.lang_nav_horizontal} -