From b3545fd377a9004e7b1f8838fc7b21c22e374402 Mon Sep 17 00:00:00 2001
From: Kenneth Reitz <me@kennethreitz.org>
Date: Sat, 29 Nov 2025 23:55:56 -0500
Subject: [PATCH] Include kids callout in story page keyboard navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Up/down now includes the kids version callout box
- Enter on kids callout navigates to kids version
- Added Escape to clear selection

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 kjvstudy_org/templates/story_detail.html | 39 +++++++++++++++---------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/kjvstudy_org/templates/story_detail.html b/kjvstudy_org/templates/story_detail.html
index b61590e..eb45d45 100644
--- a/kjvstudy_org/templates/story_detail.html
+++ b/kjvstudy_org/templates/story_detail.html
@@ -350,23 +350,23 @@ hr.story-divider::before {
 
 <script>
 (function() {
-    // Collect paragraphs for up/down navigation
-    var paragraphs = Array.from(document.querySelectorAll('article section p'));
+    // Collect paragraphs and kids callout for up/down navigation
+    var elements = Array.from(document.querySelectorAll('article section p, .kids-callout'));
     var selectedIndex = -1;
 
-    function selectParagraph(index) {
+    function selectElement(index) {
         // Remove previous selection
-        if (selectedIndex >= 0 && selectedIndex < paragraphs.length) {
-            paragraphs[selectedIndex].style.outline = '';
-            paragraphs[selectedIndex].style.outlineOffset = '';
+        if (selectedIndex >= 0 && selectedIndex < elements.length) {
+            elements[selectedIndex].style.outline = '';
+            elements[selectedIndex].style.outlineOffset = '';
         }
 
-        selectedIndex = Math.max(0, Math.min(index, paragraphs.length - 1));
+        selectedIndex = Math.max(0, Math.min(index, elements.length - 1));
 
-        // Add selection to new paragraph
-        paragraphs[selectedIndex].style.outline = '2px solid #4a7c59';
-        paragraphs[selectedIndex].style.outlineOffset = '8px';
-        paragraphs[selectedIndex].scrollIntoView({ behavior: 'smooth', block: 'center' });
+        // Add selection to new element
+        elements[selectedIndex].style.outline = '2px solid #4a7c59';
+        elements[selectedIndex].style.outlineOffset = '8px';
+        elements[selectedIndex].scrollIntoView({ behavior: 'smooth', block: 'center' });
     }
 
     document.addEventListener('keydown', function(e) {
@@ -374,11 +374,11 @@ hr.story-divider::before {
 
         if (e.key === 'ArrowDown' || e.key === 'j') {
             e.preventDefault();
-            selectParagraph(selectedIndex < 0 ? 0 : selectedIndex + 1);
+            selectElement(selectedIndex < 0 ? 0 : selectedIndex + 1);
         } else if (e.key === 'ArrowUp' || e.key === 'k') {
             e.preventDefault();
-            if (selectedIndex <= 0) selectParagraph(0);
-            else selectParagraph(selectedIndex - 1);
+            if (selectedIndex <= 0) selectElement(0);
+            else selectElement(selectedIndex - 1);
         } else if (e.key === 'ArrowLeft' || e.key === 'h') {
             e.preventDefault();
             window.location.href = '/stories';
@@ -386,6 +386,17 @@ hr.story-divider::before {
             e.preventDefault();
             var nextLink = document.querySelector('.nav-next .nav-title');
             if (nextLink) window.location.href = nextLink.href;
+        } else if (e.key === 'Enter' && selectedIndex >= 0) {
+            e.preventDefault();
+            var link = elements[selectedIndex].querySelector('a');
+            if (link) window.location.href = link.href;
+        } else if (e.key === 'Escape') {
+            e.preventDefault();
+            if (selectedIndex >= 0 && selectedIndex < elements.length) {
+                elements[selectedIndex].style.outline = '';
+                elements[selectedIndex].style.outlineOffset = '';
+            }
+            selectedIndex = -1;
         }
     });
 })();