From 6d1f0df066770f7942b6ac3a5020c4db8c515194 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Erik=20V=C3=A4nttinen?= Date: Mon, 27 Nov 2023 11:47:49 +0200 Subject: [PATCH 1/2] TMS-940: Mobile-nav accessibility fixes --- .github/PULL_REQUEST_TEMPLATE.md | 2 +- CHANGELOG.MD | 4 +++ .../ui-components/header/_fly-out-nav.scss | 33 +++++++++++++++---- models/shared/header.php | 23 +++++++++++-- partials/shared/header-inner.dust | 22 ++++++++----- partials/ui/menu/menu-item-simple.dust | 4 +-- partials/ui/menu/menu-item.dust | 19 ++++++----- 7 files changed, 78 insertions(+), 29 deletions(-) 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 bc8eb01f..8a6d0b13 100644 --- a/CHANGELOG.MD +++ b/CHANGELOG.MD @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] +- TMS-940: + - Change mobile menu dropdown links to a single button-element + - Hide current language on mobile header if only 2 languages in use + ## [1.8.7] - 2023-11-21 ### Added 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..b6ef2154 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 298e3f14..b48bff88 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} -
+
+ {?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} +
{/Header.lang_nav_horizontal} - {>"ui/menu/language-nav-dropdown" links=Header.language_nav.links /} - {?Header.lang_nav_horizontal} -
+ + {^Header.lang_nav_horizontal} + {>"ui/menu/language-nav-dropdown" links=Header.language_nav.links /} {/Header.lang_nav_horizontal} {^Header.hide_search} @@ -31,7 +37,7 @@ {/Header.has_nav_menu} @@ -41,14 +47,14 @@ {^Header.hide_search}