Merge branch 'master' into TMS-942

Author: eebbi

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,4 +1,4 @@
-Severa-ID: 2108
+Severa-ID: 2132
 Severa-kuvaus: 
 Task: https://hiondigital.atlassian.net/browse/TMS-
 

CHANGELOG.MD

@@ -7,11 +7,21 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [1.8.8] - 2023-12-04
+
+- TMS-939:
+    - 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-942:
     - Check / uncheck search filter checkboxes depending on choices
     - Trim contact phone number in href
     - Increase fly-out-nav z-index to prevent chatbot from overlapping elements
     - Add margin for program text-search suggestions
+- TMS-995: Show project-listing component images in projects-page
 
 ## [1.8.7] - 2023-11-21
 

assets/scripts/focus-on-search.js

@@ -0,0 +1,33 @@
+/*
+ *  Copyright (c) 2023. Hion Digital
+ */
+
+// Use jQuery as $ within this file scope.
+const $ = jQuery; // eslint-disable-line no-unused-vars
+
+/**
+ * Export the class reference.
+ */
+export default class FocusOnSearch {
+
+    /**
+     * Focus on search input when button is clicked
+     */
+    FocusOnSearch() {
+        const $searchContainer = $( '#js-search-toggle-target' );
+        const $searchInput = $searchContainer.find( 'input[type=search]' );
+
+        if ( $( '#js-search-toggle' ).hasClass( 'is-active' ) ) {
+            $searchInput.trigger( 'focus' );
+        }
+    }
+
+    /**
+     * Run when the document is ready.
+     *
+     * @return {void}
+     */
+    docReady() {
+        $( '#js-search-toggle' ).on( 'click', this.FocusOnSearch.bind( this ) );
+    }
+}

assets/scripts/theme.js

@@ -29,6 +29,7 @@ import Countdown from './countdown';
 import ProgramSearch from './program-search';
 import LoadMore from './load-more';
 import SearchFilters from './search-filters';
+import FocusOnSearch from './focus-on-search';
 
 const globalControllers = {
     Common,
@@ -57,6 +58,7 @@ const globalControllers = {
     ProgramSearch,
     LoadMore,
     SearchFilters,
+    FocusOnSearch,
 };
 
 const templateControllers = {

assets/styles/ui-components/header/_fly-out-nav.scss

@@ -134,21 +134,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;
                 }
             }
 

assets/styles/views/_page-project.scss

@@ -53,10 +53,4 @@
             }
         }
     }
-
-    .tredu-events {
-        .image {
-            display: none;
-        }
-    }
 }

assets/styles/views/_search.scss

@@ -57,6 +57,9 @@ $search-item-hover: $primary-dark !default;
     background-color: $color-light-gray;
 
     &__inner {
+        display: flex;
+        flex-direction: column-reverse;
+
         @include from($desktop) {
             margin-right: 8.06rem;
         }
@@ -112,7 +115,7 @@ $search-item-hover: $primary-dark !default;
                 }
 
                 span {
-                    margin-left: .25rem !important; // sass-lint:disable-line no-important
+                    margin-left: .25rem;
                 }
             }
         }