fix(2312): make testimonial card work without JS (boostorg#2360)

Co-authored-by: Cristian Yáñez <cyanezc@ripley.com>

Author: ycanales

core/mock_data.py

@@ -198,39 +198,39 @@ class SharedResources:
 
     testimonials = [
         {
-            "quote": "I use Boost daily. I absolutely love it. It's wonderful. I could not do my job w/o it. Much of it is in the new C++11 standard too.",
+            "quote": "1 — I use Boost daily. I absolutely love it. It's wonderful. I could not do my job without it. Much of it is in the new C++11 standard too.",
             "author": {
-                "name": "Name Surname",
+                "name": "Ada Lovelace",
                 "profile_url": "#",
                 "avatar_url": "/static/img/v3/demo_page/Avatar.png",
                 "role": "Contributor",
                 "badge_url": "/static/img/v3/demo_page/Badge.svg",
             },
         },
         {
-            "quote": "I use Boost daily. I absolutely love it. It's wonderful. I could not do my job w/o it. Much of it is in the new C++11 standard too.",
+            "quote": "2 — Boost.Asio changed how I write networked services. The async model is elegant, the docs are thorough, and the community is incredibly responsive.",
             "author": {
-                "name": "Name Surname",
+                "name": "Grace Hopper",
                 "profile_url": "#",
                 "avatar_url": "/static/img/v3/demo_page/Avatar.png",
-                "role": "Contributor",
+                "role": "Maintainer",
                 "badge_url": "/static/img/v3/demo_page/Badge.svg",
             },
         },
         {
-            "quote": "I use Boost d1aily. I absolutely love it. It's wonderful. I could not do my job w/o it. Much of it is in the new C++11 standard too.",
+            "quote": "3 — Every serious C++ codebase I've worked on has leaned on Boost in some way. It's the proving ground where tomorrow's standard library takes shape.",
             "author": {
-                "name": "Name Surname",
+                "name": "Linus Torvalds",
                 "profile_url": "#",
                 "avatar_url": "/static/img/v3/demo_page/Avatar.png",
-                "role": "Contributor",
+                "role": "Reviewer",
                 "badge_url": "/static/img/v3/demo_page/Badge.svg",
             },
         },
         {
-            "quote": "I use Boost daily. I absolutely love it. It's wonderful. I could not do my job w/o it. Much of it is in the new C++11 standard too.",
+            "quote": "4 — Contributing to Boost taught me more about writing portable, peer-reviewed C++ than any textbook ever could.",
             "author": {
-                "name": "Name Surname",
+                "name": "Margaret Hamilton",
                 "profile_url": "#",
                 "avatar_url": "/static/img/v3/demo_page/Avatar.png",
                 "role": "Contributor",

static/css/v3/testimonial-card.css

@@ -126,3 +126,78 @@
 .testimonial-card__cards {
     max-width: 100%;
 }
+
+/*
+ * Carousel navigation uses hidden radios + <label> arrows so clicking an arrow
+ * doesn't change the URL or trigger scrollIntoView (which would scroll the
+ * page). The nav pair matching the currently-:checked radio is the only one
+ * shown. The track keeps `overflow-x: auto` so touch/swipe still works; JS
+ * syncs radio <-> scroll position. In no-JS mode the track is switched to
+ * `overflow: hidden` + CSS transform (see the <noscript> block in
+ * _testimonial_card.html), which trades touch scroll for a working arrow UI.
+ */
+.testimonial-card__state {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.testimonial-card__controls {
+    display: contents;
+}
+
+.testimonial-card .testimonial-card__nav-set {
+    display: none;
+}
+
+/* Per-index `display: inline-flex` overrides for the checked radio's nav-set
+   are generated in _testimonial_card.html (the testimonials count is
+   data-driven, so the rule set is rendered inline by the template). */
+
+.carousel-buttons label.btn-carousel {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: inherit;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.carousel-buttons .btn-carousel[aria-disabled="true"] {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+/* Focus mirroring: the radios are visually hidden but remain keyboard-focusable
+   (arrow keys move between them natively). When that happens we reflect focus
+   onto the currently-visible nav-set wrapper so keyboard users see where they
+   are. Outlining the wrapper (not each button) avoids two outlines colliding
+   on the adjacent prev/next pills. Only the nav-set matching the checked
+   radio is `display: inline-flex`; the others are `display: none`, so a
+   single rule suffices. */
+.testimonial-card:has(.testimonial-card__state:focus-visible) .testimonial-card__nav-set {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+    border-radius: 8px;
+}
+
+/* Scroll-snap: align items when the user swipes. JS uses smooth scroll on
+   arrow-click so we don't need scroll-behavior here.
+   `flex: 0 0 100%` forces each item to exactly the flex container width so
+   both native scroll and the no-JS transform math land on item boundaries. */
+.testimonial-card__list {
+    scroll-snap-type: x mandatory;
+}
+
+.testimonial-card__list-item {
+    scroll-snap-align: start;
+    flex: 0 0 100%;
+}

static/js/carousel.js

@@ -7,18 +7,33 @@
   const DEFAULT_AUTOPLAY_MS = 4000;
   const CAROUSEL_ITEM_SELECTOR = '[data-carousel-item]';
 
-  function updateArrowState(track, prevBtn, nextBtn) {
-    if (!track || !prevBtn || !nextBtn) return;
-    const maxScroll = track.scrollWidth - track.clientWidth;
-    if (maxScroll <= 0) {
-      prevBtn.disabled = true;
-      nextBtn.disabled = true;
-      return;
+  function setDisabled(btn, disabled) {
+    if (!btn) return;
+    if (btn.tagName === 'BUTTON') {
+      btn.disabled = disabled;
+    } else {
+      if (disabled) {
+        btn.setAttribute('aria-disabled', 'true');
+      } else {
+        btn.removeAttribute('aria-disabled');
+      }
     }
-    const atStart = track.scrollLeft <= 0;
-    const atEnd = track.scrollLeft >= maxScroll - SCROLL_END_EPSILON;
-    prevBtn.disabled = atStart;
-    nextBtn.disabled = atEnd;
+  }
+
+  function isDisabled(btn) {
+    if (!btn) return true;
+    if (btn.tagName === 'BUTTON') return btn.disabled;
+    return btn.getAttribute('aria-disabled') === 'true';
+  }
+
+  function updateArrowState(track, prevBtns, nextBtns) {
+    if (!track) return;
+    const maxScroll = track.scrollWidth - track.clientWidth;
+    const noScroll = maxScroll <= 0;
+    const atStart = !noScroll && track.scrollLeft <= 0;
+    const atEnd = !noScroll && track.scrollLeft >= maxScroll - SCROLL_END_EPSILON;
+    prevBtns.forEach(function (b) { setDisabled(b, noScroll || atStart); });
+    nextBtns.forEach(function (b) { setDisabled(b, noScroll || atEnd); });
   }
 
   function getStepPx(track) {
@@ -100,11 +115,12 @@
     });
 
     const controls = document.getElementById(root.id + '-controls');
-    const prevBtn = controls && controls.querySelector('[data-carousel-prev]');
-    const nextBtn = controls && controls.querySelector('[data-carousel-next]');
+    const prevBtns = controls ? controls.querySelectorAll('[data-carousel-prev]') : [];
+    const nextBtns = controls ? controls.querySelectorAll('[data-carousel-next]') : [];
 
-    if (prevBtn) {
-      prevBtn.addEventListener('click', function () {
+    prevBtns.forEach(function (prevBtn) {
+      prevBtn.addEventListener('click', function (e) {
+        e.preventDefault();
         if (track.scrollLeft < step) {
           scrollResetInProgress = true;
           track.scrollLeft = setWidth;
@@ -116,13 +132,14 @@
           scrollCarousel(track, 'prev', true);
         }
       });
-    }
+    });
 
-    if (nextBtn) {
-      nextBtn.addEventListener('click', function () {
+    nextBtns.forEach(function (nextBtn) {
+      nextBtn.addEventListener('click', function (e) {
+        e.preventDefault();
         scrollCarousel(track, 'next', true);
       });
-    }
+    });
 
     const autoplayDelay = root.getAttribute('data-carousel-autoplay');
     if (autoplayDelay) {
@@ -139,34 +156,87 @@
     }
   }
 
+  function setupRadioCarousel(root, track) {
+    const radios = root.querySelectorAll('input[type="radio"].testimonial-card__state');
+    if (radios.length === 0) return;
+    const items = track.querySelectorAll(CAROUSEL_ITEM_SELECTOR);
+
+    let scrolling = false;
+    let scrollTimeout = null;
+
+    function syncInert(activeIdx) {
+      items.forEach(function (item, i) {
+        if (i === activeIdx) item.removeAttribute('inert');
+        else item.setAttribute('inert', '');
+      });
+    }
+
+    const initialIdx = Array.prototype.findIndex.call(radios, function (r) { return r.checked; });
+    syncInert(initialIdx >= 0 ? initialIdx : 0);
+
+    radios.forEach(function (radio, idx) {
+      radio.addEventListener('change', function () {
+        if (!radio.checked) return;
+        syncInert(idx);
+        const target = items[idx];
+        if (!target) return;
+        scrolling = true;
+        target.scrollIntoView({ inline: 'start', block: 'nearest', behavior: 'smooth' });
+        clearTimeout(scrollTimeout);
+        scrollTimeout = setTimeout(function () { scrolling = false; }, 400);
+      });
+    });
+
+    track.addEventListener('scroll', function () {
+      if (scrolling) return;
+      const first = items[0];
+      if (!first) return;
+      const itemWidth = first.offsetWidth;
+      if (itemWidth === 0) return;
+      const idx = Math.round(track.scrollLeft / itemWidth);
+      const radio = radios[Math.max(0, Math.min(radios.length - 1, idx))];
+      if (radio && !radio.checked) {
+        radio.checked = true;
+        syncInert(idx);
+      }
+    }, { passive: true });
+  }
+
   function initCarousel(root) {
     if (!root || !root.id) return;
     const track = root.querySelector('[data-carousel-track]');
     const controls = document.getElementById(root.id + '-controls');
     if (!track || !controls) return;
 
+    if (root.hasAttribute('data-carousel-radios')) {
+      setupRadioCarousel(root, track);
+      return;
+    }
+
     if (root.hasAttribute('data-carousel-infinite')) {
       setupInfiniteCarousel(root, track);
       return;
     }
 
-    const prevBtn = controls.querySelector('[data-carousel-prev]');
-    const nextBtn = controls.querySelector('[data-carousel-next]');
-    if (prevBtn) {
-      prevBtn.addEventListener('click', function () {
-        if (prevBtn.disabled) return;
+    const prevBtns = controls.querySelectorAll('[data-carousel-prev]');
+    const nextBtns = controls.querySelectorAll('[data-carousel-next]');
+    prevBtns.forEach(function (prevBtn) {
+      prevBtn.addEventListener('click', function (e) {
+        e.preventDefault();
+        if (isDisabled(prevBtn)) return;
         scrollCarousel(track, 'prev', true);
       });
-    }
-    if (nextBtn) {
-      nextBtn.addEventListener('click', function () {
-        if (nextBtn.disabled) return;
+    });
+    nextBtns.forEach(function (nextBtn) {
+      nextBtn.addEventListener('click', function (e) {
+        e.preventDefault();
+        if (isDisabled(nextBtn)) return;
         scrollCarousel(track, 'next', true);
       });
-    }
+    });
 
     const syncArrows = function () {
-      updateArrowState(track, prevBtn, nextBtn);
+      updateArrowState(track, prevBtns, nextBtns);
     };
     requestAnimationFrame(syncArrows);
     track.addEventListener('scroll', syncArrows, { passive: true });

templates/v3/includes/_testimonial_card.html

@@ -12,18 +12,78 @@
 {% endcomment %}
 
 {% with carousel_id='_testimonials_cards_carousel' %}
-<div class="card testimonial-card py-large" id="{{carousel_id}}" data-carousel role="region" aria-labelledby="{{ carousel_id }}-heading">
+{% comment %}
+  Per-index visibility rules generated from the testimonials list (the count is
+  data-driven, so they can't live as static rules in the CSS). The first <style>
+  block runs in both JS and no-JS modes; only the nav-set for the checked radio
+  is shown. The <noscript> block additionally switches the track to a CSS
+  transform-based carousel: items are flex: 0 0 100% with gap: 0, so
+  translateX(-N00%) shifts by exactly one item per radio. visibility: hidden on
+  non-current items mirrors the JS-mode `inert` behavior so off-screen author
+  links can't receive tab focus. Touch-swipe is lost in no-JS mode (the parent
+  `.testimonial-card__post` clips with overflow: hidden) but arrow buttons work
+  without scrolling the page.
+{% endcomment %}
+{% if testimonials %}
+  <style>
+    {% for testimonial in testimonials %}
+      .testimonial-card:has(.testimonial-card__state[data-state-index="{{ forloop.counter0 }}"]:checked) .testimonial-card__nav-set[data-nav-index="{{ forloop.counter0 }}"] { display: inline-flex; }
+    {% endfor %}
+  </style>
+  <noscript>
+    <style>
+      .testimonial-card__list { overflow: visible !important; gap: 0 !important; transition: transform 0.3s ease; }
+      .testimonial-card__list-item { visibility: hidden; }
+
+      {% for testimonial in testimonials %}
+        .testimonial-card:has(.testimonial-card__state[data-state-index="{{ forloop.counter0 }}"]:checked) .testimonial-card__list { transform: translateX(-{{ forloop.counter0 }}00%); }
+        .testimonial-card:has(.testimonial-card__state[data-state-index="{{ forloop.counter0 }}"]:checked) .testimonial-card__list-item[data-item-index="{{ forloop.counter0 }}"] { visibility: visible; }
+      {% endfor %}
+    </style>
+  </noscript>
+{% endif %}
+<div class="card testimonial-card py-large" id="{{carousel_id}}" data-carousel data-carousel-radios role="region" aria-labelledby="{{ carousel_id }}-heading">
+  {% if testimonials %}
+    {% for testimonial in testimonials %}
+      <input type="radio" class="testimonial-card__state" name="{{ carousel_id }}-state" id="{{ carousel_id }}-state-{{ forloop.counter0 }}" data-state-index="{{ forloop.counter0 }}" {% if forloop.first %}checked{% endif %}>
+    {% endfor %}
+  {% endif %}
   <div class="card__header">
     <h2 id="{{ carousel_id }}-heading" class="card__title">{{ heading }}</h2>
-    {% include 'v3/includes/_carousel_buttons.html' with carousel_id=carousel_id %}
+    {% if testimonials %}
+      <div class="testimonial-card__controls" id="{{ carousel_id }}-controls" role="group" aria-label="Carousel navigation">
+        {% for testimonial in testimonials %}
+          <div class="carousel-buttons testimonial-card__nav-set" data-nav-index="{{ forloop.counter0 }}">
+            {% if forloop.first %}
+              <span class="btn btn-carousel" aria-disabled="true" aria-label="Previous" data-carousel-prev>
+                <span class="btn-icon" aria-hidden>{% include "includes/icon.html" with icon_name="chevron-left" icon_size=12 %}</span>
+              </span>
+            {% else %}
+              <label class="btn btn-carousel" for="{{ carousel_id }}-state-{{ forloop.counter0|add:"-1" }}" aria-label="Previous" data-carousel-prev>
+                <span class="btn-icon" aria-hidden>{% include "includes/icon.html" with icon_name="chevron-left" icon_size=12 %}</span>
+              </label>
+            {% endif %}
+            {% if forloop.last %}
+              <span class="btn btn-carousel" aria-disabled="true" aria-label="Next" data-carousel-next>
+                <span class="btn-icon" aria-hidden>{% include "includes/icon.html" with icon_name="chevron-right" icon_size=12 %}</span>
+              </span>
+            {% else %}
+              <label class="btn btn-carousel" for="{{ carousel_id }}-state-{{ forloop.counter }}" aria-label="Next" data-carousel-next>
+                <span class="btn-icon" aria-hidden>{% include "includes/icon.html" with icon_name="chevron-right" icon_size=12 %}</span>
+              </label>
+            {% endif %}
+          </div>
+        {% endfor %}
+      </div>
+    {% endif %}
   </div>
   <hr class="card__hr" />
   <div class="cards-carousel__track">
     <section class="testimonial-card__post">
       <ul class="testimonial-card__list" data-carousel-track aria-label="Testimonials carousel">
           {% if testimonials %}
             {% for testimonial in testimonials %}
-              <li class="testimonial-card__list-item" data-carousel-item>
+              <li class="testimonial-card__list-item" data-carousel-item data-item-index="{{ forloop.counter0 }}">
                 <div>
                   <div class="testimonial-card__text-wrapper">
                     <div class="testimonial-card__text">{{ testimonial.quote }}</div>