Release: v5.2.0

cypress/e2e/2-travel-study/destinations-filter.cy.ts

@@ -19,19 +19,19 @@ describe('Travel-Study Destinations Page', () => {
     cy.wait(1000);
 
     // Select Filter Month and check for URL update
-    cy.get('[data-test="filter-option--october"]').first().check({ force: true });
-    cy.url().should('contain', 'trip-month=oct');
+    cy.get('[data-test="filter-option--february"]').first().check({ force: true });
+    cy.url().should('contain', 'trip-month=feb');
 
     // Load the filter from the URL
-    cy.visit('/travel-study/destinations/?page=1&trip-month=oct');
+    cy.visit('/travel-study/destinations/?page=1&trip-month=feb');
     // Confirm chip exists
-    cy.get('[data-test="chip:October"]').should('exist');
+    cy.get('[data-test="chip:February"]').should('exist');
     // Confirm that a trip card exists
     cy.get('.trip-filter-page article h3').should('exist');
 
     // Clear Filters and check for URL update
     cy.get('[data-test="filter-btn--clear-all"]').first().click({force: true});
-    cy.url().should('not.contain', 'trip-month=oct');
+    cy.url().should('not.contain', 'trip-month=feb');
 
     // Enable family focused filter
     cy.visit('/travel-study/destinations/?page=1&trip-experience=family-focused');

cypress/e2e/2-travel-study/registration-form.cy.ts

@@ -46,16 +46,16 @@ describe('Travel-Study Trip Registration Form Page', () => {
     // Confirm form exists
     cy.get('[id="su-embed"]').should('exist');
     cy.get('form').should('exist');
-    
+
     // Confirm that the user's name is prefilled
     cy.get('[data-fieldid="DigitalName"]').should('contain.value', 'Teri Dactyl');
-    
+
     // Confirm email is prefilled
     cy.get('[data-fieldid="ContactEmail"]').should('contain.value', '[email protected]');
 
     // Confirm phone number is prefilled
     cy.get('[data-fieldid="PhoneNumber"]').should('contain.value', '4081111111');
-  
+
     // Fill required questions
     cy.get('[data-fieldid="Pre-TripExtension__0"]').first().check({force: true});
     cy.get('[data-fieldid="Post-TripExtension__0"]').first().check({force: true});
@@ -70,7 +70,7 @@ describe('Travel-Study Trip Registration Form Page', () => {
 
     // Visit the membership form page URL
     cy.visit('/travel-study/destinations/finland-2022/finland-reg-form/form');
-  
+
     // Confirm that the URL redirect to the expected URL
     cy.url().should('include', '/travel-study/destinations/finland-2022/finland-reg-form');
     cy.reload(); // Needed for local Gatsby build

cypress/e2e/4-search/search-results.cy.ts

@@ -9,9 +9,7 @@ describe('Search Results', () => {
     })
 
     cy.get('[data-test="search--modal-input"]').should('exist').type('travel study');
-    cy.get('[data-cy="search--submit-btn"]').first().click();
-
-    cy.reload({timeout: 1000}) // Needed for local Gatsby build
+    cy.get('[data-test="search--submit-btn"]').first().click();
     cy.url().should('include', '/search/?q=travel%20study');
   })
   it('should return travel study search results', () => {
@@ -25,17 +23,13 @@ describe('Search Results', () => {
   it('should have working Alumni facet filter', () => {
     cy.visit('/search/?q=travel%20study');
     // Confirm Alumni facet filter exists and check
-    cy.get('input[value="Alumni"]').should('exist').check({ force: true });
-
-    cy.reload() // Needed for local Gatsby build
-    cy.url().should('include', '/search/?q=travel+study&site=Alumni');
+    cy.get('#search-desktop-filters input[data-test="siteName-alumni"]').should('exist').click();
+    cy.url().should('include', '/search/?q=travel%20study&sites%5B0%5D=Alumni');
   });
   it('should return no search results when searching lorem ipsum', () => {
     cy.visit('/search/?q=lorem%20ipsum');
-    cy.reload() // Needed for local Gatsby build
-
     cy.get('h1').should('contain.text', 'Search for...');
-    cy.get('section > div form input[data-test="search--modal-input"]').should('contain.value','lorem ipsum');
+    cy.get('#search-field-input').should('contain.value','lorem ipsum');
 
     cy.get('h2').should('contain.text', 'We’re sorry, we couldn’t find results for “lorem ipsum”.')
     cy.get('h3').should('contain.text', 'Consider Browsing by Category:')

gatsby-browser.js

@@ -9,6 +9,7 @@ import React from 'react';
 // Contexts.
 import { GlobalStateProvider } from './src/contexts/GlobalContext';
 import { AuthContextProvider } from './src/contexts/AuthContext';
+import { SearchModalProvider } from './src/components/search/Modal/SearchModalContext';
 
 // CSS
 import './src/styles/global.css';
@@ -19,21 +20,23 @@ import './src/styles/light-forms.css';
 // Exports.
 export const wrapRootElement = ({ element }) => (
   <GlobalStateProvider>
-    <AuthContextProvider>{element}</AuthContextProvider>
+    <AuthContextProvider>
+      <SearchModalProvider>{element}</SearchModalProvider>
+    </AuthContextProvider>
   </GlobalStateProvider>
 );
 
+/**
+ * Handle hash changes to prevent scroll.
+ */
 export const shouldUpdateScroll = (ctx) => {
   const {
     routerProps: { location },
     prevRouterProps: { location: prevLocation = {} } = {},
   } = ctx;
 
   // Prevent scrolling when user clicks on filters on search page.
-  if (
-    location.pathname.match(/^\/search/i) ||
-    location.pathname.match(/^\/travel-study\/search/i)
-  ) {
+  if (location.pathname.match(/^\/travel-study\/search/i)) {
     return false;
   }
 

src/components/accessibility/Skiplink.jsx

@@ -1,6 +1,8 @@
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import { dcnb } from 'cnbuilder';
+import { navigate } from 'gatsby';
+import scrollTo from 'gatsby-plugin-smoothscroll';
 import { ClassNameType } from '../../types/CommonType';
 
 const SkiplinkProps = {
@@ -16,9 +18,24 @@ export const Skiplink = ({
   ...props
 }) => {
   const ref = useRef(null);
+  const currentLocation =
+    typeof window !== 'undefined' ? window.location.pathname : '';
+  const currentSearch =
+    typeof window !== 'undefined' ? window.location.search : '';
+  const currentUrl = `${currentLocation}${currentSearch}`;
   return (
     <a
       href={anchorLink}
+      onClick={(e) => {
+        e.preventDefault();
+        navigate(currentUrl + anchorLink);
+        const elem = document.getElementById(anchorLink.replace('#', ''));
+        const prevTabIndex = elem.tabIndex;
+        elem.setAttribute('tabindex', -1);
+        elem.focus({ preventScroll: true });
+        elem.setAttribute('tabindex', prevTabIndex);
+        scrollTo(anchorLink);
+      }}
       className={dcnb('su-skiplink', className)}
       ref={ref}
       onFocus={() => ref.current.scrollIntoView()}

src/components/components.js

@@ -59,12 +59,12 @@ import Redirect from './redirect/Redirect';
 import RegistrationFormPage from './page-types/registrationFormPage/registrationFormPage';
 import { SBSAAMainNav } from './storyblok/saaMainNav';
 import { SBSAAMainMenuGroup } from './storyblok/saaMainMenuGroup';
-import SearchFacet from './search/searchFacet';
-import SearchField from './search/searchField';
+import SearchFacet from './search/SearchFacet';
+import SearchField from './search/SearchField';
 import SearchPage from './page-types/searchPage';
-import SearchPager from './search/searchPager';
-import SearchResults from './search/searchResults';
-import SearchSuggestions from './search/searchSuggestions';
+import SearchPager from './search/SearchPager';
+import SearchResults from './search/SearchResults';
+import SearchSuggestions from './search/SearchSuggestions';
 import Section from './layout/section';
 import SimpleImage from './media/simpleImage';
 import Story from './content-types/story/story';

src/components/content-types/perk/perkPageView.js

@@ -2,7 +2,7 @@ import SbEditable from 'storyblok-react';
 import React from 'react';
 import { Heading } from '../../simple/Heading';
 import CardImage from '../../media/cardImage';
-import Layout from '../../partials/layout';
+import Layout from '../../partials/Layout';
 
 const PerkPageView = (props) => {
   // Destructure props

src/components/content-types/story/storyPageView.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { DateTime } from 'luxon';
 import { Container } from '../../layout/Container';
 import { Heading } from '../../simple/Heading';
-import Layout from '../../partials/layout';
+import Layout from '../../partials/Layout';
 import CreateBloks from '../../../utilities/createBloks';
 import FullWidthImage from '../../media/fullWidthImage';
 import getNumBloks from '../../../utilities/getNumBloks';

src/components/events-discovery/eventsDiscovery.jsx

@@ -120,7 +120,7 @@ const EventDiscoveryContent = () => {
               <Hits
                 hitComponent={Hit}
                 classNames={{
-                  root: `${isStalled ? 'su-opacity-50' : ''}`,
+                  root: `${isStalled ? 'su-opacity-30' : ''}`,
                   list: 'su-list-none su-pl-0 su-grid su-grid-cols-1 su-w-full',
                   item: 'su-mb-0 su-w-full su-border-b su-pb-30 su-mb-30 sm:su-px-20',
                 }}

src/components/identity/GlobalHeader/GlobalHeader.jsx

@@ -1,17 +1,17 @@
-import React, { useState, useRef } from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { FlexBox } from '../../layout/FlexBox';
 import { SBLinkType } from '../../../types/storyblok/SBLinkType';
 import * as styles from './GlobalHeader.styles';
 import CreateBloks from '../../../utilities/createBloks';
 import Logo from '../logo';
-import OpenSearchModalButton from '../../search/openSearchModalButton';
+import OpenSearchModalButton from '../../search/Modal/OpenSearchModalButton';
 import SbLink from '../../../utilities/sbLink';
-import SearchModal from '../../search/searchModal';
+import SearchModal from '../../search/Modal/SearchModal';
 import AlumniLogo from '../../../images/saa-logo-white.svg';
 import { SBBlokType } from '../../../types/storyblok/SBBlokType';
-import useEscape from '../../../hooks/useEscape';
 import useDisplay from '../../../hooks/useDisplay';
+import SearchModalContext from '../../search/Modal/SearchModalContext';
 
 export const GlobalHeaderProps = {
   siteName: PropTypes.string,
@@ -30,48 +30,15 @@ const GlobalHeader = ({
   mainNav,
   hasHero,
   isDark,
-  searchPageUrl,
 }) => {
-  const [modalOpen, setModalOpen] = useState(false);
-  const desktopRef = useRef(null);
-  const mobileRef = useRef(null);
-  const openSearchRef = useRef(null);
-  const openSearchMobileRef = useRef(null);
-
-  const returnFocus = () => {
-    if (openSearchRef.current) {
-      openSearchRef.current.focus();
-    } else if (openSearchMobileRef.current) {
-      openSearchMobileRef.current.focus();
-    }
-  };
-
-  const handleClose = () => {
-    setModalOpen(false);
-    returnFocus();
-  };
-
-  useEscape(() => {
-    // Only do this if the search modal is open
-    if (modalOpen) {
-      const searchInputModal =
-        document.getElementsByClassName('search-input-modal')[0];
-
-      // Only close the modal with Escape key if the autocomplete dropdown is not open
-      if (searchInputModal.getAttribute('aria-expanded') !== 'true') {
-        setModalOpen(false);
-        returnFocus();
-      }
-    }
-  });
-
   // Use the useDisplay hook to determine whether to display the desktop of mobile header
   const { showDesktop, showMobile } = useDisplay();
+  const { desktopButtonRef, mobileButtonRef } = useContext(SearchModalContext);
 
   return (
     <>
       {showMobile && (
-        <div className={styles.rootMobile} ref={mobileRef}>
+        <div className={styles.rootMobile}>
           <CreateBloks
             blokSection={utilityNav}
             ariaLabel="Utility Menu"
@@ -98,17 +65,16 @@ const GlobalHeader = ({
             </div>
             <FlexBox>
               <OpenSearchModalButton
-                openOpen={modalOpen}
-                setModalOpen={setModalOpen}
-                ref={openSearchMobileRef}
+                id="mastead-search-openmodal-mobile"
+                ref={mobileButtonRef}
               />
               <CreateBloks blokSection={mainNav} ariaLabel="Main Menu" />
             </FlexBox>
           </FlexBox>
         </div>
       )}
       {showDesktop && (
-        <div className={styles.root({ hasHero, isDark })} ref={desktopRef}>
+        <div className={styles.root({ hasHero, isDark })}>
           <FlexBox justifyContent="between" alignItems="start">
             <div className={styles.logoWrapper}>
               <Logo className={styles.logo} />
@@ -122,9 +88,8 @@ const GlobalHeader = ({
                 itemClasses={styles.utilNavItem}
               />
               <OpenSearchModalButton
-                openOpen={modalOpen}
-                setModalOpen={setModalOpen}
-                ref={openSearchRef}
+                id="mastead-search-openmodal-desktop"
+                ref={desktopButtonRef}
               />
             </div>
           </FlexBox>
@@ -136,12 +101,7 @@ const GlobalHeader = ({
           <CreateBloks blokSection={mainNav} ariaLabel="Main Menu" />
         </div>
       )}
-      <SearchModal
-        isOpen={modalOpen}
-        setIsOpen={setModalOpen}
-        searchPageUrl={searchPageUrl}
-        onClose={handleClose}
-      />
+      <SearchModal />
     </>
   );
 };