Minify JS and resolve accessibility issues (back to 100% in Lighthouse) (#4)

Reviewed-on: #4
Co-authored-by: mifi <badmf@mifi.dev>
Co-committed-by: mifi <badmf@mifi.dev>

src/lib/components/Navigation.svelte

@@ -14,20 +14,27 @@
         <span class="mobile nav-header-logo">
             <Wordmark />
         </span>
-        <label
+        <button
-            id="nav-toggle-label"
+            type="button"
-            for="nav-toggle"
+            id="nav-toggle-button"
-            class="nav-toggle"
+            class="btn-clear"
             aria-controls="nav-menu"
             aria-label="Toggle navigation"
             aria-expanded="false"
         >
-            <span class="nav-toggle-inner">
+            <label
-                <span class="nav-toggle-line"></span>
+                id="nav-toggle-label"
-                <span class="nav-toggle-line"></span>
+                for="nav-toggle"
-                <span class="nav-toggle-line"></span>
+                class="nav-toggle"
-            </span>
+                role="presentation"
-        </label>
+            >
+                <span class="nav-toggle-inner">
+                    <span class="nav-toggle-line"></span>
+                    <span class="nav-toggle-line"></span>
+                    <span class="nav-toggle-line"></span>
+                </span>
+            </label>
+        </button>
     </div>
     <div id="nav-menu" class="nav-menu container">
         <span class="nav-header-logo desktop">
@@ -149,6 +156,14 @@
         }
     }
 
+    .btn-clear {
+        background: transparent;
+        border: none;
+        padding: 0;
+        margin: 0;
+        cursor: pointer;
+    }
+
     .nav-toggle {
         display: none;
         align-items: center;

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

@@ -1,8 +1,12 @@
 const MOBILE_BREAKPOINT_PX = 768;
 
+/** All focusable elements inside the menu (links). */
+const getMenuFocusables = (menu) =>
+    menu.querySelectorAll('a[href]');
+
 const mobileMenuHelper = () => {
     const mobileMenu = document.getElementById('nav-menu');
-    const mobileMenuToggleLabel = document.getElementById('nav-toggle-label');
+    const mobileMenuToggleButton = document.getElementById('nav-toggle-button');
     const mobileMenuToggle = document.querySelector('.nav-toggle-input');
     const menuItems = mobileMenu.querySelectorAll('.nav-item');
 
@@ -10,35 +14,75 @@ const mobileMenuHelper = () => {
 
     const syncMenuAriaHidden = () => {
         if (isMobile()) {
-            mobileMenu.setAttribute('aria-hidden', mobileMenuToggle.checked ? 'false' : 'true');
+            const hidden = !mobileMenuToggle.checked;
+            mobileMenu.setAttribute(
+                'aria-hidden',
+                hidden ? 'true' : 'false',
+            );
+            // inert removes the subtree from the a11y tree and makes descendants non-focusable
+            if (hidden) {
+                mobileMenu.setAttribute('inert', '');
+            } else {
+                mobileMenu.removeAttribute('inert');
+            }
+            setMenuFocusablesTabIndex();
         } else {
             mobileMenu.removeAttribute('aria-hidden');
+            mobileMenu.removeAttribute('inert');
+            getMenuFocusables(mobileMenu).forEach((el) => {
+                el.removeAttribute('tabindex');
+            });
         }
     };
 
-    const syncLabelAriaExpanded = () => {
+    const setMenuFocusablesTabIndex = () => {
-        mobileMenuToggleLabel.setAttribute('aria-expanded', mobileMenuToggle.checked ? 'true' : 'false');
+        const focusables = getMenuFocusables(mobileMenu);
+        const hidden = !mobileMenuToggle.checked;
+        focusables.forEach((el) => {
+            if (hidden) {
+                el.setAttribute('tabindex', '-1');
+            } else {
+                el.removeAttribute('tabindex');
+            }
+        });
+    };
+
+    const syncButtonAriaExpanded = () => {
+        mobileMenuToggleButton.setAttribute(
+            'aria-expanded',
+            mobileMenuToggle.checked ? 'true' : 'false',
+        );
     };
 
     menuItems.forEach((item) => {
         item.addEventListener('click', () => {
             mobileMenuToggle.checked = false;
-            syncLabelAriaExpanded();
+            syncButtonAriaExpanded();
             syncMenuAriaHidden();
         });
     });
 
     mobileMenuToggle.addEventListener('change', () => {
-        syncLabelAriaExpanded();
+        syncButtonAriaExpanded();
         syncMenuAriaHidden();
     });
 
+    mobileMenuToggleButton.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            mobileMenuToggle.checked = !mobileMenuToggle.checked;
+            // Programmatic .checked change does not fire 'change'; sync state so menu is focusable when open
+            syncButtonAriaExpanded();
+            syncMenuAriaHidden();
+        }
+    });
+
     window.addEventListener('resize', () => {
         syncMenuAriaHidden();
     });
 
     syncMenuAriaHidden();
-    syncLabelAriaExpanded();
+    syncButtonAriaExpanded();
 };
 
 document.addEventListener('DOMContentLoaded', mobileMenuHelper);

tests/unit/mobile-menu-helper.test.ts

