pt a11y bug squashes

pt/web/firebird/src/js/components/AccessStatusPanel/EmergencyAccessAffiliate.svelte

@@ -40,7 +40,7 @@
 </script>
 
 <Panel {expanded} {onToggle} class="access-panel">
-  <i class="fa-solid fa-unlock" slot="icon"></i>
+  <i class="fa-solid fa-unlock" slot="icon" aria-hidden="true"></i>
   <slot:fragment slot="title">
     Checked out until <span class="expires-display">{expiresDisplay}</span>
   </slot:fragment>

pt/web/firebird/src/js/components/AccessStatusPanel/EnhancedTextUser.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <Panel {expanded} {onToggle} class="access-panel">
-  <i class="fa-solid fa-unlock" slot="icon"></i>
+  <i class="fa-solid fa-unlock" slot="icon" aria-hidden="true"></i>
   <slot:fragment slot="title"> In-Copyright Access </slot:fragment>
   <slot:fragment slot="body">
     <p class="fs-7">

pt/web/firebird/src/js/components/AccessStatusPanel/InLibraryUser.svelte

@@ -39,7 +39,7 @@
 </script>
 
 <Panel {expanded} {onToggle} class="access-panel">
-  <i class="fa-solid fa-unlock" slot="icon"></i>
+  <i class="fa-solid fa-unlock" slot="icon" aria-hidden="true"></i>
   <slot:fragment slot="title">
     Checked out until <span class="expires-display">{expiresDisplay}</span>
   </slot:fragment>

pt/web/firebird/src/js/components/AccessStatusPanel/ResourceSharingUser.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <Panel {expanded} {onToggle} class="access-panel">
-  <i class="fa-solid fa-lock-open" slot="icon"></i>
+  <i class="fa-solid fa-lock-open" slot="icon" aria-hidden="true"></i>
   <slot:fragment slot="title"> Registered Access </slot:fragment>
   <slot:fragment slot="subtitle">via Resource Sharing</slot:fragment>
   <slot:fragment slot="body">

pt/web/firebird/src/js/components/AccessStatusPanel/TotalAccessUser.svelte

@@ -10,7 +10,7 @@
 </script>
 
 <Panel {expanded} {onToggle} class="access-panel">
-  <i class="fa-solid fa-unlock" slot="icon"></i>
+  <i class="fa-solid fa-unlock" slot="icon" aria-hidden="true"></i>
   <slot:fragment slot="title">
     {#if accessType.role == 'ht_staff_user' || accessType.role == 'ht_total_user'}
       Collection Administration Access

pt/web/firebird/src/js/components/CollectionsPanel/index.svelte

@@ -144,7 +144,7 @@
 </script>
 
 <Panel parent="#controls">
-  <i class="fa-solid fa-bookmark" slot="icon"></i>
+  <i class="fa-solid fa-bookmark" slot="icon" aria-hidden="true"></i>
   <slot:fragment slot="title">Collections</slot:fragment>
   <slot:fragment slot="body">
     {#if userIsAnonymous}

pt/web/firebird/src/js/components/DownloadPanel/index.svelte

@@ -33,6 +33,7 @@
   let tunnelFormTracker;
   let tunnelFormAttempt = 0;
   let downloadInProgress = false;
+  let cancellingDownload = false;
   let trackerInterval;
   let progressUrl, downloadUrl, totalPages;
   let lastPercent;
@@ -66,6 +67,7 @@
       clearInterval(trackerInterval);
       trackerInterval = null;
       modal.hide();
+      document.getElementById('submit-download').focus();
     }
   }
 
@@ -140,6 +142,7 @@
       clearInterval(trackerInterval);
       trackerInterval = null;
     }
+    document.getElementById('submit-download').focus();
     // but we are not exiting!!
   }
 
@@ -149,6 +152,8 @@
       return;
     }
 
+    cancellingDownload = true;
+
     let cancelUrl = new URL(`${location.protocol}//${HT.service_domain}${action}`);
     let params = new URLSearchParams();
     params.set('id', manifest.id);
@@ -164,6 +169,9 @@
     tunnelWindow.document.body.appendChild(scriptEl);
 
     console.log('-- download.cancelDownload');
