Improve accessibility

locales/de/translation.json

@@ -59,6 +59,8 @@
         "donatePayPal": "Über PayPal spenden"
     },
     "menu": "Menü",
+    "closeMenu": "Menü schließen",
+    "openMenu": "Menü öffnen",
     "language": {
         "en": {
             "name": "Englisch"

locales/en/translation.json

@@ -59,6 +59,8 @@
         "donatePayPal": "Donate using PayPal"
     },
     "menu": "Menu",
+    "closeMenu": "Close Menu",
+    "openMenu": "Open Menu",
     "language": {
         "en": {
             "name": "English"

src/components/navigation.js

@@ -101,6 +101,7 @@ const Navigation = ({ isHome }) => {
                         toggled={offscreenNavActive}
                         rounded
                         size={30}
+                        label={t("openMenu")}
                     />
                 </div>
             </nav>

src/components/offscreenNav.js

@@ -8,6 +8,7 @@ import * as styles from "./navigation.module.scss";
 import { X } from "lucide-react";
 
 const OffScreenNav = ({ active, close }) => {
+    const { t } = useTranslation();
     if (typeof document === "undefined") return <></>;
 
     return createPortal(
@@ -17,7 +18,11 @@ const OffScreenNav = ({ active, close }) => {
             }
         >
             <div className={styles.inner}>
-                <button className={styles.close} onClick={close}>
+                <button
+                    className={styles.close}
+                    onClick={close}
+                    aria-label={t("closeMenu")}
+                >
                     <X />
                 </button>
                 <span>