fix: keyboard focus inversion of control, Thorium now pushes requests…

… to navigator (removed body-injected underscore / jump link)
edrlab · Dec 30, 2024 · 0926c7b · 0926c7b
1 parent fcffd1d
commit 0926c7b
Show file tree

Hide file tree

Showing 7 changed files with 192 additions and 109 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -297,7 +297,7 @@
     "pdf.js": "github:edrlab/pdf.js#build",
     "proxy-agent": "^6.5.0",
     "r2-lcp-js": "^1.0.41",
-    "r2-navigator-js": "^1.16.5",
+    "r2-navigator-js": "^1.16.6",
     "r2-opds-js": "^1.0.44",
     "r2-shared-js": "^1.0.77",
     "r2-streamer-js": "^1.0.48",
@@ -368,12 +368,12 @@
     "@types/yargs": "^17.0.33",
     "@types/yauzl": "^2.10.3",
     "@types/yazl": "^2.4.5",
-    "@typescript-eslint/eslint-plugin": "^8.18.2",
-    "@typescript-eslint/parser": "^8.18.2",
+    "@typescript-eslint/eslint-plugin": "^8.19.0",
+    "@typescript-eslint/parser": "^8.19.0",
     "babel-loader": "^9.2.1",
     "babel-plugin-macros": "^3.1.0",
     "chromium-pickle-js": "^0.2.0",
-    "concurrently": "^9.1.0",
+    "concurrently": "^9.1.1",
     "copy-webpack-plugin": "^12.0.2",
     "cross-env": "^7.0.3",
     "css-hot-loader": "^1.4.4",

diff --git a/src/common/keyboard.ts b/src/common/keyboard.ts
@@ -56,6 +56,13 @@ const _defaults_ = Object.freeze({
         shift: false,
         key: "F10",
     }),