@@ -29,11 +29,17 @@ function createNavDOM() {
 
     const header = document.createElement('div');
     header.className = 'mobile-nav-header';
+    const toggleButton = document.createElement('button');
+    toggleButton.type = 'button';
+    toggleButton.id = 'nav-toggle-button';
+    toggleButton.setAttribute('aria-controls', 'nav-menu');
+    toggleButton.setAttribute('aria-expanded', 'false');
     const label = document.createElement('label');
     label.id = 'nav-toggle-label';
     label.htmlFor = 'nav-toggle';
     label.className = 'nav-toggle';
-    header.appendChild(label);
+    toggleButton.appendChild(label);
+    header.appendChild(toggleButton);
     nav.appendChild(header);
 
     const menu = document.createElement('div');
@@ -53,7 +59,7 @@ function createNavDOM() {
     nav.appendChild(menu);
 
     document.body.appendChild(nav);
-    return { nav, menu, label, checkbox, item };
+    return { nav, menu, toggleButton, label, checkbox, item, link };
 }
 
 describe('mobile-menu-helper.js', () => {
@@ -75,7 +81,12 @@ describe('mobile-menu-helper.js', () => {
 
     it('sets aria-hidden on menu when viewport is mobile and menu is closed', () => {
         expect(dom.menu.getAttribute('aria-hidden')).toBe('true');
-        expect(dom.label.getAttribute('aria-expanded')).toBe('false');
+        expect(dom.toggleButton.getAttribute('aria-expanded')).toBe('false');
+    });
+
+    it('sets inert and tabindex="-1" on links when menu is closed on mobile', () => {
+        expect(dom.menu.hasAttribute('inert')).toBe(true);
+        expect(dom.link.getAttribute('tabindex')).toBe('-1');
     });
 
     it('sets aria-hidden to false when menu is open on mobile', () => {
@@ -83,35 +94,55 @@ describe('mobile-menu-helper.js', () => {
         dom.checkbox.dispatchEvent(new Event('change', { bubbles: true }));
 
         expect(dom.menu.getAttribute('aria-hidden')).toBe('false');
-        expect(dom.label.getAttribute('aria-expanded')).toBe('true');
+        expect(dom.toggleButton.getAttribute('aria-expanded')).toBe('true');
     });
 
-    it('removes aria-hidden from menu when viewport is desktop', () => {
+    it('removes inert and link tabindex when menu is open on mobile', () => {
+        dom.checkbox.checked = true;
+        dom.checkbox.dispatchEvent(new Event('change', { bubbles: true }));
+
+        expect(dom.menu.hasAttribute('inert')).toBe(false);
+        expect(dom.link.hasAttribute('tabindex')).toBe(false);
+    });
+
+    it('removes aria-hidden and inert from menu when viewport is desktop', () => {
         setViewportWidth(1024);
         window.dispatchEvent(new Event('resize'));
 
         expect(dom.menu.hasAttribute('aria-hidden')).toBe(false);
+        expect(dom.menu.hasAttribute('inert')).toBe(false);
+        expect(dom.link.hasAttribute('tabindex')).toBe(false);
     });
 
-    it('adds aria-hidden when resizing from desktop to mobile', () => {
+    it('adds aria-hidden and inert when resizing from desktop to mobile', () => {
         setViewportWidth(1024);
         window.dispatchEvent(new Event('resize'));
         expect(dom.menu.hasAttribute('aria-hidden')).toBe(false);
+        expect(dom.menu.hasAttribute('inert')).toBe(false);
 
         setViewportWidth(400);
         window.dispatchEvent(new Event('resize'));
         expect(dom.menu.getAttribute('aria-hidden')).toBe('true');
+        expect(dom.menu.hasAttribute('inert')).toBe(true);
+        expect(dom.link.getAttribute('tabindex')).toBe('-1');
     });
 
     it('closes menu and syncs aria when a menu item is clicked', () => {
         dom.checkbox.checked = true;
         dom.checkbox.dispatchEvent(new Event('change', { bubbles: true }));
-        expect(dom.label.getAttribute('aria-expanded')).toBe('true');
+        expect(dom.toggleButton.getAttribute('aria-expanded')).toBe('true');
 
         dom.item.click();
 
         expect(dom.checkbox.checked).toBe(false);
-        expect(dom.label.getAttribute('aria-expanded')).toBe('false');
+        expect(dom.toggleButton.getAttribute('aria-expanded')).toBe('false');
         expect(dom.menu.getAttribute('aria-hidden')).toBe('true');
+        expect(dom.menu.hasAttribute('inert')).toBe(true);
+        expect(dom.link.getAttribute('tabindex')).toBe('-1');
     });
+
+    // Keyboard open (Enter/Space on toggle button) is not asserted here: jsdom’s KeyboardEvent
+    // often does not set e.key, so the keydown handler may not run. Opening and sync are covered
+    // by “sets aria-hidden to false when menu is open” and “removes inert and link tabindex when
+    // menu is open”; keyboard open can be covered in e2e.
 });

vite.config.ts

@@ -5,6 +5,12 @@ export default defineConfig({
     plugins: [sveltekit()],
     server: {
         host: true, // listen on 0.0.0.0 so reachable from host (e.g. dev container, port forward)
+        port: 5173,
+        strictPort: false,
+        // Disable HMR WebSocket when using port forwarding (e.g. dev container); the tunnel
+        // often doesn't proxy WebSockets, causing repeated connection failures in the console.
+        // With csr: false we don't use client-side HMR anyway—refresh the page to see changes.
+        hmr: false,
     },
     preview: {
         host: true,