@phantompixeldev/retrocss 3.0.1 → 3.1.0

package/dist/retro.js

@@ -494,7 +494,6 @@
       root.querySelectorAll(".retro-file-upload").forEach((upload) => {
         const input = upload.querySelector(".retro-file-input");
         const display = upload.querySelector(".retro-file-filename, .retro-file-display");
-        const label = upload.querySelector(".retro-file-label");
         const drop = upload.querySelector(".retro-file-drop");
         if (!input || !display) return;
         input.addEventListener("change", function() {
@@ -507,12 +506,6 @@
             upload.classList.remove("has-files");
           }
         });
-        if (label) {
-          label.addEventListener("click", (e) => {
-            e.preventDefault();
-            input.click();
-          });
-        }
         if (drop) {
           drop.addEventListener("click", (e) => {
             e.preventDefault();
@@ -603,7 +596,8 @@
         newDotsContainer.className = "retro-carousel-dots";
         this.root.appendChild(newDotsContainer);
         for (let i = 0; i < this.slides.length; i++) {
-          const dot = document.createElement("div");
+          const dot = document.createElement("button");
+          dot.type = "button";
           dot.className = "retro-carousel-dot";
           dot.setAttribute("data-index", i);
           newDotsContainer.appendChild(dot);
@@ -626,7 +620,36 @@
         dot.addEventListener("click", () => {
           this.goTo(i);
         });
+        if (!dot.hasAttribute("aria-label")) {
+          dot.setAttribute("aria-label", `Go to slide ${i + 1} of ${this.slides.length}`);
+        }
+        if (dot.tagName !== "BUTTON") {
+          if (!dot.hasAttribute("role")) dot.setAttribute("role", "button");
+          if (!dot.hasAttribute("tabindex")) dot.tabIndex = 0;
+          dot.addEventListener("keydown", (e) => {
+            if (e.key === " " || e.key === "Enter") {
+              e.preventDefault();
+              dot.click();
+            }
+          });
+        }
+      });
+      this.root.addEventListener("keydown", (e) => {
+        if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+        if (e.target.closest("input, textarea, select, [contenteditable]")) return;
+        e.preventDefault();
+        this.goTo(this.current + (e.key === "ArrowLeft" ? -1 : 1));
       });
+      if (this.track && !this.track.hasAttribute("aria-live")) {
+        this.track.setAttribute("aria-live", "polite");
+        this.track.setAttribute("aria-atomic", "false");
+      }
+      if (!this.root.hasAttribute("role")) {
+        this.root.setAttribute("role", "group");
+        if (!this.root.hasAttribute("aria-label")) {
+          this.root.setAttribute("aria-label", "Carousel");
+        }
+      }
       this.goTo(0);
       let startX, moveX;
       this.root.addEventListener("touchstart", (e) => {
@@ -660,6 +683,8 @@
       }
       this.dots.forEach((dot, i) => {
         dot.classList.toggle("active", i === idx);
+        if (i === idx) dot.setAttribute("aria-current", "true");
+        else dot.removeAttribute("aria-current");
       });
     };
     RetroCarousel.init = function() {
@@ -711,18 +736,37 @@
             e.preventDefault();
             this.activateTab(index);
           }
+          let newIndex = null;
           if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
-            e.preventDefault();
             const direction = e.key === "ArrowLeft" ? -1 : 1;
-            let newIndex = index + direction;
+            newIndex = index + direction;
             if (newIndex < 0) newIndex = this.tabs.length - 1;
             if (newIndex >= this.tabs.length) newIndex = 0;
+          } else if (e.key === "Home") {
+            newIndex = 0;
+          } else if (e.key === "End") {
+            newIndex = this.tabs.length - 1;
+          }
+          if (newIndex !== null) {
+            e.preventDefault();
+            this.setTabStop(newIndex);
             this.tabs[newIndex].focus();
           }
         });
       });
       this.activateTab(this.options.defaultTab);
     }
