@readium/navigator-html-injectables 2.4.1 → 2.4.2-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readium/navigator-html-injectables",
-  "version": "2.4.1",
+  "version": "2.4.2-beta.1",
   "type": "module",
   "description": "An embeddable solution for connecting frames of HTML publications with a Readium Navigator",
   "author": "readium",

package/src/helpers/dom.ts

@@ -30,6 +30,7 @@ export function deselect(wnd: ReadiumWindow) {
 
 const interactiveTags = [
     "a",
+    "area", 
     "audio",
     "button",
     "canvas",
@@ -43,17 +44,14 @@ const interactiveTags = [
     "video",
 ];
 
+const interactiveRoles = ["dialog", "radiogroup", "radio", "menu", "menuitem"];
+
 // See https://github.com/JayPanoz/architecture/tree/touch-handling/misc/touch-handling
 export function nearestInteractiveElement(element: Element): Element | null {
-    if (interactiveTags.indexOf(element.nodeName.toLowerCase()) !== -1) {
-        return element;
-    }
-
-    // Checks whether the element is editable by the user.
-    if (
-        element.hasAttribute("contenteditable") &&
-        element.getAttribute("contenteditable")?.toLowerCase() !== "false"
-    ) {
+    // If the element or any ancestor is blocked, return null immediately
+    if (isElementBlocked(element)) return null;
+    
+    if (isInteractiveElement(element)) {
         return element;
     }
 
@@ -65,6 +63,29 @@ export function nearestInteractiveElement(element: Element): Element | null {
     return null;
 }
 
+export function isElementBlocked(element: Element | null): boolean {
+    if (!element) {
+        return true;
+    }
+    
+    return element.closest("[inert]") !== null || element.hasAttribute("disabled");
+}
+
+export function isInteractiveElement(element: Element | null): boolean {
+    if (!element) {
+        return false;
+    }
+    
+    // Check for interactive roles
+    if (element.role && interactiveRoles.includes(element.role)) return true;
+
+    if ((element as HTMLElement).tabIndex >= 0) return true;
+    
+    // Use existing interactive tags logic
+    return interactiveTags.includes(element.nodeName.toLowerCase()) ||
+           element.hasAttribute("contenteditable") && element.getAttribute("contenteditable")?.toLowerCase() !== "false";
+}
+
 /// Returns the `Locator` object to the first block element that is visible on
 /// the screen.
 export function findFirstVisibleLocator(wnd: ReadiumWindow, scrolling: boolean) {

package/src/index.ts

@@ -2,3 +2,4 @@ export * from './comms/index.ts';
 export * from './modules/index.ts';
 export * from './Loader.ts';
 export * from './protection/index.ts';
+export * from './keyboard/index.ts'

package/src/{protection → keyboard}/KeyCombinationManager.ts

@@ -1,6 +1,6 @@
 import { KeyCombo, KeyboardPeripheral } from "./KeyboardCombinations.ts";
 import { BaseKeyboardPeripheralEvent, KeyboardEventData, BasicTextSelection } from "../modules/Peripherals.ts";
-import { ReadiumWindow } from "../helpers/dom.ts";
+import { isInteractiveElement, nearestInteractiveElement, ReadiumWindow } from "../helpers/dom.ts";
 
 export type KeyHandler = (event: KeyboardEvent) => void;
 export type ActivityEventDispatcher = (event: KeyboardPeripheralEvent) => void;
@@ -56,6 +56,8 @@ export class KeyCombinationManager {
     ): KeyboardPeripheralEvent {
         // Capture selected text if window is available
         let selectedText: Omit<BasicTextSelection, "targetFrameSrc"> | undefined;
+        let interactiveElement: string | undefined;
+        
         if (wnd) {
             const selection = wnd.getSelection();
             const selectedTextStr = selection?.toString() || '';
@@ -71,6 +73,12 @@ export class KeyCombinationManager {
                     height: rect.height
                 };
             }
+
+            // Capture interactive element information following the same pattern as onPointUp
+            const activeElement = wnd.document.activeElement;
+            if (activeElement && activeElement !== wnd.document.body) {
+                interactiveElement = nearestInteractiveElement(activeElement)?.outerHTML;
+            }
         }
 
         return {
@@ -84,7 +92,8 @@ export class KeyCombinationManager {
             shiftKey: event.shiftKey,
             metaKey: event.metaKey,
             targetFrameSrc: targetFrameSrc,
-            selectedText
+            selectedText,
+            interactiveElement
         };
     }
 
@@ -128,10 +137,15 @@ export class KeyCombinationManager {
         return (event: KeyboardEvent) => {
             for (const handlerConfig of handlers) {
                 if (this.match(event, [handlerConfig])) {
+                    const suppress = handlerConfig.suppressOnInteractiveElement;
+                    if (suppress) {
+                        const active = document.activeElement;
+                        if (Array.isArray(suppress) ? suppress.some(sel => active?.matches(sel)) : isInteractiveElement(active)) return;
+                    }
                     event.preventDefault();
                     event.stopPropagation();
                     handlerConfig.handler!(event);
-                    return; // Stop after first match
+                    return;
                 }
             }
         };

package/src/{protection → keyboard}/KeyboardCombinations.ts

@@ -4,6 +4,7 @@ export interface KeyCombo {
     shift?: boolean;
     alt?: boolean;
     meta?: boolean;
+    suppressOnInteractiveElement?: boolean | string[];
 }
 
 export interface KeyboardPeripheral {

package/src/keyboard/index.ts

@@ -0,0 +1,2 @@
+export * from "./KeyboardCombinations";
+export * from "./KeyCombinationManager";

package/src/modules/Peripherals.ts

@@ -3,18 +3,12 @@ import { Module } from "./Module.ts";
 import { ReadiumWindow, nearestInteractiveElement } from "../helpers/dom.ts";
 import { BulkCopyProtector, BulkCopyProtectionOptions } from "../protection/BulkCopyProtector.ts";
 import { SelectionAnalyzer, SelectionAnalyzerOptions } from "../protection/SelectionAnalyzer.ts";
-import {
-    KeyboardPeripheral
-} from "../protection/index.ts";
 import { SuspiciousActivityType } from "../comms/index.ts";
 import { BULK_COPY_CONFIG, SELECTION_ANALYZER_CONFIG } from "../protection/config.ts";
-import {
-    KeyCombinationManager,
-    ActivityEventDispatcher,
-    KeyboardPeripheralEvent
-} from "../protection/KeyCombinationManager.ts";
 import { SuspiciousScrollingEvent } from "./snapper/ScrollSnapper.ts";
 import { SuspiciousSnappingEvent } from "./snapper/ColumnSnapper.ts";
+import { ActivityEventDispatcher, KeyboardPeripheralEvent, KeyCombinationManager } from "../keyboard/KeyCombinationManager.ts";
+import { KeyboardPeripheral } from "../keyboard/KeyboardCombinations.ts";
 
 export interface FrameClickEvent {
     defaultPrevented: boolean;
@@ -59,6 +53,7 @@ export interface BaseKeyboardPeripheralEvent {
     timestamp: number;
     targetFrameSrc: string;
     selectedText?: Omit<BasicTextSelection, "targetFrameSrc">;
+    interactiveElement?: string;
 }
 
 export interface DeveloperToolsEvent extends BaseSuspiciousActivityEvent, KeyboardEventData {

package/src/protection/index.ts

@@ -1,6 +1,4 @@
 export * from "./BulkCopyProtector.ts";
-export * from "./KeyCombinationManager.ts";
-export * from "./KeyboardCombinations.ts";
 export * from "./PatternAnalyzer.ts";
 export * from "./SelectionAnalyzer.ts";
-export * from "./PrintProtector.ts";
+export * from "./PrintProtector.ts";

package/types/src/helpers/dom.d.ts

@@ -20,5 +20,7 @@ export interface ReadiumWindow extends Window {
 }
 export declare function deselect(wnd: ReadiumWindow): void;
 export declare function nearestInteractiveElement(element: Element): Element | null;
+export declare function isElementBlocked(element: Element | null): boolean;
+export declare function isInteractiveElement(element: Element | null): boolean;
 export declare function findFirstVisibleLocator(wnd: ReadiumWindow, scrolling: boolean): Locator;
 export {};

package/types/src/index.d.ts

@@ -2,3 +2,4 @@ export * from './comms/index.ts';
 export * from './modules/index.ts';
 export * from './Loader.ts';
 export * from './protection/index.ts';
+export * from './keyboard/index.ts';

package/types/src/{protection → keyboard}/KeyboardCombinations.d.ts

@@ -4,6 +4,7 @@ export interface KeyCombo {
     shift?: boolean;
     alt?: boolean;
     meta?: boolean;
+    suppressOnInteractiveElement?: boolean | string[];
 }
 export interface KeyboardPeripheral {
     type: string;

package/types/src/keyboard/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./KeyboardCombinations";
+export * from "./KeyCombinationManager";

package/types/src/modules/Peripherals.d.ts

@@ -4,9 +4,9 @@ import { ReadiumWindow } from "../helpers/dom.ts";
 import { BulkCopyProtectionOptions } from "../protection/BulkCopyProtector.ts";
 import { SelectionAnalyzerOptions } from "../protection/SelectionAnalyzer.ts";
 import { SuspiciousActivityType } from "../comms/index.ts";
-import { KeyboardPeripheralEvent } from "../protection/KeyCombinationManager.ts";
 import { SuspiciousScrollingEvent } from "./snapper/ScrollSnapper.ts";
 import { SuspiciousSnappingEvent } from "./snapper/ColumnSnapper.ts";
+import { KeyboardPeripheralEvent } from "../keyboard/KeyCombinationManager.ts";
 export interface FrameClickEvent {
     defaultPrevented: boolean;
     doNotDisturb: boolean;
@@ -44,6 +44,7 @@ export interface BaseKeyboardPeripheralEvent {
     timestamp: number;
     targetFrameSrc: string;
     selectedText?: Omit<BasicTextSelection, "targetFrameSrc">;
+    interactiveElement?: string;
 }
 export interface DeveloperToolsEvent extends BaseSuspiciousActivityEvent, KeyboardEventData {
     type: "developer_tools";

package/types/src/protection/index.d.ts

@@ -1,6 +1,4 @@
 export * from "./BulkCopyProtector.ts";
-export * from "./KeyCombinationManager.ts";
-export * from "./KeyboardCombinations.ts";
 export * from "./PatternAnalyzer.ts";
 export * from "./SelectionAnalyzer.ts";
 export * from "./PrintProtector.ts";