From d76fadd6e8117fbcf331d6c18baffce67f12a637 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Sun, 22 Feb 2026 13:05:36 +0100
Subject: [PATCH] feat: Improve mobile menu accessibility with `inert`
 attribute and enhance skip link styling and focus behavior.

---
 components/Header.tsx   | 1 +
 components/SkipLink.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/Header.tsx b/components/Header.tsx
index 8d4f61f5..8a9cada3 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -293,6 +293,7 @@ export default function Header() {
           aria-modal="true"
           aria-label={t('menu')}
           ref={mobileMenuRef}
+          inert={isMobileMenuOpen ? undefined : true}
         >
           <nav className="flex-grow flex flex-col justify-center items-center p-8 space-y-8">
             {menuItems.map((item, idx) => (
diff --git a/components/SkipLink.tsx b/components/SkipLink.tsx
index 2cae3569..e33c2ed9 100644
--- a/components/SkipLink.tsx
+++ b/components/SkipLink.tsx
@@ -8,7 +8,7 @@ export default function SkipLink() {
   return (
     <a
       href="#main-content"
-      className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[100] focus:px-6 focus:py-3 focus:bg-white focus:text-primary-dark focus:font-bold focus:rounded-lg focus:shadow-xl focus:outline-none focus:ring-2 focus:ring-accent transition-all"
+      className="fixed -top-full left-4 z-[100] px-6 py-3 bg-white text-primary-dark font-bold rounded-lg shadow-xl outline-none ring-2 ring-accent transition-all duration-300 focus:top-4"
     >
       {t('skipToContent')}
     </a>