Chore: Accessibility

src/components/Asset.tsx

@@ -13,6 +13,7 @@ import {
   Switch,
   createEffect,
   createSignal,
+  onCleanup,
 } from "solid-js";
 import { FontAwesomeIcon } from "./FontAwesomeIcon";
 
@@ -71,9 +72,33 @@ function AssetHandler() {
       setControlls(false);
     });
 
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!active() || "Escape" != event.key) return;
+      event.preventDefault();
+      setActive("");
+    };
+
+    const handleWheel = (event: WheelEvent) => {
+      if (!active()) return;
+      event.preventDefault();
+      if (event.deltaY > 0 && !(zoomLevel() <= 0)) setZoomLevel((e) => e - 1);
+      else if (event.deltaY < 0 && !(zoomLevel() >= 4))
+        setZoomLevel((e) => e + 1);
+    };
+
+    createEffect(() => {
+      window.addEventListener("keydown", handleKeyDown);
+      window.addEventListener("wheel", handleWheel, { passive: false });
+      onCleanup(() => {
+        window.removeEventListener("keydown", handleKeyDown);
+        window.removeEventListener("wheel", handleWheel);
+      });
+    });
+
     return (
       <div
         ref={wrapperRef!}
+        onClick={(e) => e.target === wrapperRef && setActive("")}
         onMouseMove={handleMouseMove}
         classList={{ "fullscreen-asset": true, active: !!active() }}
       >
@@ -105,14 +130,14 @@ function AssetHandler() {
           </Show>
           <button
             onClick={() => setZoomLevel((e) => e + 1)}
-            disabled={zoomLevel() === 4}
+            disabled={zoomLevel() >= 4}
             title="Zoom +"
           >
             <FontAwesomeIcon icon={faMagnifyingGlassPlus} />
           </button>
           <button
             onClick={() => setZoomLevel((e) => e - 1)}
-            disabled={zoomLevel() === 0}
+            disabled={zoomLevel() <= 0}
             title="Zoom -"
           >
             <FontAwesomeIcon icon={faMagnifyingGlassMinus} />

src/components/de/Navbar.tsx

@@ -6,7 +6,7 @@ import {
   faGlobe,
   faXmark,
 } from "@fortawesome/pro-regular-svg-icons";
-import { createEffect, createSignal } from "solid-js";
+import { createEffect, createSignal, onCleanup } from "solid-js";
 import { A, useIsRouting, useLocation, useNavigate } from "solid-start";
 import { FontAwesomeIcon } from "../FontAwesomeIcon";
 
@@ -23,6 +23,19 @@ function Navbar() {
     setMenu(false);
   });
 
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (!menu() || "Escape" != event.key) return;
+    event.preventDefault();
+    setMenu(false);
+  };
+
+  createEffect(() => {
+    window.addEventListener("keydown", handleKeyDown);
+    onCleanup(() => {
+      window.removeEventListener("keydown", handleKeyDown);
+    });
+  });
+
   return (
     <>
       <div id="navbar" style={{ visibility: menu() ? "visible" : "hidden" }}>

src/components/en/Navbar.tsx

@@ -6,7 +6,7 @@ import {
   faGlobe,
   faXmark,
 } from "@fortawesome/pro-regular-svg-icons";
-import { createEffect, createSignal } from "solid-js";
+import { createEffect, createSignal, onCleanup } from "solid-js";
 import { A, useIsRouting, useLocation, useNavigate } from "solid-start";
 import { FontAwesomeIcon } from "../FontAwesomeIcon";
 
@@ -23,6 +23,19 @@ function Navbar() {
     setMenu(false);
   });
 
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (!menu() || "Escape" != event.key) return;
+    event.preventDefault();
+    setMenu(false);
+  };
+
+  createEffect(() => {
+    window.addEventListener("keydown", handleKeyDown);
+    onCleanup(() => {
+      window.removeEventListener("keydown", handleKeyDown);
+    });
+  });
+
   return (
     <>
       <div id="navbar" style={{ visibility: menu() ? "visible" : "hidden" }}>