+    setTimeout(() => {
+      cancellingDownload = false;
+    }, 1000);
   }
 
   function submitDownload() {
@@ -341,12 +349,13 @@
   }
 
   let flattenedSelection = [];
-
+  $: clearSelectionLabel = 'Clear selection';
   $: action = buildAction(format, range, targetPPI);
   $: if ((format == 'plaintext-zip' || format == 'epub') && range != 'volume') {
     range = 'volume';
   }
   $: if (flattenSelection($selected)) {
+    clearSelectionLabel = `Clear selected scans: ${flattenedSelection.join(', ')}`;
     range = 'selected-pages';
   }
   $: meta = manifest.meta($currentSeq);
@@ -590,8 +599,8 @@
               <button
                 class="btn btn-outline-dark align-self-start"
                 type="button"
-                aria-label="Clear selection"
-                use:tooltippy
+                aria-label={clearSelectionLabel}
+                use:tooltippy={{ content: 'Clear selection' }}
                 on:click={() => manifest.clearSelection()}
               >
                 <i class="fa-regular fa-circle-xmark" aria-hidden="true"></i>
@@ -606,6 +615,7 @@
             class="btn btn-outline-dark"
             disabled={downloadInProgress}
             on:click|preventDefault={submitDownload}
+            id="submit-download"
           >
             Download
             {#if downloadInProgress}
@@ -667,13 +677,13 @@
         name="download-module-xxx"
         tabindex="-1"
         sandbox="allow-scripts allow-same-origin allow-downloads"
-     ></iframe>
+      ></iframe>
     {:else}
       <p>This item cannot be downloaded.</p>
     {/if}
   </svelte:fragment>
 </Panel>
-<Modal bind:this={modal} onClose={closeDownload}>
+<Modal bind:this={modal} onClose={closeDownload} focusDownloadOnClose>
   {#snippet title()}
     Building your {formatTitle[format]}
     {#if $selected.size > 0}
@@ -693,7 +703,10 @@
             aria-valuemin="0"
             aria-valuemax="100"
           >
-            <div class="progress-bar progress-bar-striped progress-bar-animated" style:width={`${status.percent}%`}></div>
+            <div
+              class="progress-bar progress-bar-striped progress-bar-animated"
+              style:width={`${status.percent}%`}
+            ></div>
           </div>
           <p class="fs-7 text-body-secondary">
             <a target="_blank" href="https://hathitrust.atlassian.net/servicedesk/customer/kb/view/2387345411"
@@ -708,32 +721,36 @@
     </div>
   {/snippet}
   {#snippet footer()}
-    <div class="d-flex gap-1 align-items-center justify-content-end">
-      <button
-        type="button"
-        class="btn btn-secondary"
-        on:click={cancelDownload}
-        aria-disabled={status.done}
-        class:disabled={status.done}>Cancel</button
-      >
-      <!-- <button 
+    <div role="status">
+      <div class="d-flex gap-1 align-items-center justify-content-end">
+        <button
+          type="button"
+          class="btn btn-secondary"
+          on:click={cancelDownload}
+          disabled={status.done}
+          class:disabled={status.done}>Cancel</button
+        >
+        <!-- <button 
         type="button" 
         class="btn btn-primary"
         disabled={downloadInProgress}
         on:click={finalizeDownload}>Download</button> -->
-      {#if downloadInProgress}
-      <span class="btn btn-primary disabled">
-        Download
-      </span>
-      {:else}
-      <a
-        class="btn btn-primary"
-        on:click={() => modal.hide()}
-        href={downloadUrl}>Download</a
-      >
+        {#if downloadInProgress}
+          <span class="btn btn-primary disabled"> Download </span>
+        {:else}
+          <a
+            class="btn btn-primary"
+            on:click={() => modal.hide()}
+            on:click={() => document.getElementById('submit-download').focus()}
+            href={downloadUrl}>Download</a
+          >
+        {/if}
+      </div>
+      {#if cancellingDownload}
+        <span class="visually-hidden">Download cancelled</span>
       {/if}
     </div>
-    {/snippet}
+  {/snippet}
 </Modal>
 
 <style lang="scss">

pt/web/firebird/src/js/components/GetThisItemPanel/index.svelte

@@ -10,7 +10,7 @@
 
 {#if externalLinks.length}
   <Panel parent="#controls">
-    <i class="fa-solid fa-book" slot="icon"></i>
+    <i class="fa-solid fa-book" slot="icon" aria-hidden="true"></i>
     <slot:fragment slot="title">Get This Item</slot:fragment>
     <slot:fragment slot="body">
       <ul class="list-unstyled">

pt/web/firebird/src/js/components/MetadataPanel/index.svelte

@@ -54,7 +54,7 @@
   <AccessStatusPanel />
 </div>
 <Panel parent="#controls" expanded={true} metadata={true} class="border-top rounded-top-2">
-  <i class="fa-solid fa-book" slot="icon"></i>
+  <i class="fa-solid fa-book" slot="icon" aria-hidden="true"></i>
   <slot:fragment slot="title">About This Item</slot:fragment>
   <slot:fragment slot="body">
     <BibData {title} />

pt/web/firebird/src/js/components/SharePanel/index.svelte

@@ -23,12 +23,10 @@
   let codeBlock;
   let view = '1up';
   let codeBlockText = {};
-  codeBlockText[
-    '1up'
-  ] = `<iframe width="450" height="700" src="https://hdl.handle.net/2027/${manifest.id}?urlappend=%3Bui=embed"></iframe>`;
-  codeBlockText[
-    '2up'
-  ] = `<iframe width="700" height="450" src="https://hdl.handle.net/2027/${manifest.id}?urlappend=%3Bui=embed"></iframe>`;
+  codeBlockText['1up'] =
+    `<iframe width="450" height="700" src="https://hdl.handle.net/2027/${manifest.id}?urlappend=%3Bui=embed"></iframe>`;
+  codeBlockText['2up'] =
+    `<iframe width="700" height="450" src="https://hdl.handle.net/2027/${manifest.id}?urlappend=%3Bui=embed"></iframe>`;
 
   function getLabel(el) {
     return this.getAttribute('aria-label');
@@ -81,7 +79,7 @@
 </script>
 
 <Panel parent="#controls">
-  <i class="fa-solid fa-share-nodes" slot="icon"></i>
+  <i class="fa-solid fa-share-nodes" slot="icon" aria-hidden="true"></i>
   <slot:fragment slot="title">Share</slot:fragment>
   <slot:fragment slot="body">
     <div class="mb-3">
@@ -101,7 +99,7 @@
           class="btn btn-outline-dark"
           aria-label="Copy permanent link"
           data-bs-placement="right"
-          use:tooltippy={{placement: 'right'}}
+          use:tooltippy={{ placement: 'right' }}
           bind:this={btnShareHandle}
           on:click={() => copySelection(btnShareHandle, shareHandle)}
         >
@@ -126,7 +124,7 @@
           class="btn btn-outline-dark"
           aria-label="Copy link to this page scan"
           data-bs-placement="right"
-          use:tooltippy={{placement: 'right'}}
+          use:tooltippy={{ placement: 'right' }}
           bind:this={btnShareHandleLink}
           on:click={() => copySelection(btnShareHandleLink, shareHandleLink)}
         >
@@ -157,7 +155,7 @@
           bind:value={codeBlockText[view]}
           on:blur={selectInnerText}
           on:click={selectInnerText}
-       ></textarea>
+        ></textarea>
         <button
           class="btn btn-outline-dark"
           aria-label="Copy iframe code"
@@ -192,4 +190,5 @@
       >
     </p>
   {/snippet}
-</Modal>
+</Modal>
+

pt/web/firebird/src/js/components/VersionPanel/index.svelte

@@ -6,13 +6,11 @@
 
   const currentSeq = manifest.currentSeq;
 
-
   $: ownerid = manifest.ownerid($currentSeq);
-
 </script>
 
 {#if manifest.versionLabel}
-  <div class="alert alert-light mt-4" role="alert">
+  <div class="alert alert-light mt-4">
     <h2 class="fs-7">Version</h2>
     <p class="fs-8">
       <span>{manifest.versionLabel}</span>