This commit is contained in:
@@ -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.
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user