TMS-942: Accessibility fixes

CHANGELOG.MD

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+
+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/search-filters.js

@@ -0,0 +1,47 @@
+/*
+ *  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 SearchFilters {
+
+    /**
+     * Check or uncheck checkboxes depending on selections
+     *
+     * @param {Object} event Change event
+     */
+    SearchFilters( event ) {
+        const $checkBoxContainer = $( '.search-filters' );
+        const $checkBoxes = $checkBoxContainer.find( 'input[type=checkbox]' );
+        const $clickedCheckbox = event.target;
+
+        if ( $( $clickedCheckbox ).is( ':checked' ) ) {
+            // Uncheck "All"-checkbox when others are checked
+            if ( $( $clickedCheckbox ).prop( 'id' ) !== 'cpt-all' ) {
+                $( '#cpt-all' ).prop( 'checked', false );
+            }
+            // Uncheck other checkboxes when "All" is selected
+            else {
+                $checkBoxes.each( function() {
+                    if ( $( this ).prop( 'id' ) !== 'cpt-all' ) {
+                        $( this ).prop( 'checked', false );
+                    }
+                } );
+            }
+        }
+    }
+
+    /**
+     * Run when the document is ready.
+     *
+     * @return {void}
+     */
+    docReady() {
+        $( '.search-filters input[type=checkbox]' ).on( 'change', this.SearchFilters.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 SearchFilters from './search-filters';
 
 const globalControllers = {
     Common,
@@ -51,6 +52,7 @@ const globalControllers = {
     DatePicker,
     GravityFormsPatch,
     Countdown,
+    SearchFilters,
 };
 
 const templateControllers = {

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

@@ -13,7 +13,8 @@ $fly-out-nav-secondary-link-hover: $primary-invert !default;
 $fly-out-nav-search-button-icon: $primary !default;
 
 .fly-out-nav {
-    z-index: 50;
+    // z-index unbelievable high to prevent embedded chat overlapping elements
+    z-index: 9999999999;
     display: none;
 
     @include from($desktop) {

lib/Formatters/ContactFormatter.php

@@ -141,6 +141,11 @@ public function map_keys( array $posts, array $field_keys, $default_image = null
                 $fields['phone_repeater'] = array_filter( $fields['phone_repeater'], function ( $item ) {
                     return ! empty( $item['phone_text'] ) || ! empty( $item['phone_number'] );
                 } );
+
+                // Remove whitespaces from phone_number to use on the href
+                $fields['trimmed_number'] = array_map( function( $item ) {
+                    return str_replace( ' ', '', $item['phone_number'] );
+                }, $fields['phone_repeater'] );
             }
 
             return $fields;