From 660e4a516f230491dbcc7e912f42b4e016eaa735 Mon Sep 17 00:00:00 2001
From: mi <hola@puercito.net>
Date: Fri, 14 Nov 2025 18:52:29 +1000
Subject: [PATCH] :wheelchair: focus management for issues

---
 static/css/style.css   | 5 +++++
 static/js/comic-nav.js | 6 ++++++
 templates/comic.html   | 2 +-
 templates/index.html   | 2 +-
 4 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index a5c7d3b..3693d51 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -414,6 +414,11 @@ main {
     background: var(--color-background);
 }
 
+/* Remove outline when comic image container is focused programmatically (for keyboard nav) */
+.comic-image:focus {
+    outline: none;
+}
+
 .comic-image a {
     display: block;
     cursor: pointer;
diff --git a/static/js/comic-nav.js b/static/js/comic-nav.js
index fbe0248..8ddcf90 100644
--- a/static/js/comic-nav.js
+++ b/static/js/comic-nav.js
@@ -124,6 +124,12 @@
 
         // Update URL without reload
         history.pushState({ comicId: comic.number }, '', `/comic/${comic.number}`);
+
+        // Move focus to comic image for keyboard navigation accessibility
+        const comicImageFocus = document.getElementById('comic-image-focus');
+        if (comicImageFocus) {
+            comicImageFocus.focus();
+        }
     }
 
     // Update or create comic image with optional mobile version
diff --git a/templates/comic.html b/templates/comic.html
index 5790e74..b60b5f0 100644
--- a/templates/comic.html
+++ b/templates/comic.html
@@ -16,7 +16,7 @@
     </div>
     {% endif %}
 
-    <div class="comic-image">
+    <div class="comic-image" id="comic-image-focus" tabindex="-1">
         {% if comic.number < total_comics %}
         <a href="{{ url_for('comic', comic_id=comic.number + 1) }}">
             {% if comic.mobile_filename %}
diff --git a/templates/index.html b/templates/index.html
index 9d5812f..45a42d1 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -16,7 +16,7 @@
         <p class="comic-date">{{ comic.date }}</p>
     </div>
 
-    <div class="comic-image">
+    <div class="comic-image" id="comic-image-focus" tabindex="-1">
         {% if comic.mobile_filename %}
         <picture>
             <source media="(max-width: 768px)" srcset="{{ url_for('static', filename='images/comics/' + comic.mobile_filename) }}">