+    FocusMainDeep: Object.freeze<TKeyboardShortcut>({
+        alt: false,
+        control: true,
+        shift: true,
+        key: "F10",
+    }),
+
     FocusToolbar: Object.freeze<TKeyboardShortcut>({
         alt: false,
         control: true,

diff --git a/src/renderer/reader/components/Reader.tsx b/src/renderer/reader/components/Reader.tsx
@@ -75,7 +75,8 @@ import {
     setReadingLocationSaver, ttsClickEnable, ttsNext, ttsOverlayEnable, ttsPause,
     ttsPlay, ttsPlaybackRate, ttsPrevious, ttsResume, ttsSkippabilityEnable, ttsSentenceDetectionEnable, TTSStateEnum,
     ttsStop, ttsVoice, highlightsClickListen,
-    stealFocusDisable,
+    // stealFocusDisable,
+    keyboardFocusRequest,
 } from "@r2-navigator-js/electron/renderer/index";
 import { Locator as R2Locator } from "@r2-navigator-js/electron/common/locator";
 
@@ -269,6 +270,7 @@ class Reader extends React.Component<IProps, IState> {
         this.onKeyboardSpineNavigationPrevious = this.onKeyboardSpineNavigationPrevious.bind(this);
         this.onKeyboardSpineNavigationNext = this.onKeyboardSpineNavigationNext.bind(this);
         this.onKeyboardFocusMain = this.onKeyboardFocusMain.bind(this);
+        this.onKeyboardFocusMainDeep = this.onKeyboardFocusMainDeep.bind(this);
         this.onKeyboardFocusToolbar = this.onKeyboardFocusToolbar.bind(this);
         this.onKeyboardFullScreen = this.onKeyboardFullScreen.bind(this);
         this.onKeyboardBookmark = this.onKeyboardBookmark.bind(this);
@@ -1042,6 +1044,10 @@ class Reader extends React.Component<IProps, IState> {
             true, // listen for key up (not key down)
             this.props.keyboardShortcuts.FocusMain,
             this.onKeyboardFocusMain);
+        registerKeyboardListener(
+            true, // listen for key up (not key down)
+            this.props.keyboardShortcuts.FocusMainDeep,
+            this.onKeyboardFocusMainDeep);
 
         registerKeyboardListener(
             true, // listen for key up (not key down)
@@ -1145,6 +1151,7 @@ class Reader extends React.Component<IProps, IState> {
         unregisterKeyboardListener(this.onKeyboardSpineNavigationPrevious);
         unregisterKeyboardListener(this.onKeyboardSpineNavigationNext);
         unregisterKeyboardListener(this.onKeyboardFocusMain);
+        unregisterKeyboardListener(this.onKeyboardFocusMainDeep);
         unregisterKeyboardListener(this.onKeyboardFocusToolbar);
         unregisterKeyboardListener(this.onKeyboardFullScreen);
         unregisterKeyboardListener(this.onKeyboardBookmark);
@@ -1577,10 +1584,10 @@ class Reader extends React.Component<IProps, IState> {
         }
 
         // lock focus outside webview for 400ms
-        if (this.props.readerConfig.readerDockingMode !== "full") {
-            stealFocusDisable(true);
-            setTimeout(() => stealFocusDisable(false), 400);
-        }
+        // if (this.props.readerConfig.readerDockingMode !== "full") {
+        //     stealFocusDisable(true);
+        //     setTimeout(() => stealFocusDisable(false), 400);
+        // }
 
         this.handleMenuButtonClick(true, this.state.openedSectionMenu, true);
     };
@@ -1612,7 +1619,21 @@ class Reader extends React.Component<IProps, IState> {
             return;
         }
 
-        this.focusMainArea();
+        this.focusMainArea(false, true);
+        // if (this.fastLinkRef?.current) {
+        //     console.log("€€€€€ FOCUS READER MAIN");
+        //     this.fastLinkRef.current.focus();
+        // }
+    };
+    private onKeyboardFocusMainDeep = () => {
+        if (!this.state.shortcutEnable) {
+            if (DEBUG_KEYBOARD) {
+                console.log("!shortcutEnable (onKeyboardFocusMainDeep)");
+            }
+            return;
+        }
+
+        this.focusMainArea(true, true);
         // if (this.fastLinkRef?.current) {
         //     console.log("€€€€€ FOCUS READER MAIN");
         //     this.fastLinkRef.current.focus();
@@ -2228,6 +2249,7 @@ class Reader extends React.Component<IProps, IState> {
                 this.props.winId,
                 computeReadiumCssJsonMessage(this.props.readerConfig),
             );
+            // stealFocusDisable(true);
 
             windowHistory._length = 1;
             // console.log("#+$%".repeat(5)  + " installNavigatorDOM => window history replaceState() ...", JSON.stringify(locator), JSON.stringify(window.history.state), window.history.length, windowHistory._length, JSON.stringify(document.location), JSON.stringify(window.location));
@@ -2256,10 +2278,10 @@ class Reader extends React.Component<IProps, IState> {
         }
 
         // lock focus outside webview for 400ms
-        if (this.props.readerConfig.readerDockingMode !== "full") {
-            stealFocusDisable(true);
-            setTimeout(() => stealFocusDisable(false), 400);
-        }
+        // if (this.props.readerConfig.readerDockingMode !== "full") {
+        //     stealFocusDisable(true);
+        //     setTimeout(() => stealFocusDisable(false), 400);
+        // }
 
         this.handleMenuButtonClick(true, "tab-toc");
 
@@ -2366,11 +2388,15 @@ class Reader extends React.Component<IProps, IState> {
         return visibleBookmarkList;
     }
 
-    private focusMainArea() {
+    private focusMainArea(deep: boolean, immediate: boolean) {
         if (this.fastLinkRef?.current) {
             console.log("€€€€€ FOCUS READER MAIN");
             this.fastLinkRef.current.focus();
         }
+
+        setTimeout(() => {
+            keyboardFocusRequest(deep);
+        }, immediate ? 0 : 800); // time for document load + render/paginate + reading location setter
     }
 
     private closeMenu() {
@@ -2380,7 +2406,7 @@ class Reader extends React.Component<IProps, IState> {
         }
     }
 
-    private focusMainAreaLandmarkAndCloseMenu() {
+    private focusMainAreaLandmarkAndCloseMenu(deep: boolean) {
 
         // if (this.state.menuOpen) {
         //     this.handleMenuButtonClick(false);
@@ -2392,7 +2418,7 @@ class Reader extends React.Component<IProps, IState> {
         // }
 
         this.closeMenu();
-        this.focusMainArea();
+        this.focusMainArea(deep, false);
         // if (this.fastLinkRef?.current) {
         //     // shortcutEnable must be true (see handleMenuButtonClick() above, and this.state.menuOpen))
         //     console.log("@@@@@@@@@@@@@@@");
@@ -2445,9 +2471,9 @@ class Reader extends React.Component<IProps, IState> {
 
     private goToLocator(locator: R2Locator, closeNavPanel = true, isFromOnPopState = false) {
 
-        if (closeNavPanel) {
+        if (closeNavPanel && !isFromOnPopState) {
             // this.closeMenu();
-            this.focusMainAreaLandmarkAndCloseMenu();
+            this.focusMainAreaLandmarkAndCloseMenu(true);
         }
 
         if (this.props.isPdf) {
@@ -2488,8 +2514,8 @@ class Reader extends React.Component<IProps, IState> {
             return;
         }
 
-        if (closeNavPanel) {
-            this.focusMainAreaLandmarkAndCloseMenu();
+        if (closeNavPanel && !isFromOnPopState) {
+            this.focusMainAreaLandmarkAndCloseMenu(true);
         }
 
         if (this.props.isPdf) {

diff --git a/src/renderer/reader/components/ReaderMenuSearch.tsx b/src/renderer/reader/components/ReaderMenuSearch.tsx
@@ -30,7 +30,7 @@ import { readerLocalActionSearch } from "../redux/actions";
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface IBaseProps {
-    focusMainAreaLandmarkAndCloseMenu: () => void;
+    focusMainAreaLandmarkAndCloseMenu: (deep: boolean) => void;
     dockedMode: boolean;
 }
 // IProps may typically extend:
@@ -442,7 +442,7 @@ const handleSearchClickFunc = (
     e.preventDefault();
 
     if (closeNavPanel) {
-        thiz.props.focusMainAreaLandmarkAndCloseMenu();
+        thiz.props.focusMainAreaLandmarkAndCloseMenu(true);
     }
 
     thiz.props.searchFocusCurrent(href); // search uuid

diff --git a/src/renderer/reader/components/options-values.ts b/src/renderer/reader/components/options-values.ts
@@ -114,7 +114,7 @@ export interface IReaderMenuProps {
     handleLinkClick: (event: TMouseEventOnSpan | TMouseEventOnAnchor | TKeyboardEventOnAnchor | undefined, url: string, closeNavPanel?: boolean) => void;
     goToLocator: (locator: R2Locator, closeNavPanel?: boolean) => void;
     toggleMenu: () => void;
-    focusMainAreaLandmarkAndCloseMenu: () => void;
+    focusMainAreaLandmarkAndCloseMenu: (deep: boolean) => void;
     pdfToc: TToc;
     isPdf: boolean;
     pdfNumberOfPages: number;

diff --git a/src/utils/search/search.ts b/src/utils/search/search.ts
@@ -14,6 +14,8 @@ import { ContentType } from "../contentType";
 import { ISearchDocument, ISearchResult } from "./search.interface";
 import { searchDocDomSeek } from "./searchWithDomSeek";
 
+import { ENABLE_SKIP_LINK } from "@r2-navigator-js/electron/common/styles";
+
 export async function search(searchInput: string, data: ISearchDocument): Promise<ISearchResult[]> {
 
     if (!data.xml) {
@@ -27,10 +29,13 @@ export async function search(searchInput: string, data: ISearchDocument): Promis
     // TODO: this is a hack...
     // but rendered reflowable documents have a top-level invisible accessible link injected by the navigator
     // so we need it here to compute CSS Selectors
-    let toParse = data.isFixedLayout ? data.xml : data.xml.replace(
+    // SKIP_LINK_ID === "r2-skip-link"
+    let toParse = (!ENABLE_SKIP_LINK || data.isFixedLayout) ?
+        data.xml :
+        data.xml.replace(
         /<body([\s\S]*?)>/gm,
         "<body$1><a id=\"r2-skip-link\" href=\"javascript:;\" title=\"__\" aria-label=\"__\" tabindex=\"0\"> </a>",
-    );
+        );
     // console.log(`===data.isFixedLayout ${data.isFixedLayout}`, data.xml);
 
     const contentType = data.contentType ? (data.contentType as DOMParserSupportedType) : ContentType.Xhtml;