From da303de1bc4ccb8589806cbb49a2f4a8e7c03036 Mon Sep 17 00:00:00 2001
From: gnacho <hnacho@proton.me>
Date: Thu, 29 Oct 2026 08:00:41 +0100
Subject: [PATCH] fix(landing): label the slider thumbnails and make the
 comparison table reachable

---
 landing/app.js     | 17 +++++++++++++++++
 landing/i18n.js    |  2 ++
 landing/index.html | 10 +++++-----
 landing/styles.css |  1 +
 4 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/landing/app.js b/landing/app.js
index 702a6dc..ba8d8c3 100644
--- a/landing/app.js
+++ b/landing/app.js
@@ -56,10 +56,14 @@
 
   function renderThumbs() {
     thumbs.innerHTML = "";
+    var dict = I18N[lang] || I18N.es;
     activeSlides().forEach(function (s, i) {
       var b = document.createElement("button");
       b.setAttribute("role", "tab");
       b.setAttribute("aria-selected", i === slideIndex ? "true" : "false");
+      b.setAttribute("aria-controls", "slideViewport");
+      b.setAttribute("aria-label", dict[s.cap] || "");
+      b.tabIndex = i === slideIndex ? 0 : -1;
       var img = document.createElement("img");
       img.src = s.src; img.alt = ""; img.loading = "lazy"; img.decoding = "async";
       img.width = 96; img.height = 64;
@@ -82,6 +86,7 @@
     slideCaption.textContent = (I18N[lang] || I18N.es)[s.cap] || "";
     [...thumbs.children].forEach(function (b, j) {
       b.setAttribute("aria-selected", j === slideIndex ? "true" : "false");
+      b.tabIndex = j === slideIndex ? 0 : -1;
     });
   }
 
@@ -118,6 +123,18 @@
     }, 180);
   }
 
+  // Arrow keys move between screenshots, the way a tablist behaves.
+  thumbs.addEventListener("keydown", function (e) {
+    var keys = ["ArrowLeft", "ArrowRight", "Home", "End"];
+    if (keys.indexOf(e.key) === -1) return;
+    e.preventDefault();
+    var n = activeSlides().length;
+    var next = e.key === "Home" ? 0 : e.key === "End" ? n - 1 : slideIndex + (e.key === "ArrowRight" ? 1 : -1);
+    showSlide(next, e.key === "ArrowLeft" || e.key === "Home" ? -1 : 1);
+    var btn = thumbs.children[mod(next, n)];
+    if (btn) btn.focus();
+  });
+
   document.getElementById("slidePrev").addEventListener("click", function () { showSlide(slideIndex - 1, -1); });
   document.getElementById("slideNext").addEventListener("click", function () { showSlide(slideIndex + 1, 1); });
 
diff --git a/landing/i18n.js b/landing/i18n.js
index 4a053f7..e19727f 100644
--- a/landing/i18n.js
+++ b/landing/i18n.js
@@ -53,6 +53,7 @@ const I18N = {
     "shots.capDark": "Ventana principal, tema oscuro",
     "shots.alt": "Ventana principal de NextSync",
     "compare.title": "El compañero GNOME que faltaba",
+    "compare.tableLabel": "Tabla comparativa",
     "compare.lead": "Comparativa con los clientes de escritorio oficiales, contrastada el 20 de agosto de 2026 contra sus repos públicos.",
     "compare.h0": "Función",
     "compare.r1": "Interfaz nativa GNOME (GTK 4 / Libadwaita)",
@@ -153,6 +154,7 @@ const I18N = {
     "shots.capDark": "Main window, dark theme",
     "shots.alt": "NextSync main window",
     "compare.title": "The GNOME companion that was missing",
+    "compare.tableLabel": "Comparison table",
     "compare.lead": "Compared with the official desktop clients, checked on August 20, 2026 against their public repos.",
     "compare.h0": "Feature",
     "compare.r1": "GNOME-native interface (GTK 4 / Libadwaita)",
diff --git a/landing/index.html b/landing/index.html
index 3566867..f02ae62 100644
--- a/landing/index.html
+++ b/landing/index.html
@@ -26,7 +26,7 @@
   <meta name="twitter:image" content="https://nextsync.cloudless.club/og.png" />
   <link rel="icon" type="image/svg+xml" href="assets/icon.svg" />
   <link rel="preload" href="assets/fonts/inter-latin.woff2" as="font" type="font/woff2" crossorigin />
-  <link rel="stylesheet" href="styles.css?v=8" />
+  <link rel="stylesheet" href="styles.css?v=9" />
   <script type="application/ld+json">
   {
     "@context": "https://schema.org",
@@ -171,7 +171,7 @@ <h2 class="reveal" data-i18n="features.title">Lo que hace por ti</h2>
       <h2 class="reveal" data-i18n="shots.title">Un vistazo a la interfaz</h2>
       <p class="lead reveal" data-i18n="shots.lead">Capturas reales de la app, en los dos idiomas y los dos temas.</p>
       <div class="slider reveal" id="slider">
-        <div class="slider-viewport">
+        <div class="slider-viewport" id="slideViewport" role="tabpanel">
           <img id="slideImg" src="assets/shots/main-es-light.webp" alt="Ventana principal de NextSync" data-i18n-alt="shots.alt" width="1800" height="1200" draggable="false" />
         </div>
         <button class="slider-arrow prev" id="slidePrev" aria-label="Captura anterior" data-i18n-aria="shots.prev">&#10094;</button>
@@ -184,7 +184,7 @@ <h2 class="reveal" data-i18n="shots.title">Un vistazo a la interfaz</h2>
     <section class="block" id="compare"><div class="container">
       <h2 class="reveal" data-i18n="compare.title">El compañero GNOME que faltaba</h2>
       <p class="lead reveal" data-i18n="compare.lead">Comparativa con los clientes de escritorio oficiales, contrastada el 20 de agosto de 2026 contra sus repos públicos.</p>
-      <div class="table-wrap reveal"><table class="matrix">
+      <div class="table-wrap reveal" role="region" tabindex="0" aria-label="Tabla comparativa" data-i18n-aria="compare.tableLabel"><table class="matrix">
         <thead><tr>
           <th data-i18n="compare.h0"></th><th>NextSync</th><th>Nextcloud Desktop</th><th>OpenCloud Desktop</th>
         </tr></thead>
@@ -260,7 +260,7 @@ <h2 class="reveal" data-i18n="about.title">Por qué existe</h2>
   </dialog>
 
   <script defer src="https://stat.domatix.com/script.js" data-website-id="0fd3377e-8bba-4651-96e4-82faee5896be"></script>
-  <script src="i18n.js?v=8"></script>
-  <script src="app.js?v=8"></script>
+  <script src="i18n.js?v=9"></script>
+  <script src="app.js?v=9"></script>
 </body>
 </html>
diff --git a/landing/styles.css b/landing/styles.css
index 025013e..b2dbf39 100644
--- a/landing/styles.css
+++ b/landing/styles.css
@@ -261,6 +261,7 @@ a:hover { text-decoration: underline; }
 
 /* ---------- Comparativa ---------- */
 .table-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
+.table-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 .matrix { width: 100%; border-collapse: collapse; background: var(--card); font-size: 0.98rem; }
 .matrix th, .matrix td { padding: 0.9rem 1.1rem; text-align: left; border-bottom: 1px solid var(--card-border); }
 .matrix thead th { font-weight: 700; background: var(--btn-bg); }