♿ focus management for issues

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;

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

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 %}

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) }}">