From db6c760c036adf858f55c6d2e4e3c7628d54cd2d Mon Sep 17 00:00:00 2001
From: Tuomas Airaksinen <tuomas.airaksinen@gmail.com>
Date: Thu, 25 Nov 2021 16:16:07 +0200
Subject: [PATCH 1/2] Continue working on #1878. Implement keyboard modes and
 verse focus keys.

---
 app/bibleview-js/src/common.scss              | 18 +++++
 app/bibleview-js/src/components/BibleView.vue | 26 +++++--
 .../src/components/OSIS/Reference.vue         |  2 +-
 .../src/components/OSIS/Verse.vue             | 26 ++++++-
 app/bibleview-js/src/components/OSIS/W.vue    |  2 +-
 .../src/components/TextEditor.vue             |  5 +-
 .../components/modals/AmbiguousSelection.vue  |  2 +-
 app/bibleview-js/src/composables/index.js     | 26 -------
 app/bibleview-js/src/composables/keyboard.js  | 76 +++++++++++++++++--
 app/bibleview-js/src/composables/scroll.js    |  5 +-
 .../src/composables/verse-handling.js         | 57 ++++++++++++++
 app/bibleview-js/src/utils.js                 |  9 +++
 app/bibleview-js/tests/unit/verse.spec.js     |  4 +-
 .../control/page/window/WindowControl.kt      |  2 -
 .../activity/page/BibleJavascriptInterface.kt | 19 +++--
 15 files changed, 217 insertions(+), 62 deletions(-)
 create mode 100644 app/bibleview-js/src/composables/verse-handling.js

diff --git a/app/bibleview-js/src/common.scss b/app/bibleview-js/src/common.scss
index b54bd0b478..8f3f26393b 100644
--- a/app/bibleview-js/src/common.scss
+++ b/app/bibleview-js/src/common.scss
@@ -172,6 +172,24 @@ $modal-content-background-color-night: rgb(33, 33, 33);
   }
 }
 
