add interactiveElement to Keyboard peripheral event

navigator-html-injectables/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 && (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) {

navigator-html-injectables/src/index.ts

@@ -1,4 +1,5 @@
 export * from './comms';
 export * from './modules';
 export * from './Loader';
-export * from './protection';
+export * from './protection';
+export * from './keyboard';

navigator-html-injectables/src/protection/KeyCombinationManager.ts → navigator-html-injectables/src/keyboard/KeyCombinationManager.ts

@@ -1,6 +1,6 @@
 import { KeyCombo, KeyboardPeripheral } from "./KeyboardCombinations";
 import { BaseKeyboardPeripheralEvent, KeyboardEventData, BasicTextSelection } from "../modules/Peripherals";
-import { ReadiumWindow } from "../helpers/dom";
+import { ReadiumWindow, nearestInteractiveElement } from "../helpers/dom";
 
 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
         };
     }
 

navigator-html-injectables/src/keyboard/index.ts

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

navigator-html-injectables/src/modules/Peripherals.ts

@@ -4,15 +4,13 @@ import { ReadiumWindow, nearestInteractiveElement } from "../helpers/dom";
 import { BulkCopyProtector, BulkCopyProtectionOptions } from "../protection/BulkCopyProtector";
 import { SelectionAnalyzer, SelectionAnalyzerOptions } from "../protection/SelectionAnalyzer";
 import { 
-    KeyboardPeripheral 
-} from "../protection";
-import { SuspiciousActivityType } from "../comms";
-import { BULK_COPY_CONFIG, SELECTION_ANALYZER_CONFIG } from "../protection/config";
-import { 
+    KeyboardPeripheral,
     KeyCombinationManager, 
     ActivityEventDispatcher,
     KeyboardPeripheralEvent
-} from "../protection/KeyCombinationManager";
+} from "../keyboard";
+import { SuspiciousActivityType } from "../comms";
+import { BULK_COPY_CONFIG, SELECTION_ANALYZER_CONFIG } from "../protection/config";
 import { SuspiciousScrollingEvent } from "./snapper/ScrollSnapper";
 import { SuspiciousSnappingEvent } from "./snapper/ColumnSnapper";
 
