ETT-1137, ETT-454: focus indicator changes

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;

pt/web/firebird/src/js/components/Reader/Page.svelte

@@ -39,9 +39,10 @@
   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 = false;
+  let focused = view === 'thumb' ? true : false;
   let invoked = false;
   let pageDiv;
 
@@ -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;
@@ -711,6 +713,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 +729,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}
@@ -751,7 +754,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%;
 
@@ -765,6 +768,11 @@ Delta: {xChokeDelta}{#if xChokeAllowed == 0}
 
     position: relative;
 
+    &:focus-visible {
+      outline-offset: 0px;
+    }
+
+
     // overflow: hidden;
 
     // // -- debug border
@@ -774,6 +782,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;
       }
@@ -794,11 +807,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 {
@@ -830,6 +849,7 @@ Delta: {xChokeDelta}{#if xChokeAllowed == 0}
 
     &.view-2up.recto :global {
       grid-area: recto;
+      padding-inline-start: .25rem;
 
       &.direction-rtl {
         .frame {
@@ -863,6 +883,10 @@ Delta: {xChokeDelta}{#if xChokeAllowed == 0}
       figure {
         --frameHeight: calc(250px * var(--actualZoom));
       }
+
+      .frame:focus-within .image {
+        outline-offset: -3px;
+      }
     }
 
     &.view-1up {
@@ -875,15 +899,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 {
@@ -917,6 +932,21 @@ Delta: {xChokeDelta}{#if xChokeAllowed == 0}
     //     max-width: 100%;
     //   }
     // }
+    &: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: 1px;
+      z-index: 3;
+      transition: unset;
+
+    }
+
+
 
     &.pending {
       .page-loader {
@@ -966,6 +996,7 @@ Delta: {xChokeDelta}{#if xChokeAllowed == 0}
         flex-grow: 0;
 
         transition: opacity 0.125s linear;
+
       }
     }
 

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;
     }
@@ -612,6 +613,9 @@
   .spread {
     display: contents;
   }
+  .inner {
+    padding: 1rem;
+  }
 
   .inner.view-1up {
     display: flex;