+$focusDay: rgb(255, 182, 123, 1.0);
+$focusNight: rgb(255, 182, 123, 0.5);
+
+:focus-visible {
+  outline: $focusDay auto 1px;
+  & .night {
+    outline: $focusNight auto 1px;
+  }
+}
+
+.isFocused {
+  //@extend .isHighlighted;
+  //background-color: rgba(255, 0, 0, 0.1);
+  //.night & {
+  //  background-color: rgba(255, 0, 0, 0.3);
+  //}
+}
+
 .one-liner {
   white-space: nowrap;
   text-overflow: ellipsis;
diff --git a/app/bibleview-js/src/components/BibleView.vue b/app/bibleview-js/src/components/BibleView.vue
index 2e3806f032..6e712da808 100644
--- a/app/bibleview-js/src/components/BibleView.vue
+++ b/app/bibleview-js/src/components/BibleView.vue
@@ -16,7 +16,7 @@
   -->
 
 <template>
-  <div @click="ambiguousSelection.handle" :class="{night: appSettings.nightMode}" :style="topStyle" :dir="direction">
+  <div @click="ambiguousSelection.handle" :class="{keyboardMode, night: appSettings.nightMode}" :style="topStyle" :dir="direction">
     <div class="background" :style="backgroundStyle"/>
     <div :style="`height:${calculatedConfig.topOffset}px`"/>
     <div :style="modalStyle" id="modals"/>
@@ -27,7 +27,7 @@
     <ErrorBox v-if="appSettings.errorBox"/>
     <DevelopmentMode :current-verse="currentVerse" v-if="config.developmentMode"/>
     <div v-if="calculatedConfig.topMargin > 0" class="top-margin" :style="`height: ${calculatedConfig.topOffset}px;`"/>
-    <div v-if="appSettings.hasActiveIndicator">
+    <div v-if="appSettings.hasActiveIndicator || keyboardMode">
       <div class="top-left-corner"/>
       <div class="top-right-corner"/>
       <div class="bottom-left-corner"/>
@@ -51,7 +51,6 @@ import {
   useCustomCss,
   useCustomFeatures,
   useFontAwesome, useModal, useSharing,
-  useVerseHighlight,
   useVerseNotifier
 } from "@/composables";
 import {testBookmarkLabels, testData} from "@/testdata";
@@ -69,6 +68,7 @@ import Color from "color";
 import {useStrings} from "@/composables/strings";
 import {DocumentTypes} from "@/constants";
 import {useKeyboard} from "@/composables/keyboard";
+import {useVerseHandler} from "@/composables/verse-handling";
 
 export default {
   name: "BibleView",
@@ -89,19 +89,22 @@ export default {
     window.bibleViewDebug.documents = documents;
     const topElement = ref(null);
     const documentPromise = ref(null);
-    const verseHighlight = useVerseHighlight();
-    provide("verseHighlight", verseHighlight);
-    const {resetHighlights} = verseHighlight;
-    const scroll = useScroll(config, appSettings, calculatedConfig, verseHighlight, documentPromise);
+    const verseHandler = useVerseHandler(computed(() => keyboardMode.value));
+    provide("verseHandler", verseHandler);
+    const {resetHighlights} = verseHandler;
+    const scroll = useScroll(config, appSettings, calculatedConfig, verseHandler, documentPromise);
     const {doScrolling, scrollToId} = scroll;
     provide("scroll", scroll);
     const globalBookmarks = useGlobalBookmarks(config);
     const android = useAndroid(globalBookmarks, config);
-    useKeyboard(android);
 
     const modal = useModal(android);
     provide("modal", modal);
 
+    const keyboard = useKeyboard(    {android, appSettings, verseHandler, modal});
+    const {keyboardMode} = keyboard;
+    provide("keyboard", keyboard);
+
     let footNoteCount = 0;
 
     function getFootNoteCount() {
@@ -282,6 +285,7 @@ export default {
       updateBookmarks: globalBookmarks.updateBookmarks, ambiguousSelection,
       config, strings, documents, topElement, currentVerse, mounted, emit, Events, isLoading,
       contentStyle, backgroundStyle, modalStyle, topStyle, calculatedConfig, appSettings,
+      keyboardMode,
     };
   },
 }
@@ -360,8 +364,14 @@ $borderDistance: 0;
   border-width: 2.5px;
   .night & {
     border-color: rgba(196, 196, 255, 0.8);
+    .keyboardMode & {
+      border-color: $focusNight;
+    }
   }
   border-color: rgba(0, 0, 255, 0.6);
+  .keyboardMode & {
+    border-color: $focusDay;;
+  }
 }
 
 .top-left-corner {
diff --git a/app/bibleview-js/src/components/OSIS/Reference.vue b/app/bibleview-js/src/components/OSIS/Reference.vue
index 40e3e70f27..b8251d0214 100644
--- a/app/bibleview-js/src/components/OSIS/Reference.vue
+++ b/app/bibleview-js/src/components/OSIS/Reference.vue
@@ -38,7 +38,7 @@ export default {
     const clicked = ref(false);
     const isHighlighted = ref(false);
     const {strings, ...common} = useCommon();
-    const {addCustom, resetHighlights} = inject("verseHighlight");
+    const {addCustom, resetHighlights} = inject("verseHandler");
     const referenceCollector = inject("referenceCollector", null);
     const content = ref(null);
     const osisFragment = inject("osisFragment");
diff --git a/app/bibleview-js/src/components/OSIS/Verse.vue b/app/bibleview-js/src/components/OSIS/Verse.vue
index 6917c03830..e56ce385f3 100644
--- a/app/bibleview-js/src/components/OSIS/Verse.vue
+++ b/app/bibleview-js/src/components/OSIS/Verse.vue
@@ -16,14 +16,14 @@
   -->
 
 <template>
-  <span :id="`v-${ordinal}`" @click="verseClicked">
+  <span :id="`v-${ordinal}`" @click="verseClicked" class="verse" ref="verseRef">
     <span
       :id="fromBibleDocument ? `o-${ordinal}` : null"
       class="verse"
       :class="{ordinal: fromBibleDocument}"
       :data-ordinal="ordinal"
     >
-      <span class="highlight-transition" :class="{isHighlighted: highlighted}">
+      <span class="highlight-transition" :class="{isFocused, isHighlighted: highlighted}">
         <VerseNumber v-if="shown && config.showVerseNumbers && verse !== 0" :verse-num="verse"/><slot/> <span/>
       </span>
     </span>
@@ -32,7 +32,7 @@
 </template>
 
 <script>
-import {inject, provide, reactive, ref} from "@vue/runtime-core";
+import {inject, provide, reactive, ref, watch} from "@vue/runtime-core";
 import VerseNumber from "@/components/VerseNumber";
 import {useCommon} from "@/composables";
 import {addEventVerseInfo, getVerseInfo} from "@/utils";
@@ -49,6 +49,7 @@ export default {
     const bibleDocumentInfo = inject("bibleDocumentInfo", {})
     const {bookInitials, bibleBookName, originalOrdinalRange, ordinalRange, v11n} = bibleDocumentInfo;
     const verseInfo = {...getVerseInfo(props), v11n};
+    const verseRef = ref(null);
 
     const shown = ref(true);
     if(verseInfo) {
@@ -56,12 +57,23 @@ export default {
       provide("verseInfo", verseInfo);
     }
 
-    const {highlightedVerses, highlightVerse} = inject("verseHighlight");
+    const {highlightedVerses, highlightVerse, focusedVerse} = inject("verseHandler");
 
     const ordinal = computed(() => {
       return parseInt(props.verseOrdinal);
     });
 
+    const isFocused = computed(() => focusedVerse.value === ordinal.value);
+
+    watch(isFocused, v => {
+      if(v) {
+        //if(!isCompletelyInViewport(verseRef.value)) {
+        //  verseRef.value.scrollIntoView({behavior: "smooth"});
+        //}
+        verseRef.value.focus();
+      }
+    })
+
     const book = computed(() => {
       return props.osisID.split(".")[0]
     });
@@ -97,6 +109,8 @@ export default {
       highlighted,
       fromBibleDocument,
       verseClicked,
+      isFocused,
+      verseRef,
       ...common,
     }
   },
@@ -108,4 +122,8 @@ export default {
 .linebreak {
   display: block;
 }
+.verse {
+
+}
+
 </style>
diff --git a/app/bibleview-js/src/components/OSIS/W.vue b/app/bibleview-js/src/components/OSIS/W.vue
index 98f17eb319..b87f537b47 100644
--- a/app/bibleview-js/src/components/OSIS/W.vue
+++ b/app/bibleview-js/src/components/OSIS/W.vue
@@ -57,7 +57,7 @@ export default {
     checkUnsupportedProps(props, "subType")
     const {strings, config, ...common} = useCommon();
     const isHighlighted = ref(false);
-    const {addCustom, resetHighlights} = inject("verseHighlight");
+    const {addCustom, resetHighlights} = inject("verseHandler");
     function prep(string) {
       let remainingString = string;
       const res = []
diff --git a/app/bibleview-js/src/components/TextEditor.vue b/app/bibleview-js/src/components/TextEditor.vue
index 100ce79fd1..da1ad44530 100644
--- a/app/bibleview-js/src/components/TextEditor.vue
+++ b/app/bibleview-js/src/components/TextEditor.vue
@@ -172,8 +172,9 @@ export default {
       }
     }
 
-    watch(editText, debounce(save, 2000))
+    const {setEditMode} = inject("keyboard");
 
+    watch(editText, debounce(save, 2000))
     const divider = {divider: true};
 
     function openDownloads() {
@@ -199,6 +200,7 @@ export default {
       editor.value.content.innerHTML = editText.value;
       editor.value.content.focus();
       android.setEditing(true);
+      setEditMode(true);
     });
 
     setupElementEventListener(editorElement, "keyup", e => {
@@ -215,6 +217,7 @@ export default {
 
     onUnmounted(() => {
       android.setEditing(false);
+      setEditMode(false);
     })
 
     return {setFocus, editorElement, dirty, inputText, showHelp, openDownloads, hasRefParser, refChooserDialog, ...useCommon()}
diff --git a/app/bibleview-js/src/components/modals/AmbiguousSelection.vue b/app/bibleview-js/src/components/modals/AmbiguousSelection.vue
index 8cd4f2b9e0..1c06c883da 100644
--- a/app/bibleview-js/src/components/modals/AmbiguousSelection.vue
+++ b/app/bibleview-js/src/components/modals/AmbiguousSelection.vue
@@ -104,7 +104,7 @@ export default {
     const android = inject("android");
     const multiSelectionMode = ref(false);
 
-    const {resetHighlights, highlightVerse, hasHighlights} = inject("verseHighlight");
+    const {resetHighlights, highlightVerse, hasHighlights} = inject("verseHandler");
     const {modalOpen, closeModals} = inject("modal");
 
     const showModal = ref(false);
diff --git a/app/bibleview-js/src/composables/index.js b/app/bibleview-js/src/composables/index.js
index 4d3b5d5ab7..9b4bd908ba 100644
--- a/app/bibleview-js/src/composables/index.js
+++ b/app/bibleview-js/src/composables/index.js
@@ -470,32 +470,6 @@ export function useReferenceCollector() {
     return {references, collect, clear}
 }
 
-export function useVerseHighlight() {
-    const highlightedVerses = reactive(new Set());
-    const undoCustomHighlights = reactive([]);
-
-    const hasHighlights = computed(() => highlightedVerses.size > 0 || undoCustomHighlights.length > 0);
-
-    function resetHighlights(onlyVerses = false) {
-        highlightedVerses.clear();
-        if(!onlyVerses) {
-            undoCustomHighlights.forEach(f => f())
-            undoCustomHighlights.splice(0);
-        }
-    }
-
-    function highlightVerse(ordinal) {
-        highlightedVerses.add(ordinal);
-    }
-
-    function addCustom(f) {
-        undoCustomHighlights.push(f);
-    }
-
-    return {highlightVerse, addCustom, highlightedVerses, resetHighlights, hasHighlights}
-}
-
-
 function useParsers(android) {
     const enParser = new BcvParser;
     const parsers = [enParser];
diff --git a/app/bibleview-js/src/composables/keyboard.js b/app/bibleview-js/src/composables/keyboard.js
index 3686df0b6c..5155078a10 100644
--- a/app/bibleview-js/src/composables/keyboard.js
+++ b/app/bibleview-js/src/composables/keyboard.js
@@ -16,20 +16,82 @@
  */
 
 import {setupDocumentEventListener} from "@/utils";
+import {ref} from "@vue/reactivity";
+import {watch} from "@vue/runtime-core";
 
-const altKeys = new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "KeyW", "KeyM", "KeyO", "KeyG"]);
-const keys = new Set([]);
+const keys = new Set(["KeyW", "KeyM", "KeyO", "KeyG"]);
+const focusKeys = new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "Tab"]);
+
+export function useKeyboard(
+    {
+        android: {onKeyDown},
+        appSettings,
+        verseHandler: {adjFocusedVerse},
+        modal: {modalOpen},
+    }) {
+    const keyboardMode = ref(false);
+    const editMode = ref(false);
 
-export function useKeyboard({onKeyDown}) {
     setupDocumentEventListener("keydown", e => {
-        if(keys.has(e.code) || (e.altKey && altKeys.has(e.code))) {
+        if(editMode.value) {
+            return;
+        }
+
+        console.log("Keycode:", e.code);
+
+        if (keys.has(e.code)) {
             let key = e.code;
-            if(e.altKey) {
-                key = "Alt" + key;
-            }
             onKeyDown(key);
             e.preventDefault();
             e.stopPropagation();
+            return;
+        }
+
+        if(!keyboardMode.value) {
+            if(e.code === "Enter") {
+                keyboardMode.value = true
+            }
+            else if(focusKeys.has(e.code)) {
+                onKeyDown(e.code);
+            }
+            e.preventDefault();
+            e.stopPropagation();
+        }
+
+        if(keyboardMode.value) {
+            let handled = false;
+
+            if(modalOpen.value) return;
+
+            switch(e.code) {
+                case "Escape":
+                    keyboardMode.value = false
+                    handled = true;
+                    break;
+                case "ArrowUp":
+                    adjFocusedVerse(-1);
+                    handled = true;
+                    break;
+                case "ArrowDown":
+                    adjFocusedVerse(1);
+                    handled = true;
+                    break;
+            }
+            if (handled) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
         }
     });
+
+    watch(() => appSettings.activeWindow, v => {
+        if(!v) {
+            keyboardMode.value = false;
+        }
+    });
+
+    return {
+        setEditMode: v => editMode.value = v,
+        keyboardMode,
+    }
 }
diff --git a/app/bibleview-js/src/composables/scroll.js b/app/bibleview-js/src/composables/scroll.js
index db03207784..4a2cebcc8d 100644
--- a/app/bibleview-js/src/composables/scroll.js
+++ b/app/bibleview-js/src/composables/scroll.js
@@ -20,7 +20,9 @@ import {Events, setupEventBusListener} from "@/eventbus";
 import {computed, ref} from "@vue/reactivity";
 import {isInViewport} from "@/utils";
 
-export function useScroll(config, appSettings, calculatedConfig, {highlightVerse, resetHighlights}, documentPromise) {
+export function useScroll(
+    config, appSettings, calculatedConfig, {highlightVerse, resetHighlights, setFocusedVerse}, documentPromise
+) {
     let currentScrollAnimation = ref(null);
     const isScrolling = computed(() => currentScrollAnimation.value != null)
 
@@ -138,6 +140,7 @@ export function useScroll(config, appSettings, calculatedConfig, {highlightVerse
 
         if (jumpToOrdinal != null) {
             scrollToId(`o-${jumpToOrdinal}`, {now: true, force: true});
+            setFocusedVerse(jumpToOrdinal);
         } else if (jumpToAnchor !== null) {
             scrollToId(`o-${jumpToAnchor}`, {now: true, force: true});
         } else if(jumpToId !== null) {
diff --git a/app/bibleview-js/src/composables/verse-handling.js b/app/bibleview-js/src/composables/verse-handling.js
new file mode 100644
index 0000000000..8d6cb08d8a
--- /dev/null
+++ b/app/bibleview-js/src/composables/verse-handling.js
@@ -0,0 +1,57 @@
+/*
+ * Copyright (c) 2021 Martin Denham, Tuomas Airaksinen and the And Bible contributors.
+ *
+ * This file is part of And Bible (http://github.com/AndBible/and-bible).
+ *
+ * And Bible is free software: you can redistribute it and/or modify it under the
+ * terms of the GNU General Public License as published by the Free Software Foundation,
+ * either version 3 of the License, or (at your option) any later version.
+ *
+ * And Bible is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
+ * without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ * See the GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License along with And Bible.
+ * If not, see http://www.gnu.org/licenses/.
+ */
+
+import {reactive, ref} from "@vue/runtime-core";
+import {computed} from "@vue/reactivity";
+
+export function useVerseHandler() {
+    const highlightedVerses = reactive(new Set());
+    const undoCustomHighlights = reactive([]);
+    const focusedVerse = ref(-1);
+
+    const hasHighlights = computed(() => highlightedVerses.size > 0 || undoCustomHighlights.length > 0);
+
+    function resetHighlights(onlyVerses = false) {
+        highlightedVerses.clear();
+        if(!onlyVerses) {
+            undoCustomHighlights.forEach(f => f())
+            undoCustomHighlights.splice(0);
+        }
+    }
+
+    function highlightVerse(ordinal) {
+        highlightedVerses.add(ordinal);
+    }
+
+    function addCustom(f) {
+        undoCustomHighlights.push(f);
+    }
+
+    function adjFocusedVerse(diff) {
+        focusedVerse.value += diff;
+    }
+
+    function setFocusedVerse(value) {
+        focusedVerse.value = value;
+    }
+
+    return {
+        highlightVerse, addCustom, highlightedVerses, resetHighlights, hasHighlights,
+        adjFocusedVerse, setFocusedVerse,
+        focusedVerse: computed(() => focusedVerse.value),
+    }
+}
diff --git a/app/bibleview-js/src/utils.js b/app/bibleview-js/src/utils.js
index ed7cda7980..42277e9daa 100644
--- a/app/bibleview-js/src/utils.js
+++ b/app/bibleview-js/src/utils.js
@@ -428,6 +428,15 @@ export function isInViewport(el) {
         rect.bottom >= 0
     );
 }
+
+export function isCompletelyInViewport(el) {
+    const rect = el.getBoundingClientRect();
+    return (
+        rect.bottom <= window.innerHeight &&
+        rect.top >= 0
+    );
+}
+
 export function adjustedColorOrig(color, ratio=0.2) {
     let col = Color(color);
     let cont = true;
diff --git a/app/bibleview-js/tests/unit/verse.spec.js b/app/bibleview-js/tests/unit/verse.spec.js
index c29d36e963..d62bf7c940 100644
--- a/app/bibleview-js/tests/unit/verse.spec.js
+++ b/app/bibleview-js/tests/unit/verse.spec.js
@@ -18,7 +18,7 @@
 
 import {shallowMount} from "@vue/test-utils";
 import Verse from "@/components/OSIS/Verse";
-import {useConfig, useVerseHighlight} from "@/composables";
+import {useConfig, useVerseHandler} from "@/composables";
 import {ref} from "@vue/reactivity";
 import {arrayLeq, mapFrom, rangeInside, rangesOverlap, setFrom} from "@/utils";
 import {useBookmarks, useGlobalBookmarks} from "@/composables/bookmarks";
@@ -73,7 +73,7 @@ describe("Verse.vue", () => {
             fragmentInfo,
             config,
             strings,
-            verseHighlight: useVerseHighlight(),
+            verseHighlight: useVerseHandler(),
         }
         wrapper = shallowMount(Verse,
             {
diff --git a/app/src/main/java/net/bible/android/control/page/window/WindowControl.kt b/app/src/main/java/net/bible/android/control/page/window/WindowControl.kt
index f01bdb1cb4..05f9c19752 100644
--- a/app/src/main/java/net/bible/android/control/page/window/WindowControl.kt
+++ b/app/src/main/java/net/bible/android/control/page/window/WindowControl.kt
@@ -20,8 +20,6 @@ package net.bible.android.control.page.window
 
 import android.app.AlertDialog
 import android.widget.Button
-import android.widget.FrameLayout
-import android.widget.LinearLayout
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.GlobalScope
 import kotlinx.coroutines.launch
diff --git a/app/src/main/java/net/bible/android/view/activity/page/BibleJavascriptInterface.kt b/app/src/main/java/net/bible/android/view/activity/page/BibleJavascriptInterface.kt
index 6f51b9c476..cc72050b1b 100644
--- a/app/src/main/java/net/bible/android/view/activity/page/BibleJavascriptInterface.kt
+++ b/app/src/main/java/net/bible/android/view/activity/page/BibleJavascriptInterface.kt
@@ -23,6 +23,8 @@ import android.content.Intent
 import android.net.Uri
 import android.text.method.LinkMovementMethod
 import android.util.Log
+import android.view.FocusFinder
+import android.view.View
 import android.webkit.JavascriptInterface
 import android.widget.TextView
 import androidx.core.content.FileProvider
@@ -398,17 +400,18 @@ class BibleJavascriptInterface(
         Log.i(TAG, "key $key")
         GlobalScope.launch(Dispatchers.Main) {
             when (key) {
-                "AltArrowDown" -> windowControl.focusNextWindow()
-                "AltArrowRight" -> windowControl.focusNextWindow()
-                "AltArrowUp" -> windowControl.focusPreviousWindow()
-                "AltArrowLeft" -> windowControl.focusPreviousWindow()
-                "AltKeyW" -> mainBibleActivity.documentViewManager.splitBibleArea?.binding?.restoreButtons?.requestFocus()
-                "AltKeyM" -> {
+                "KeyW" -> mainBibleActivity.documentViewManager.splitBibleArea?.binding?.restoreButtons?.requestFocus()
+                "KeyM" -> {
                     mainBibleActivity.binding.drawerLayout.open()
                     mainBibleActivity.binding.drawerLayout.requestFocus()
                 }
-                "AltKeyO" -> mainBibleActivity.showOptionsMenu()
-                "AltKeyG" -> bibleView.window.pageManager.currentPage.startKeyChooser(mainBibleActivity)
+                "KeyO" -> mainBibleActivity.showOptionsMenu()
+                "KeyG" -> bibleView.window.pageManager.currentPage.startKeyChooser(mainBibleActivity)
+                "ArrowDown" -> windowControl.focusNextWindow()
+                "ArrowRight" -> windowControl.focusNextWindow()
+                "ArrowUp" -> windowControl.focusPreviousWindow()
+                "ArrowLeft" -> windowControl.focusPreviousWindow()
+                "Tab" -> windowControl.focusNextWindow()
             }
         }
     }

From 03906bf14db404e7da766491b1340e9a1db3aedd Mon Sep 17 00:00:00 2001
From: Tuomas Airaksinen <tuomas.airaksinen@gmail.com>
Date: Thu, 25 Nov 2021 16:32:32 +0200
Subject: [PATCH 2/2] Fix tests

---
 app/bibleview-js/tests/unit/verse.spec.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/bibleview-js/tests/unit/verse.spec.js b/app/bibleview-js/tests/unit/verse.spec.js
index d62bf7c940..59da8e6cba 100644
--- a/app/bibleview-js/tests/unit/verse.spec.js
+++ b/app/bibleview-js/tests/unit/verse.spec.js
@@ -18,11 +18,12 @@
 
 import {shallowMount} from "@vue/test-utils";
 import Verse from "@/components/OSIS/Verse";
-import {useConfig, useVerseHandler} from "@/composables";
+import {useConfig} from "@/composables";
 import {ref} from "@vue/reactivity";
 import {arrayLeq, mapFrom, rangeInside, rangesOverlap, setFrom} from "@/utils";
 import {useBookmarks, useGlobalBookmarks} from "@/composables/bookmarks";
 import {useStrings} from "@/composables/strings";
+import {useVerseHandler} from "@/composables/verse-handling";
 window.bibleViewDebug = {}
 
 describe("Verse.vue", () => {
@@ -73,7 +74,7 @@ describe("Verse.vue", () => {
             fragmentInfo,
             config,
             strings,
-            verseHighlight: useVerseHandler(),
+            verseHandler: useVerseHandler(),
         }
         wrapper = shallowMount(Verse,
             {