Merge branch 'TMS-939' into stage

CHANGELOG.MD

@@ -7,8 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
-- TMS-935: Archive filter accessibility fixes
-- TMS-994: Add missing list-item block to use
+- TMS-939:
+    - Search-page form accessibility fixes
+    - Header search accessibility fixes
+    - Added focus on input when opening header search
 
 ## [1.54.0] - 2023-11-21
 
@@ -17,6 +19,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - TMS-974:
     - Add recurring events to lists as single item.
     - Add recurring events to events-component
+- TMS-994: Add missing list-item block to use
+
+### Fixed
+
+- TMS-935: Archive filter accessibility fixes
 
 ## [1.53.0] - 2023-11-07
 

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

@@ -26,6 +26,7 @@ import ExternalLinks from './external-links';
 import DatePicker from './date-picker';
 import GravityFormsPatch from './gravity-forms-patch';
 import Countdown from './countdown';
+import FocusOnSearch from './focus-on-search';
 
 const globalControllers = {
     Common,
@@ -51,6 +52,7 @@ const globalControllers = {
     DatePicker,
     GravityFormsPatch,
     Countdown,
+    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;
                 }
             }
         }