From 22ff8c74ac1458cbc3d1ed6c9a2810ca344e7068 Mon Sep 17 00:00:00 2001 From: mifi Date: Sat, 7 Feb 2026 01:38:24 -0300 Subject: [PATCH] Resolve test failures --- tests/unit/mobile-menu-helper.test.ts | 47 ++++++++++++++++++++++----- 1 file changed, 39 insertions(+), 8 deletions(-) diff --git a/tests/unit/mobile-menu-helper.test.ts b/tests/unit/mobile-menu-helper.test.ts index 95b6630..db3f296 100644 --- a/tests/unit/mobile-menu-helper.test.ts +++ b/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. });