SEO tweaks, design tweaks

src/lib/components/TestimonialsSection.svelte

@@ -47,6 +47,9 @@
 
   let activeIndex = 0;
   let paused = false;
+  let inView = false;
+  let prefersReducedMotion = false;
+  let carouselEl: HTMLDivElement | undefined;
 
   $: slides = testimonials
     .map((testimonial) => wordpressTestimonials[testimonial.reviewer] ?? testimonial)
@@ -73,13 +76,37 @@
   }
 
   onMount(() => {
+    const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+    prefersReducedMotion = motionQuery.matches;
+    const onMotionChange = (event: MediaQueryListEvent) => {
+      prefersReducedMotion = event.matches;
+    };
+    motionQuery.addEventListener('change', onMotionChange);
+
+    const observer = carouselEl
+      ? new IntersectionObserver(
+          ([entry]) => {
+            inView = entry.isIntersecting;
+          },
+          { threshold: 0.25 }
+        )
+      : null;
+
+    if (observer && carouselEl) {
+      observer.observe(carouselEl);
+    }
+
     const interval = window.setInterval(() => {
-      if (!paused && slides.length > 1) {
+      if (!paused && !prefersReducedMotion && inView && slides.length > 1) {
         showNext();
       }
-    }, 5000);
+    }, 9000);
 
-    return () => window.clearInterval(interval);
+    return () => {
+      window.clearInterval(interval);
+      motionQuery.removeEventListener('change', onMotionChange);
+      observer?.disconnect();
+    };
   });
 </script>
 
@@ -96,11 +123,14 @@
 
     {#if slides.length}
       <div
+        bind:this={carouselEl}
         class="testimonials-carousel"
         role="region"
         aria-label="Customer testimonials"
         on:mouseenter={() => (paused = true)}
         on:mouseleave={() => (paused = false)}
+        on:focusin={() => (paused = true)}
+        on:focusout={() => (paused = false)}
       >
         <button
           class="testimonial-arrow testimonial-arrow-left"
@@ -140,7 +170,7 @@
 
               <div class="testimonial-copy">
                 <span class="testimonial-quote-mark">"</span>
-                <h5>{testimonial.quote}</h5>
+                <blockquote class="testimonial-quote">{testimonial.quote}</blockquote>
                 <div class="testimonial-author">
                   <span class="testimonial-author-name">{testimonial.reviewer}</span>
                   <span class="testimonial-author-detail">{testimonial.detail}</span>
@@ -344,7 +374,7 @@
     user-select: none;
   }
 
-  .testimonial-copy h5 {
+  .testimonial-copy .testimonial-quote {
     max-width: 500px;
     margin: 0;
     font-size: 17px;
@@ -500,7 +530,7 @@
       padding: 96px 72px 64px 8px;
     }
 
-    .testimonial-copy h5 {
+    .testimonial-copy .testimonial-quote {
       max-width: 460px;
       font-size: 17px;
     }
@@ -554,7 +584,7 @@
       margin-bottom: 8px;
     }
 
-    .testimonial-copy h5 {
+    .testimonial-copy .testimonial-quote {
       font-size: 16px;
       line-height: 1.55;
     }