mifi-ventures/landing
1
1
Fork 0
Code Pull Requests Actions Packages Releases Activity

Minify JS and resolve accessibility issues (back to 100% in Lighthouse) (#4)
All checks were successful
ci/woodpecker/push/ci Pipeline was successful
Details
ci/woodpecker/push/deploy Pipeline was successful
Details

Browse Source 
Reviewed-on: #4
Co-authored-by: mifi <badmf@mifi.dev>
Co-committed-by: mifi <badmf@mifi.dev>
This commit was merged in pull request #4.
This commit is contained in:
Mike Fitzpatrick
2026-02-07 04:41:31 +00:00
committed by Mike Fitzpatrick
parent 11ff3dcff3
commit 864c9a735c
4 changed files with 121 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/lib/components/Navigation.svelte
View File

@@ -14,20 +14,27 @@
<span class="mobile nav-header-logo">
<Wordmark />
</span>
<label
id="nav-toggle-label"
for="nav-toggle"
class="nav-toggle"
<button
type="button"
id="nav-toggle-button"
class="btn-clear"
aria-controls="nav-menu"
aria-label="Toggle navigation"
aria-expanded="false"
>
<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>
<label
id="nav-toggle-label"
for="nav-toggle"
class="nav-toggle"
role="presentation"
>
<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;

58
static/assets/js/mobile-menu-helper.js
View File

@@ -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 = () => {
mobileMenuToggleLabel.setAttribute('aria-expanded', mobileMenuToggle.checked ? 'true' : 'false');
const setMenuFocusablesTabIndex = () => {
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);

47
tests/unit/mobile-menu-helper.test.ts
View File

@@ -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.
});

6
vite.config.ts
View File

@@ -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,