From eddffe78f0d782ed8ca8d117933aeb5457f7f818 Mon Sep 17 00:00:00 2001
From: Caryl Wyatt <carylw@hathitrust.org>
Date: Tue, 5 May 2026 16:50:16 -0400
Subject: [PATCH 1/8] ETT-454: fix thumbnail focus functionality and styles

---
 pt/web/firebird/src/js/components/Reader/Page.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/pt/web/firebird/src/js/components/Reader/Page.svelte b/pt/web/firebird/src/js/components/Reader/Page.svelte
index c4d3f23fc..fd14f0022 100644
--- a/pt/web/firebird/src/js/components/Reader/Page.svelte
+++ b/pt/web/firebird/src/js/components/Reader/Page.svelte
@@ -41,7 +41,7 @@
 
   let includePageText = view != 'thumb';
 
-  let focused = false;
+  let focused = view === 'thumb' ? true : false;
   let invoked = false;
   let pageDiv;
 
@@ -863,6 +863,10 @@ Delta: {xChokeDelta}{#if xChokeAllowed == 0}
       figure {
         --frameHeight: calc(250px * var(--actualZoom));
       }
+
+      .frame:focus-within .image {
+        outline-offset: -3px;
+      }
     }
 
     &.view-1up {

From 055454598998b9ab87401f334fa553ecab708a79 Mon Sep 17 00:00:00 2001
From: Caryl Wyatt <carylw@hathitrust.org>
Date: Wed, 11 Mar 2026 13:42:51 -0400
Subject: [PATCH 2/8] fix focus style for image container, still need to fix
 focus on figure

---
 pt/web/firebird/src/js/components/Reader/Page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pt/web/firebird/src/js/components/Reader/Page.svelte b/pt/web/firebird/src/js/components/Reader/Page.svelte
index fd14f0022..d487a6f79 100644
--- a/pt/web/firebird/src/js/components/Reader/Page.svelte
+++ b/pt/web/firebird/src/js/components/Reader/Page.svelte
@@ -751,7 +751,7 @@ Delta: {xChokeDelta}{#if xChokeAllowed == 0}
     --defaultPageHeight: calc(var(--vh) - ((var(--stage-header-height) + var(--paddingBottom, 0)) * 1px));
     --actualPageHeight: var(--scanHeight, var(--defaultPageHeight));
     --actualZoom: var(--zoom, 1);
-    height: calc(clamp(var(--clampHeight), var(--defaultPageHeight), var(--defaultPageHeight)) * var(--actualZoom, 1));
+    height: calc((clamp(var(--clampHeight), var(--defaultPageHeight), var(--defaultPageHeight)) * var(--actualZoom, 1)) + 8px);
     width: 100%;
     max-width: 100%;
 

From 61b66b1f1121612b718802cc31b746da901b0d5e Mon Sep 17 00:00:00 2001
From: Caryl Wyatt <carylw@hathitrust.org>
Date: Thu, 30 Apr 2026 14:54:48 -0400
Subject: [PATCH 3/8] add spacing and update focus indicator styles

---
 pt/web/firebird/src/js/App.svelte             |  3 +++
 .../src/js/components/Reader/Page.svelte      | 26 ++++++++++++-------
 .../src/js/components/Reader/View.svelte      |  3 +++
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/pt/web/firebird/src/js/App.svelte b/pt/web/firebird/src/js/App.svelte
index 60475d872..534b544f5 100644
--- a/pt/web/firebird/src/js/App.svelte
+++ b/pt/web/firebird/src/js/App.svelte
@@ -515,6 +515,9 @@
 </dialog>
 
 <style lang="scss">
+  main:focus-visible {
+    outline-offset: -10px;
+  }
   .mousecatcher {
     position: absolute;
     left: 0;
diff --git a/pt/web/firebird/src/js/components/Reader/Page.svelte b/pt/web/firebird/src/js/components/Reader/Page.svelte
index d487a6f79..aa5f08abf 100644
--- a/pt/web/firebird/src/js/components/Reader/Page.svelte
+++ b/pt/web/firebird/src/js/components/Reader/Page.svelte
@@ -765,6 +765,10 @@ Delta: {xChokeDelta}{#if xChokeAllowed == 0}
 
     position: relative;
 
+    &:focus-visible {
+      outline-offset: 0px;
+    }
+
     // overflow: hidden;
 
     // // -- debug border
@@ -879,15 +883,6 @@ Delta: {xChokeDelta}{#if xChokeAllowed == 0}
       }
     }
 
-    &:focus-visible {
-      outline: 0;
-
-      .frame {
-        --bs-btn-focus-shadow-rgb: 66, 70, 73;
-        outline: 0;
-        box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
-      }
-    }
   }
 
   .frame {
@@ -921,6 +916,18 @@ Delta: {xChokeDelta}{#if xChokeAllowed == 0}
     //     max-width: 100%;
     //   }
     // }
+    &:focus-visible {
+      outline:none !important;
+      box-shadow:none;
+    }
+    &:focus-within .image {
+          outline: 3px solid #086ab4 !important;
+          box-shadow: 0 0 0 6px #fff;
+          outline-offset: 4px;
+          z-index: 3;
+          transition: unset;
+    }
+   
 
     &.pending {
       .page-loader {
@@ -970,6 +977,7 @@ Delta: {xChokeDelta}{#if xChokeAllowed == 0}
         flex-grow: 0;
 
         transition: opacity 0.125s linear;
+        
       }
     }
 
diff --git a/pt/web/firebird/src/js/components/Reader/View.svelte b/pt/web/firebird/src/js/components/Reader/View.svelte
index 9beab5914..65d6036f0 100644
--- a/pt/web/firebird/src/js/components/Reader/View.svelte
+++ b/pt/web/firebird/src/js/components/Reader/View.svelte
@@ -612,6 +612,9 @@
   .spread {
     display: contents;
   }
+  .inner {
+    padding: 1rem;
+  }
 
   .inner.view-1up {
     display: flex;

From 0ae7c3d98009413ad35923b885c47c5daf6bd358 Mon Sep 17 00:00:00 2001
From: Caryl Wyatt <carylw@hathitrust.org>
Date: Thu, 30 Apr 2026 15:57:48 -0400
Subject: [PATCH 4/8] fix plain-text view focus style

---
 .../firebird/src/js/components/Reader/Page.svelte  | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/pt/web/firebird/src/js/components/Reader/Page.svelte b/pt/web/firebird/src/js/components/Reader/Page.svelte
index aa5f08abf..e42ad2bf8 100644
--- a/pt/web/firebird/src/js/components/Reader/Page.svelte
+++ b/pt/web/firebird/src/js/components/Reader/Page.svelte
@@ -916,17 +916,19 @@ Delta: {xChokeDelta}{#if xChokeAllowed == 0}
     //     max-width: 100%;
     //   }
     // }
-    &:focus-visible {
+    &:focus-visible:not(.format-plaintext) {
       outline:none !important;
       box-shadow:none;
     }
+
     &:focus-within .image {
-          outline: 3px solid #086ab4 !important;
-          box-shadow: 0 0 0 6px #fff;
-          outline-offset: 4px;
-          z-index: 3;
-          transition: unset;
+      outline: 3px solid #086ab4 !important;
+      box-shadow: 0 0 0 6px #fff;
+      outline-offset: 1px;
+      z-index: 3;
+      transition: unset;
     }
+
    
 
     &.pending {

From 99b92372b6b3016aff487cebb3bda7ea78bb291f Mon Sep 17 00:00:00 2001
From: Caryl Wyatt <carylw@hathitrust.org>
Date: Tue, 12 May 2026 09:10:45 -0400
Subject: [PATCH 5/8] add aria-labelledby for figcaption

---
 pt/web/firebird/src/js/components/Reader/Page.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/pt/web/firebird/src/js/components/Reader/Page.svelte b/pt/web/firebird/src/js/components/Reader/Page.svelte
index e42ad2bf8..541e2de7f 100644
--- a/pt/web/firebird/src/js/components/Reader/Page.svelte
+++ b/pt/web/firebird/src/js/components/Reader/Page.svelte
@@ -711,6 +711,7 @@ Delta: {xChokeDelta}{#if xChokeAllowed == 0}
             data-loaded={isLoaded}
             alt=""
             class:zoomed={pageZoom > 1}
+            aria-labelledby="caption{seq}"
             on:load={() => {
               if (orient != 0) {
                 drawRotatedImage();
@@ -726,7 +727,7 @@ Delta: {xChokeDelta}{#if xChokeAllowed == 0}
         {/if}
       </div>
       {#if side != 'thumb'}
-        <figcaption class="visually-hidden" data-loaded="false" bind:this={figCaption}></figcaption>
+        <figcaption class="visually-hidden" data-loaded="false" id="caption{seq}" bind:this={figCaption}></figcaption>
       {/if}
     {:else if format == 'plaintext'}
       {#if !isLoaded}

From 22e73de839c3e68235c1f0a4f019fecf511442ab Mon Sep 17 00:00:00 2001
From: Caryl Wyatt <carylw@hathitrust.org>
Date: Tue, 12 May 2026 15:38:19 -0400
Subject: [PATCH 6/8] fix focus functionality

---
 pt/web/firebird/src/js/components/Reader/View.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pt/web/firebird/src/js/components/Reader/View.svelte b/pt/web/firebird/src/js/components/Reader/View.svelte
index 65d6036f0..b3af8c4c0 100644
--- a/pt/web/firebird/src/js/components/Reader/View.svelte
+++ b/pt/web/firebird/src/js/components/Reader/View.svelte
@@ -223,6 +223,7 @@
     if (max.seq > 0 && max.seq != $currentSeq) {
       $currentSeq = max.seq;
     } else if (Object.keys(tmpLocation).length > 0) {
+      focus($currentSeq);
       // currentLocation still needs to be set
       return;
     }

From 9bfa50a6b12912caa2d83f3650b558a26c893864 Mon Sep 17 00:00:00 2001
From: Caryl Wyatt <carylw@hathitrust.org>
Date: Tue, 12 May 2026 20:37:56 -0400
Subject: [PATCH 7/8] update focus indicator style

---
 .../firebird/src/js/components/Reader/Page.svelte  | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/pt/web/firebird/src/js/components/Reader/Page.svelte b/pt/web/firebird/src/js/components/Reader/Page.svelte
index 541e2de7f..04e093c50 100644
--- a/pt/web/firebird/src/js/components/Reader/Page.svelte
+++ b/pt/web/firebird/src/js/components/Reader/Page.svelte
@@ -770,6 +770,7 @@ Delta: {xChokeDelta}{#if xChokeAllowed == 0}
       outline-offset: 0px;
     }
 
+
     // overflow: hidden;
 
     // // -- debug border
@@ -779,6 +780,11 @@ Delta: {xChokeDelta}{#if xChokeAllowed == 0}
       margin-bottom: calc(var(--paddingBottom) * 1px);
       height: calc(clamp(var(--clampHeight), var(--defaultPageHeight), var(--defaultPageHeight)) * var(--zoom, 1));
 
+      &:focus-visible {
+        outline-offset: -4px;
+        z-index: 3 !important;
+      }
+
       &.zoomed {
         overflow: auto;
       }
@@ -799,11 +805,17 @@ Delta: {xChokeDelta}{#if xChokeAllowed == 0}
           max-width: none;
         }
       }
+      &:focus-within .image {
+        outline-offset: -3px;
+      }
+      
     }
 
     &.view-2up.verso :global {
+
       grid-area: verso;
       z-index: 1;
+      padding-inline-end: .25rem;
 
       &.direction-rtl {
         .frame {
@@ -835,6 +847,7 @@ Delta: {xChokeDelta}{#if xChokeAllowed == 0}
 
     &.view-2up.recto :global {
       grid-area: recto;
+      padding-inline-start: .25rem;
 
       &.direction-rtl {
         .frame {
@@ -928,6 +941,7 @@ Delta: {xChokeDelta}{#if xChokeAllowed == 0}
       outline-offset: 1px;
       z-index: 3;
       transition: unset;
+      
     }
 
    

From ca54514dbc46f63fd9dce6f937b6004e3d84641b Mon Sep 17 00:00:00 2001
From: Caryl Wyatt <carylw@hathitrust.org>
Date: Thu, 14 May 2026 15:24:48 -0400
Subject: [PATCH 8/8] include captions on thumbnail view

---
 pt/web/firebird/src/js/components/Reader/Page.svelte | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/pt/web/firebird/src/js/components/Reader/Page.svelte b/pt/web/firebird/src/js/components/Reader/Page.svelte
index 04e093c50..db1810b5b 100644
--- a/pt/web/firebird/src/js/components/Reader/Page.svelte
+++ b/pt/web/firebird/src/js/components/Reader/Page.svelte
@@ -39,7 +39,8 @@
   export let debugChoke = false;
   export let debugLoad = false;
 
-  let includePageText = view != 'thumb';
+  // boolean for excluding the text in captions for thumbnail view
+  // let includePageText = view != 'thumb';
 
   let focused = view === 'thumb' ? true : false;
   let invoked = false;
@@ -327,7 +328,7 @@
 
   let numPageTextLoaded = 0;
   export const loadPageText = function (reload = false) {
-    // console.log("-- page.loadImage", seq, isVisible, isLoaded);
+    console.log("-- page.loadImage", seq, isVisible, isLoaded);
     // return;
     if (debugLoad) {
       clearTimeout(loadPageTextTimeout);
@@ -349,9 +350,10 @@
       return;
     }
 
-    if (!includePageText) {
-      return;
-    }
+    // originally, thumbnail view excluded captions on images
+    // if (!includePageText) {
+    //   return;
+    // }
 
     if (figCaption && figCaption.dataset.loaded == 'true' && !reload) {
       return;