From ff9c19050082c5e6a47ca907bcc08d6167191b84 Mon Sep 17 00:00:00 2001
From: Kenrick Tandrian <kenricktan11@gmail.com>
Date: Mon, 22 Dec 2025 00:18:53 +0700
Subject: [PATCH] feat(a11y): enable sorting by visual order

---
 static/src/elements/santa-cardnav.js | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/static/src/elements/santa-cardnav.js b/static/src/elements/santa-cardnav.js
index 3a2acfe30..b071d0323 100644
--- a/static/src/elements/santa-cardnav.js
+++ b/static/src/elements/santa-cardnav.js
@@ -86,9 +86,8 @@ export class SantaCardNavElement extends LitElement {
     const available = [];
     const videos = config.videos();
 
-    const cardHtml = this.cards.map((sceneName, i) => {
-      const locked = config.lockedTo(sceneName);
-
+    // Calculate order for all cards
+    const cardsWithOrder = this.cards.map((sceneName) => {
       const isVideo = videos.indexOf(sceneName) !== -1;
 
       let order = currentOrder;
@@ -112,6 +111,15 @@ export class SantaCardNavElement extends LitElement {
         }
       }
 
+      return {sceneName, order, isVideo};
+    });
+
+    // Sort by visual order (for tab focus order)
+    cardsWithOrder.sort((a, b) => a.order - b.order);
+
+    // Render
+    const cardHtml = cardsWithOrder.map(({sceneName, order, isVideo}) => {
+      const locked = config.lockedTo(sceneName);
       const style = `transition-delay: ${0.2 + order * 0.05}s; order: ${order}`;
       return html`<santa-card style=${style} locked=${ifDefined(locked)} scene=${sceneName} .video=${isVideo} ?wide=${isVideo}></santa-card>`;
     });