Merge pull request #261 from StreetSupport/chore/lighthouse-accessibility-fixes

chore: Lighthouse accessibility, performance, and security fixes

Author: james-cross

next.config.ts

@@ -108,10 +108,7 @@ const nextConfig = {
       // Enable module concatenation for smaller bundles
       config.optimization = {
         ...config.optimization,
-        usedExports: true,
-        sideEffects: false,
-        
-        // Split chunks for better caching
+
         splitChunks: {
           ...config.optimization?.splitChunks,
           chunks: 'all',

src/app/[slug]/page.tsx

@@ -14,7 +14,7 @@ import SupporterLogos from '@/components/Location/SupporterLogos';
 import WatsonXChat from '@/components/ui/WatsonXChat';
 import { generateLocationSEOMetadata } from '@/utils/seo';
 
-export const dynamic = 'force-dynamic';
+export const revalidate = 3600;
 
 // Helper function to get location background image
 function getLocationBackgroundImage(slug: string): string {

src/components/MapComponent/GoogleMap.tsx

@@ -1,7 +1,8 @@
 'use client';
 
-import React, { useEffect, useRef, useState } from 'react';
-import { loadGoogleMaps } from '@/utils/loadGoogleMaps';
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import Script from 'next/script';
+import { GOOGLE_MAPS_SCRIPT_URL, waitForGoogleMaps, isGoogleMapsReady } from '@/utils/loadGoogleMaps';
 import { updateMapBounds, shouldRecalculateBounds } from '@/utils/mapBounds';
 
 interface Marker {
@@ -40,7 +41,16 @@ interface Props {
   includeUserInBounds?: boolean; // Whether to include user location in bounds calculation
 }
 
-export default React.memo(function GoogleMap({ 
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}
+
+export default React.memo(function GoogleMap({
   center, 
   markers, 
   zoom, 
@@ -65,29 +75,16 @@ export default React.memo(function GoogleMap({
   onMarkerClickRef.current = onMarkerClick;
   const userLocationRef = useRef(userLocation);
   userLocationRef.current = userLocation;
-  const [isLoaded, setIsLoaded] = useState(false);
+  const [isLoaded, setIsLoaded] = useState(isGoogleMapsReady);
   const [loadError, setLoadError] = useState<string | null>(null);
   const effectiveZoom = zoom ?? 12;
 
-  // Load Google Maps API immediately (simplified approach for reliability)
-  useEffect(() => {
-    let isCancelled = false;
-    
-    loadGoogleMaps()
-      .then(() => {
-        if (!isCancelled) {
-          setIsLoaded(true);
-        }
-      })
-      .catch((_error) => {
-        if (!isCancelled) {
-          setLoadError('Failed to load map. Please check your internet connection.');
-        }
-      });
+  const handleScriptLoad = useCallback(() => {
+    waitForGoogleMaps().then(() => setIsLoaded(true));
+  }, []);
 
-    return () => {
-      isCancelled = true;
-    };
+  const handleScriptError = useCallback(() => {
+    setLoadError('Failed to load map. Please check your internet connection.');
   }, []);
 
   useEffect(() => {
@@ -213,8 +210,8 @@ export default React.memo(function GoogleMap({
             id="${infoId}"
             style="font-size:14px;max-width:220px;cursor:pointer;padding:4px;"
           >
-            <strong style="color:#0b9b75;">${data.organisation ?? 'Unknown Organisation'}</strong><br/>
-            ${data.serviceName ?? 'Unnamed service'}<br/>
+            <strong style="color:#0b9b75;">${escapeHtml(data.organisation ?? 'Unknown Organisation')}</strong><br/>
+            ${escapeHtml(data.serviceName ?? 'Unnamed service')}<br/>
             ${data.distanceKm?.toFixed(1) ?? '?'} km away
           </div>`;
 
@@ -286,12 +283,20 @@ export default React.memo(function GoogleMap({
 
   if (!isLoaded) {
     return (
-      <div className="w-full h-full min-h-96 rounded border bg-gray-100 flex items-center justify-center">
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-2"></div>
-          <p className="text-gray-600">Loading map...</p>
+      <>
+        <Script
+          src={GOOGLE_MAPS_SCRIPT_URL}
+          strategy="afterInteractive"
+          onLoad={handleScriptLoad}
+          onError={handleScriptError}
+        />
+        <div className="w-full h-full min-h-96 rounded border bg-gray-100 flex items-center justify-center">
+          <div className="text-center">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-2"></div>
+            <p className="text-gray-600">Loading map...</p>
+          </div>
         </div>
-      </div>
+      </>
     );
   }
 

src/components/ui/WatsonXChat.tsx

@@ -1,14 +1,14 @@
 'use client';
 
 import { useEffect } from 'react';
+import Script from 'next/script';
 import { useCookieConsent } from '@/contexts/CookieConsentContext';
 
 type WatsonAssistantInstance = {
   render: () => Promise<void>;
   destroy: () => void;
 };
 
-// Extend Window interface for WatsonX
 declare global {
   interface Window {
     watsonAssistantChatOptions?: {
@@ -21,7 +21,6 @@ declare global {
   }
 }
 
-// West Midlands locations that should have WatsonX chat
 const WATSON_X_LOCATIONS = [
   'birmingham',
   'sandwell',
@@ -32,15 +31,14 @@ const WATSON_X_LOCATIONS = [
   'solihull'
 ];
 
+const WATSON_SCRIPT_URL =
+  'https://web-chat.global.assistant.watson.appdomain.cloud/versions/latest/WatsonAssistantChatEntry.js';
+
 interface WatsonXChatProps {
   locationSlug?: string;
 }
 
-// Module-level state — survives React Strict Mode unmount/remount cycles.
-// The Watson SDK script is a one-shot global resource that cannot be safely
-// removed and re-added, so we track it outside the component lifecycle.
 let watsonInstance: WatsonAssistantInstance | null = null;
-let scriptAdded = false;
 let pendingCleanup: ReturnType<typeof setTimeout> | null = null;
 
 function doCleanup() {
@@ -53,33 +51,17 @@ function doCleanup() {
     }
     watsonInstance = null;
   }
-  scriptAdded = false;
   delete window.watsonAssistantChatOptions;
-  const existing = document.querySelector(
-    'script[src*="WatsonAssistantChatEntry.js"]'
-  );
-  if (existing) {
-    existing.remove();
-  }
 }
 
-/**
- * WatsonX Chat component for West Midlands locations
- * Injects the IBM WatsonX Assistant chat widget
- *
- * @param locationSlug - Optional location slug to determine if chat should be shown
- *                       If not provided, chat is always shown (for west-midlands hub page)
- */
 export default function WatsonXChat({ locationSlug }: WatsonXChatProps) {
   const { hasConsent } = useCookieConsent();
 
-  // Determine if we should show the chat widget (requires functional consent)
   const isWatsonLocation = !locationSlug || WATSON_X_LOCATIONS.includes(locationSlug);
   const hasFunctionalConsent = hasConsent('functional');
   const shouldShowChat = isWatsonLocation && hasFunctionalConsent;
 
   useEffect(() => {
-    // Cancel any scheduled cleanup (e.g. from Strict Mode unmount/remount)
     if (pendingCleanup) {
       clearTimeout(pendingCleanup);
       pendingCleanup = null;
@@ -90,36 +72,29 @@ export default function WatsonXChat({ locationSlug }: WatsonXChatProps) {
       return;
     }
 
-    // Already have a live instance or the script is loading — nothing to do
-    if (watsonInstance || scriptAdded) return;
-
-    scriptAdded = true;
-
-    // Set up Watson Assistant options
-    window.watsonAssistantChatOptions = {
-      integrationID: '83b099b7-08a1-4118-bba3-341fbec366d1',
-      region: 'eu-gb',
-      serviceInstanceID: 'a3a6beaa-5967-4039-8390-d48ace365d86',
-      onLoad: async (instance) => {
-        watsonInstance = instance;
-        await instance.render();
-      }
-    };
-
-    // Load the Watson Assistant script
-    const script = document.createElement('script');
-    script.src =
-      'https://web-chat.global.assistant.watson.appdomain.cloud/versions/latest/WatsonAssistantChatEntry.js';
-    script.async = true;
-    document.head.appendChild(script);
+    if (!watsonInstance) {
+      window.watsonAssistantChatOptions = {
+        integrationID: '83b099b7-08a1-4118-bba3-341fbec366d1',
+        region: 'eu-gb',
+        serviceInstanceID: 'a3a6beaa-5967-4039-8390-d48ace365d86',
+        onLoad: async (instance) => {
+          watsonInstance = instance;
+          await instance.render();
+        }
+      };
+    }
 
     return () => {
-      // Defer cleanup so a Strict Mode remount can cancel it.
-      // If no remount follows (real unmount), cleanup fires after the timeout.
       pendingCleanup = setTimeout(doCleanup, 0);
     };
   }, [shouldShowChat]);
 
-  // This component doesn't render anything visible
-  return null;
+  if (!shouldShowChat) return null;
+
+  return (
+    <Script
+      src={WATSON_SCRIPT_URL}
+      strategy="afterInteractive"
+    />
+  );
 }

src/utils/loadGoogleMaps.ts

@@ -1,67 +1,38 @@
-const apiKey = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY!;
-
 /**
- * Loads the Google Maps JS API by injecting a script tag.
- * Optimized for performance with better caching and error handling.
+ * Waits for the Google Maps JS API to become available on the window object.
+ * The actual script tag is rendered via next/script in GoogleMap.tsx.
  */
-let isLoadingPromise: Promise<typeof google> | null = null;
-let isLoaded = false;
+export const GOOGLE_MAPS_SCRIPT_URL = `https://maps.googleapis.com/maps/api/js?key=${process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}&v=weekly&libraries=geometry`;
 
-export const loadGoogleMaps = async (): Promise<typeof google> => {
-  // If Google Maps is already loaded, return immediately
-  if (isLoaded && typeof window !== 'undefined' && window.google && window.google.maps && window.google.maps.Map) {
-    return window.google;
-  }
-  
-  // If already loading, return the existing promise
-  if (isLoadingPromise) {
-    return isLoadingPromise;
+let readyPromise: Promise<typeof google> | null = null;
+
+export function isGoogleMapsReady(): boolean {
+  return (
+    typeof window !== 'undefined' &&
+    !!window.google?.maps?.Map
+  );
+}
+
+export function waitForGoogleMaps(): Promise<typeof google> {
+  if (isGoogleMapsReady()) {
+    return Promise.resolve(window.google);
   }
-  
-  isLoadingPromise = new Promise((resolve, reject) => {
-    // Check if script is already in the DOM
-    const existingScript = document.querySelector('script[src*="maps.googleapis.com"]');
-    if (existingScript) {
-      // Wait for it to load with timeout
-      const checkLoaded = () => {
-        if (window.google && window.google.maps && window.google.maps.Map) {
-          isLoaded = true;
-          resolve(window.google);
-        } else {
-          setTimeout(checkLoaded, 50); // Reduced polling interval
-        }
-      };
-      checkLoaded();
-      return;
-    }
 
-    // Create and inject script tag
-    const script = document.createElement('script');
-    script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&v=weekly&libraries=geometry`;
-    script.async = true;
-    script.defer = true;
-    
-    script.onload = () => {
-      // Wait for google.maps to be fully available with timeout
-      const checkAvailable = () => {
-        if (window.google && window.google.maps && window.google.maps.Map) {
-          isLoaded = true;
-          resolve(window.google);
-        } else {
-          setTimeout(checkAvailable, 50);
-        }
-      };
-      checkAvailable();
-    };
-    
-    script.onerror = () => {
-      isLoadingPromise = null;
-      isLoaded = false;
-      reject(new Error('Failed to load Google Maps API'));
+  if (readyPromise) return readyPromise;
+
+  readyPromise = new Promise((resolve) => {
+    const check = () => {
+      if (isGoogleMapsReady()) {
+        resolve(window.google);
+      } else {
+        setTimeout(check, 50);
+      }
     };
-    
-    document.head.appendChild(script);
+    check();
   });
 
-  return isLoadingPromise;
-};
+  return readyPromise;
+}
+
+/** @deprecated Use waitForGoogleMaps instead */
+export const loadGoogleMaps = waitForGoogleMaps;

tests/__tests__/components/GoogleMap.test.tsx

@@ -1,8 +1,14 @@
 import { render, waitFor } from '@testing-library/react';
 import GoogleMap from '@/components/MapComponent/GoogleMap';
 
-// Mock the loadGoogleMaps utility
+jest.mock('next/script', () => {
+  return function MockScript() { return null; };
+});
+
 jest.mock('@/utils/loadGoogleMaps', () => ({
+  GOOGLE_MAPS_SCRIPT_URL: 'https://maps.googleapis.com/maps/api/js?key=test&v=weekly&libraries=geometry',
+  isGoogleMapsReady: () => true,
+  waitForGoogleMaps: jest.fn().mockResolvedValue(undefined),
   loadGoogleMaps: jest.fn().mockResolvedValue(undefined),
 }));