components/Navbar/Navbar.tsx

@@ -120,6 +120,7 @@ export default function Navbar() {
       </button>
       <ul
         id="main-navigation"
+        inert={!menuOpen}
         className={[
           styles["nav-links"],
           menuOpen ? styles.open : "",

components/Navbar/NavbarSubMenu.module.css

@@ -2,6 +2,7 @@
   --nav-submenu-max-width: var(--container-width);
   --nav-submenu-bg: var(--color-surface);
 }
+
 .nav-submenu {
   display: grid;
   list-style: none;
@@ -18,10 +19,6 @@
   background-color: var(--nav-bg);
 }
 
-.nav-submenu[hidden] {
-  display: none !important;
-}
-
 .nav-submenu.open {
   max-height: var(--submenu-h);
   opacity: 1;

components/Navbar/NavbarSubMenu.tsx

@@ -71,7 +71,7 @@ export const NavbarSubMenu: FC<Props> = ({
       <ul
         ref={subMenuRef}
         id={`submenu-${id}`}
-        hidden={!open}
+        inert={!open}
         className={[
           styles["nav-submenu"],
           open ? styles.open : "",