@@ -59,6 +57,7 @@ export interface BaseKeyboardPeripheralEvent {
     timestamp: number;
     targetFrameSrc: string;
     selectedText?: Omit<BasicTextSelection, "targetFrameSrc">;
+    interactiveElement?: string;
 }
 
 export interface DeveloperToolsEvent extends BaseSuspiciousActivityEvent, KeyboardEventData {

navigator-html-injectables/src/protection/index.ts

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

navigator/docs/epub/CustomizingListeners.md

@@ -132,7 +132,7 @@ Fires when a configured keyboard shortcut is triggered within the EPUB content.
 The event provides detailed information about the keyboard interaction:
 
 ```ts
-interface KeyboardPeripheralEvent {
+interface KeyboardPeripheralEventData {
     type: string;           // The type of peripheral (e.g., "developer_tools", "select_all", "print", "save")
     timestamp: number;      // When the event occurred
     targetFrameSrc: string; // The source of the frame where the event originated
@@ -143,6 +143,7 @@ interface KeyboardPeripheralEvent {
         width: number;
         height: number;
     };
+    interactiveElement?: Element; // The interactive element (if any) that is currently focused
     key: string;            // The key that was pressed
     code: string;           // The physical key code
     keyCode: number;        // The numeric key code

navigator/docs/epub/KeyboardPeripherals.md

@@ -96,6 +96,7 @@ interface KeyboardPeripheralEvent {
         width: number;
         height: number;
     };
+    interactiveElement?: string; // The interactive element (if any) that is currently focused
     // Keyboard-specific data
     key: string;
     code: string;

navigator/src/epub/EpubNavigator.ts

@@ -2,7 +2,7 @@ import { Layout, Link, Locator, Profile, Publication, ReadingProgression } from
 import { Configurable, ConfigurablePreferences, ConfigurableSettings, LineLengths, ProgressionRange, VisualNavigator, VisualNavigatorViewport } from "../";
 import { FramePoolManager } from "./frame/FramePoolManager";
 import { FXLFramePoolManager } from "./fxl/FXLFramePoolManager";
-import { CommsEventKey, ContextMenuEvent, FXLModules, KeyboardEventData, ModuleLibrary, ModuleName, ReflowableModules } from "@readium/navigator-html-injectables";
+import { CommsEventKey, ContextMenuEvent, FXLModules, KeyboardPeripheralEvent, ModuleLibrary, ModuleName, ReflowableModules } from "@readium/navigator-html-injectables";
 import { BasicTextSelection, FrameClickEvent, SuspiciousActivityEvent } from "@readium/navigator-html-injectables";
 import * as path from "path-browserify";
 import { FXLFrameManager } from "./fxl/FXLFrameManager";
@@ -23,6 +23,10 @@ import { KeyboardPeripherals, NAVIGATOR_KEYBOARD_PERIPHERAL_EVENT } from "../per
 
 export type ManagerEventKey = "zoom";
 
+export interface KeyboardPeripheralEventData extends Omit<KeyboardPeripheralEvent, 'interactiveElement'> {
+    interactiveElement?: Element;
+}
+
 export interface EpubNavigatorConfiguration {
     preferences: IEpubPreferences;
     defaults: IEpubDefaults;
@@ -44,7 +48,7 @@ export interface EpubNavigatorListeners {
     textSelected: (selection: BasicTextSelection) => void;
     contentProtection: (type: string, data: SuspiciousActivityEvent) => void;
     contextMenu: (data: ContextMenuEvent) => void;
-    peripheral: (data: KeyboardEventData) => void;
+    peripheral: (data: KeyboardPeripheralEventData) => void;
     // showToc: () => void;
 }
 
@@ -507,7 +511,15 @@ export class EpubNavigator extends VisualNavigator implements Configurable<Confi
                 this.listeners.contextMenu(data as ContextMenuEvent);
                 break;
             case "keyboard_peripherals":
-                this.listeners.peripheral(data as KeyboardEventData);
+                const event = data as KeyboardPeripheralEvent;
+                const parsedEvent: KeyboardPeripheralEventData = { ...event, interactiveElement: undefined };
+                if (event.interactiveElement) {
+                    parsedEvent.interactiveElement = new DOMParser().parseFromString(
+                        event.interactiveElement,
+                        "text/html"
+                    ).body.children[0] as Element;
+                }
+                this.listeners.peripheral(parsedEvent);
                 break;
             case "log":
                 console.log(this._cframes[0]?.source?.split("/")[3], ...(data as any[]));

navigator/src/epub/css/Properties.ts

@@ -11,7 +11,6 @@ import {
 } from "../../css/Properties";
 
 export interface IUserProperties {
-  advancedSettings?: boolean | null;
   a11yNormalize?: boolean | null;
   backgroundColor?: string | null;
   blendFilter?: boolean | null;

navigator/src/webpub/WebPubNavigator.ts

@@ -2,11 +2,11 @@ import { Feature, Link, Locator, Publication, ReadingProgression, LocatorLocatio
 import { VisualNavigator, VisualNavigatorViewport, ProgressionRange } from "../Navigator";
 import { Configurable } from "../preferences/Configurable";
 import { WebPubFramePoolManager } from "./WebPubFramePoolManager";
-import { BasicTextSelection, CommsEventKey, ContextMenuEvent, FrameClickEvent, KeyboardEventData, ModuleLibrary, ModuleName, SuspiciousActivityEvent, WebPubModules } from "@readium/navigator-html-injectables";
+import { BasicTextSelection, CommsEventKey, ContextMenuEvent, FrameClickEvent, KeyboardPeripheralEvent, ModuleLibrary, ModuleName, SuspiciousActivityEvent, WebPubModules } from "@readium/navigator-html-injectables";
 import * as path from "path-browserify";
 import { WebPubFrameManager } from "./WebPubFrameManager";
 
-import { ManagerEventKey } from "../epub/EpubNavigator";
+import { KeyboardPeripheralEventData, ManagerEventKey } from "../epub/EpubNavigator";
 import { WebPubCSS } from "./css/WebPubCSS";
 import { WebUserProperties, WebRSProperties } from "./css/Properties";
 import { IWebPubPreferences, WebPubPreferences } from "./preferences/WebPubPreferences";
@@ -41,7 +41,7 @@ export interface WebPubNavigatorListeners {
     textSelected: (selection: BasicTextSelection) => void;
     contentProtection: (type: string, data: SuspiciousActivityEvent) => void;
     contextMenu: (data: ContextMenuEvent) => void;
-    peripheral: (data: KeyboardEventData) => void;
+    peripheral: (data: KeyboardPeripheralEventData) => void;
 }
 
 const defaultListeners = (listeners: WebPubNavigatorListeners): WebPubNavigatorListeners => ({
@@ -352,7 +352,15 @@ export class WebPubNavigator extends VisualNavigator implements Configurable<Web
                 this.listeners.contextMenu(data as ContextMenuEvent);
                 break;
             case "keyboard_peripherals":
-                this.listeners.peripheral(data as KeyboardEventData);
+                const event = data as KeyboardPeripheralEvent;
+                const parsedEvent: KeyboardPeripheralEventData = { ...event, interactiveElement: undefined };
+                if (event.interactiveElement) {
+                    parsedEvent.interactiveElement = new DOMParser().parseFromString(
+                        event.interactiveElement,
+                        "text/html"
+                    ).body.children[0] as Element;
+                }
+                this.listeners.peripheral(parsedEvent);
                 break;
             case "log":
                 console.log(this.framePool.currentFrames[0]?.source?.split("/")[3], ...(data as any[]));