TMS-942: Program- & site-search, contact and fly-out-menu accessibility fixes

CHANGELOG.MD

@@ -7,6 +7,12 @@ 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
+    - Add margin for program text-search suggestions
+
 ## [1.8.7] - 2023-11-21
 
 ### Added

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

@@ -28,6 +28,7 @@ import GravityFormsPatch from './gravity-forms-patch';
 import Countdown from './countdown';
 import ProgramSearch from './program-search';
 import LoadMore from './load-more';
+import SearchFilters from './search-filters';
 
 const globalControllers = {
     Common,
@@ -55,6 +56,7 @@ const globalControllers = {
     Countdown,
     ProgramSearch,
     LoadMore,
+    SearchFilters,
 };
 
 const templateControllers = {

assets/styles/blocks/custom/_contacts.scss

@@ -5,6 +5,10 @@
 $contacts-gap: .75rem;
 
 .contacts {
+    &__name {
+        overflow: hidden !important; // sass-lint:disable no-important
+    }
+
     &__item {
         flex: 1 0 auto;
         max-width: calc(100% - $contacts-gap);

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;
 
 

assets/styles/views/_page-program.scss

@@ -61,9 +61,13 @@
     }
 
     ul.ui-menu {
-        .ui-menu-item-wrapper {
-            &.ui-state-active {
-                background-color: $color-grey;
+        .ui-menu-item {
+            margin-bottom: .5rem;
+
+            .ui-menu-item-wrapper {
+                &.ui-state-active {
+                    background-color: $color-grey;
+                }
             }
         }
     }

lib/Formatters/ContactFormatter.php

@@ -139,6 +139,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
+                foreach ( $fields['phone_repeater'] as $i => $single_phone ) {
+                    $fields['phone_repeater'][ $i ]['trimmed_number'] = str_replace( ' ', '', $single_phone['phone_number'] );
+                }
             }
 
             return $fields;

partials/shared/contact-item.dust

@@ -29,7 +29,7 @@
                         <div>
                             <span>{phone_text|html}</span>
                             <div>
-                                <a href="tel:{phone_number|html}"
+                                <a href="tel:{?trimmed_number}{trimmed_number|html}{:else}{phone_number|html}{/trimmed_number}"
                                    class="has-text-paragraph hyphenate">
                                     {phone_number|html}
                                 </a>