diff --git a/frontend/src/ts/test/alt-tracker.ts b/frontend/src/ts/test/alt-tracker.ts
index edf80e459f48..fa13933921e8 100644
--- a/frontend/src/ts/test/alt-tracker.ts
+++ b/frontend/src/ts/test/alt-tracker.ts
@@ -1,7 +1,7 @@
 export let leftState = false;
 export let rightState = false;
 
-$(document).on("keydown", (e) => {
+document.addEventListener("keydown", (e: KeyboardEvent) => {
   if (e.code === "AltLeft") {
     leftState = true;
   } else if (e.code === "AltRight") {
@@ -9,7 +9,7 @@ $(document).on("keydown", (e) => {
   }
 });
 
-$(document).on("keyup", (e) => {
+document.addEventListener("keyup", (e: KeyboardEvent) => {
   if (e.code === "AltLeft") {
     leftState = false;
   } else if (e.code === "AltRight") {
diff --git a/frontend/src/ts/test/caps-warning.ts b/frontend/src/ts/test/caps-warning.ts
index cb78f72fbd7a..87a7ed847ac7 100644
--- a/frontend/src/ts/test/caps-warning.ts
+++ b/frontend/src/ts/test/caps-warning.ts
@@ -1,7 +1,8 @@
 import Config from "../config";
 import * as Misc from "../utils/misc";
+import { qsr } from "../utils/dom";
 
-const el = document.querySelector("#capsWarning") as HTMLElement;
+const el = qsr("#capsWarning");
 
 export let capsState = false;
 
@@ -9,23 +10,23 @@ let visible = false;
 
 function show(): void {
   if (!visible) {
-    el?.classList.remove("hidden");
+    el.removeClass("hidden");
     visible = true;
   }
 }
 
 function hide(): void {
   if (visible) {
-    el?.classList.add("hidden");
+    el.addClass("hidden");
     visible = false;
   }
 }
 
-function update(event: JQuery.KeyDownEvent | JQuery.KeyUpEvent): void {
-  if (event?.originalEvent?.key === "CapsLock" && capsState !== null) {
+function update(event: KeyboardEvent): void {
+  if (event.key === "CapsLock" && capsState !== null) {
     capsState = !capsState;
   } else {
-    const modState = event?.originalEvent?.getModifierState?.("CapsLock");
+    const modState = event.getModifierState?.("CapsLock");
     if (modState !== undefined) {
       capsState = modState;
     }
@@ -40,8 +41,8 @@ function update(event: JQuery.KeyDownEvent | JQuery.KeyUpEvent): void {
   } catch {}
 }
 
-$(document).on("keyup", update);
+document.addEventListener("keyup", update);
 
-$(document).on("keydown", (event) => {
+document.addEventListener("keydown", (event) => {
   if (Misc.isMac()) update(event);
 });
diff --git a/frontend/src/ts/test/shift-tracker.ts b/frontend/src/ts/test/shift-tracker.ts
index d60dad90a55e..90a7feea29a5 100644
--- a/frontend/src/ts/test/shift-tracker.ts
+++ b/frontend/src/ts/test/shift-tracker.ts
@@ -4,7 +4,7 @@ import * as KeyConverter from "../utils/key-converter";
 export let leftState = false;
 export let rightState = false;
 
-$(document).on("keydown", (e) => {
+document.addEventListener("keydown", (e: KeyboardEvent) => {
   if (e.code === "ShiftLeft") {
     leftState = true;
     rightState = false;
@@ -14,7 +14,7 @@ $(document).on("keydown", (e) => {
   }
 });
 
-$(document).on("keyup", (e) => {
+document.addEventListener("keyup", (e: KeyboardEvent) => {
   if (e.code === "ShiftLeft" || e.code === "ShiftRight") {
     leftState = false;
     rightState = false;