A bit of JS to improve the UX slightly... More tests. Everything is kosher now.

static/assets/js/mobile-menu-helper.js

@@ -0,0 +1,44 @@
+const MOBILE_BREAKPOINT_PX = 768;
+
+const mobileMenuHelper = () => {
+    const mobileMenu = document.getElementById('nav-menu');
+    const mobileMenuToggleLabel = document.getElementById('nav-toggle-label');
+    const mobileMenuToggle = document.querySelector('.nav-toggle-input');
+    const menuItems = mobileMenu.querySelectorAll('.nav-item');
+
+    const isMobile = () => window.innerWidth <= MOBILE_BREAKPOINT_PX;
+
+    const syncMenuAriaHidden = () => {
+        if (isMobile()) {
+            mobileMenu.setAttribute('aria-hidden', mobileMenuToggle.checked ? 'false' : 'true');
+        } else {
+            mobileMenu.removeAttribute('aria-hidden');
+        }
+    };
+
+    const syncLabelAriaExpanded = () => {
+        mobileMenuToggleLabel.setAttribute('aria-expanded', mobileMenuToggle.checked ? 'true' : 'false');
+    };
+
+    menuItems.forEach((item) => {
+        item.addEventListener('click', () => {
+            mobileMenuToggle.checked = false;
+            syncLabelAriaExpanded();
+            syncMenuAriaHidden();
+        });
+    });
+
+    mobileMenuToggle.addEventListener('change', () => {
+        syncLabelAriaExpanded();
+        syncMenuAriaHidden();
+    });
+
+    window.addEventListener('resize', () => {
+        syncMenuAriaHidden();
+    });
+
+    syncMenuAriaHidden();
+    syncLabelAriaExpanded();
+};
+
+document.addEventListener('DOMContentLoaded', mobileMenuHelper);