+    /**
+     * Roving tabindex: exactly one tab is in the page tab order at a time.
+     * Every tab used to be tabindex=0, so Tab walked through all of them one by
+     * one instead of stepping over the tablist and into the panel -- twelve
+     * stops on the demo page before the content.
+     */
+    setTabStop(index) {
+      this.tabs.forEach((tab, i) => {
+        tab.tabIndex = i === index ? 0 : -1;
+      });
+    }
     activateTab(index) {
       this.tabs.forEach((tab) => {
         tab.classList.remove(this.options.activeClass);
@@ -730,6 +774,7 @@
       });
       this.tabs[index].classList.add(this.options.activeClass);
       this.tabs[index].setAttribute("aria-selected", "true");
+      this.setTabStop(index);
       var visibleContent = null;
       for (var i = 0; i < this.contentElements.length; i++) {
         if (this.contentElements[i].style.display === "block") {
@@ -1020,13 +1065,28 @@
   });
 
   // src/js/retro.js
-  function readStoredTheme() {
+  var FOCUSABLE_SELECTOR = 'a[href],area[href],button:not([disabled]),input:not([disabled]):not([type="hidden"]),select:not([disabled]),textarea:not([disabled]),iframe,[contenteditable]:not([contenteditable="false"]),[tabindex]:not([tabindex="-1"])';
+  var tooltipSeq = 0;
+  function storedTheme() {
+    try {
+      return localStorage.getItem("retro-theme");
+    } catch (e) {
+      return null;
+    }
+  }
+  function storeTheme(theme) {
     try {
-      return localStorage.getItem("retro-theme") || "light";
+      localStorage.setItem("retro-theme", theme);
     } catch (e) {
-      return "light";
     }
   }
+  function systemTheme() {
+    if (typeof window === "undefined" || !window.matchMedia) return null;
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  function readStoredTheme() {
+    return storedTheme() || systemTheme() || "light";
+  }
   var RetroCSS = {
     modal: modal_default,
     toast: toast_default,
@@ -1072,6 +1132,7 @@
       this.initSearchBars();
       this.initTagInputs();
       this.initThemeToggle();
+      this.initSystemThemeWatch();
       this.applyTheme(this.theme);
       events_default.emit("init", { timestamp: Date.now() });
       this.initRatingStars();
@@ -1093,11 +1154,28 @@
         if (existingTooltip) existingTooltip.remove();
         trigger.style.position = "relative";
         trigger.appendChild(tooltip);
-        trigger.addEventListener("mouseenter", () => {
-          tooltip.classList.add("show");
-        });
-        trigger.addEventListener("mouseleave", () => {
-          tooltip.classList.remove("show");
+        tooltip.setAttribute("role", "tooltip");
+        if (!tooltip.id) {
+          tooltipSeq += 1;
+          tooltip.id = `retro-tooltip-${tooltipSeq}`;
+        }
+        const describedBy = trigger.getAttribute("aria-describedby");
+        if (!describedBy) {
+          trigger.setAttribute("aria-describedby", tooltip.id);
+        } else if (!describedBy.split(/\s+/).includes(tooltip.id)) {
+          trigger.setAttribute("aria-describedby", `${describedBy} ${tooltip.id}`);
+        }
+        if (!trigger.matches(FOCUSABLE_SELECTOR) && !trigger.hasAttribute("tabindex")) {
+          trigger.tabIndex = 0;
+        }
+        const show = () => tooltip.classList.add("show");
+        const hide = () => tooltip.classList.remove("show");
+        trigger.addEventListener("mouseenter", show);
+        trigger.addEventListener("mouseleave", hide);
+        trigger.addEventListener("focus", show);
+        trigger.addEventListener("blur", hide);
+        trigger.addEventListener("keydown", (e) => {
+          if (e.key === "Escape") hide();
         });
       });
     },
@@ -1168,6 +1246,19 @@
           tags.push(tagText);
           const removeBtn = tag.querySelector(".retro-tag-remove");
           if (removeBtn) {
+            if (removeBtn.tagName !== "BUTTON") {
+              removeBtn.setAttribute("role", "button");
+              if (!removeBtn.hasAttribute("tabindex")) removeBtn.tabIndex = 0;
+              removeBtn.addEventListener("keydown", (e) => {
+                if (e.key === " " || e.key === "Enter") {
+                  e.preventDefault();
+                  removeBtn.click();
+                }
+              });
+            }
+            if (!removeBtn.hasAttribute("aria-label")) {
+              removeBtn.setAttribute("aria-label", `Remove ${tagText}`);
+            }
             removeBtn.addEventListener("click", () => {
               tag.remove();
               const index = tags.indexOf(tagText);
@@ -1186,9 +1277,11 @@
           const tag = document.createElement("span");
           tag.className = "retro-tag";
           tag.textContent = tagText;
-          const removeBtn = document.createElement("span");
+          const removeBtn = document.createElement("button");
+          removeBtn.type = "button";
           removeBtn.className = "retro-tag-remove";
           removeBtn.textContent = "\xD7";
+          removeBtn.setAttribute("aria-label", `Remove ${tagText}`);
           removeBtn.addEventListener("click", () => {
             tag.remove();
             const index = tags.indexOf(tagText);
@@ -1222,13 +1315,31 @@
         toggle.addEventListener("click", () => {
           this.theme = this.theme === "light" ? "dark" : "light";
           this.applyTheme(this.theme);
-          localStorage.setItem("retro-theme", this.theme);
+          storeTheme(this.theme);
           toast_default.show(`Theme switched to ${this.theme} mode!`, {
             type: this.theme === "dark" ? "primary" : "light"
           });
         });
       });
     },
+    /**
+     * Follow the OS while the visitor has expressed no preference of their own.
+     * Once the toggle has been used, that choice is stored and this stops
+     * applying -- flipping the system theme must not silently undo a deliberate
+     * choice.
+     */
+    initSystemThemeWatch() {
+      if (typeof window === "undefined" || !window.matchMedia) return;
+      const query = window.matchMedia("(prefers-color-scheme: dark)");
+      const onChange = (e) => {
+        if (storedTheme()) return;
+        this.theme = e.matches ? "dark" : "light";
+        this.applyTheme(this.theme);
+        events_default.emit("themechange", { theme: this.theme, source: "system" });
+      };
+      if (query.addEventListener) query.addEventListener("change", onChange);
+      else if (query.addListener) query.addListener(onChange);
+    },
     // Apply theme to document
     applyTheme(theme) {
       if (theme === "dark") {
@@ -1237,36 +1348,81 @@
         document.documentElement.removeAttribute("data-theme");
       }
     },
-    // Interactive rating stars
+    /**
+     * Interactive rating stars, on the ARIA radiogroup pattern.
+     *
+     * These were five <span>s wired to mouseenter/mouseleave/click: an input a
+     * keyboard user could not reach, let alone set, with no role and no state to
+     * announce. The markup is unchanged -- the roles, tabindex and key handling
+     * are added here, so existing pages get the fix without editing their HTML.
+     */
     initRatingStars() {
-      const ratings = document.querySelectorAll(".retro-rating");
-      ratings.forEach((rating) => {
-        const stars = rating.querySelectorAll(".retro-rating-star");
-        let selected = -1;
-        if (rating.hasAttribute("data-rating")) {
-          selected = parseInt(rating.getAttribute("data-rating")) - 1;
+      document.querySelectorAll(".retro-rating").forEach((rating) => {
+        if (rating.dataset.retroRatingBound === "true") return;
+        rating.dataset.retroRatingBound = "true";
+        const stars = Array.from(rating.querySelectorAll(".retro-rating-star"));
+        if (!stars.length) return;
+        const max = stars.length;
+        const readValue = () => parseInt(rating.getAttribute("data-rating"), 10) || 0;
+        rating.setAttribute("role", "radiogroup");
+        if (!rating.hasAttribute("aria-label") && !rating.hasAttribute("aria-labelledby")) {
+          rating.setAttribute("aria-label", `Rating out of ${max}`);
+        }
+        const render = (value, previewOnly) => {
           stars.forEach((star, i) => {
-            if (i <= selected) star.classList.add("selected");
+            star.classList.toggle("active", previewOnly !== void 0 && i <= previewOnly);
+            if (previewOnly === void 0) star.classList.remove("active");
+            star.classList.toggle("selected", i < value);
+            star.setAttribute("aria-checked", String(i === value - 1));
+            star.tabIndex = i === (value > 0 ? value - 1 : 0) ? 0 : -1;
           });
-        }
+        };
+        const select = (index, focus) => {
+          const value = index + 1;
+          rating.setAttribute("data-rating", String(value));
+          render(value);
+          if (focus) stars[index].focus();
+          rating.dispatchEvent(
+            new CustomEvent("retro:rating", { detail: { rating: value, max }, bubbles: true })
+          );
+        };
         stars.forEach((star, idx) => {
-          star.addEventListener("mouseenter", () => {
-            stars.forEach((s, i) => {
-              s.classList.toggle("active", i <= idx);
-            });
-          });
-          star.addEventListener("mouseleave", () => {
-            stars.forEach((s) => s.classList.remove("active"));
-          });
-          star.addEventListener("click", () => {
-            selected = idx;
-            stars.forEach((s, i) => {
-              s.classList.toggle("selected", i <= idx);
-            });
-            rating.setAttribute("data-rating", idx + 1);
-            rating.dispatchEvent(new CustomEvent("retro:rating", { detail: { rating: idx + 1 } }));
+          star.setAttribute("role", "radio");
+          star.setAttribute("aria-label", `${idx + 1} of ${max}`);
+          star.addEventListener("mouseenter", () => render(readValue(), idx));
+          star.addEventListener("mouseleave", () => render(readValue()));
+          star.addEventListener("click", () => select(idx));
+          star.addEventListener("keydown", (e) => {
+            const current = readValue() - 1;
+            const clamp = (n) => Math.max(0, Math.min(max - 1, n));
+            let next;
+            switch (e.key) {
+              case "ArrowRight":
+              case "ArrowDown":
+                next = clamp(current + 1);
+                break;
+              case "ArrowLeft":
+              case "ArrowUp":
+                next = current < 0 ? 0 : clamp(current - 1);
+                break;
+              case "Home":
+                next = 0;
+                break;
+              case "End":
+                next = max - 1;
+                break;
+              case " ":
+              case "Enter":
+                next = idx;
+                break;
+              default:
+                return;
+            }
+            e.preventDefault();
+            select(next, true);
           });
         });
+        render(readValue());
       });
     }
   };