Merge branch 'master' into TMS-942

CHANGELOG.MD

@@ -7,13 +7,18 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [1.54.3] - 2023-12-04
 
+- TMS-939:
+    - Search-page form accessibility fixes
+    - Header search accessibility fixes
+    - Added focus on input when opening header search
+- TMS-940: 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
 
-
 ## [1.54.2] - 2023-11-22
 
 - TMS-974: Fix event formatting if only manual events are shown

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

@@ -27,6 +27,7 @@ import DatePicker from './date-picker';
 import GravityFormsPatch from './gravity-forms-patch';
 import Countdown from './countdown';
 import SearchFilters from './search-filters';
+import FocusOnSearch from './focus-on-search';
 
 const globalControllers = {
     Common,
@@ -53,6 +54,7 @@ const globalControllers = {
     GravityFormsPatch,
     Countdown,
     SearchFilters,
+    FocusOnSearch,
 };
 
 const templateControllers = {

assets/styles/views/_search.scss

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