Add aria-hidden to hidden iframes in navigator (#64)

readium · Oct 7, 2024 · ea4e827 · ea4e827
1 parent 2a44a91
commit ea4e827
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/navigator-html-injectables/src/modules/setup/Setup.ts b/navigator-html-injectables/src/modules/setup/Setup.ts
@@ -94,7 +94,8 @@ export abstract class Setup extends Module {
             // When a document is unfocused, all media is paused
             this.pauseAllMedia(wnd);
 
-            // ... and all animations are cancelled
+            // ... and all animations are paused
+            // They *not* cancelled because the user can see the sudden jump back to start
             this.allAnimations.forEach(a => a.pause());
 
             ack(true);

diff --git a/navigator/src/epub/frame/FrameManager.ts b/navigator/src/epub/frame/FrameManager.ts
@@ -15,6 +15,7 @@ export class FrameManager {
         this.frame = document.createElement("iframe");
         this.frame.classList.add("readium-navigator-iframe");
         this.frame.style.visibility = "hidden";
+        this.frame.style.setProperty("aria-hidden", "true");
         this.frame.style.opacity = "0";
         this.frame.style.position = "absolute";
         this.frame.style.pointerEvents = "none";
@@ -60,6 +61,7 @@ export class FrameManager {
 
     async hide(): Promise<void> {
         this.frame.style.visibility = "hidden";
+        this.frame.style.setProperty("aria-hidden", "true");
         this.frame.style.opacity = "0";
         this.frame.style.pointerEvents = "none";
         if(this.frame.parentElement) {
@@ -86,6 +88,7 @@ export class FrameManager {
                 this.comms?.send("focus", undefined, () => {
                     const remove = () => {
                         this.frame.style.removeProperty("visibility");
+                        this.frame.style.removeProperty("aria-hidden");
                         this.frame.style.removeProperty("opacity");
                         this.frame.style.removeProperty("pointer-events");
                         res();

diff --git a/navigator/src/epub/fxl/FXLFrameManager.ts b/navigator/src/epub/fxl/FXLFrameManager.ts
@@ -27,6 +27,7 @@ export class FXLFrameManager {
         this.frame.classList.add("blank");
         this.frame.scrolling = "no";
         this.frame.style.visibility = "hidden";
+        this.frame.style.setProperty("aria-hidden", "true");
         this.frame.style.display = "none";
         this.frame.style.position = "absolute";
         this.frame.style.pointerEvents = "none";
@@ -139,6 +140,7 @@ export class FXLFrameManager {
         }
 
         this.frame.style.removeProperty("visibility");
+        this.frame.style.removeProperty("aria-hidden");
         this.frame.style.removeProperty("pointer-events");
         this.frame.classList.remove("blank");
         this.frame.classList.add("loaded");
@@ -154,6 +156,7 @@ export class FXLFrameManager {
         if(!this.loaded) return;
         this.deselect();
         this.frame.style.visibility = "hidden";
+        this.frame.style.setProperty("aria-hidden", "true");
         this.frame.style.pointerEvents = "none";
         this.frame.classList.add("blank");
         this.frame.classList.remove("loaded");