@ons/design-system 72.9.1 → 72.10.0

package/components/fieldset/_macro.spec.js

@@ -1,189 +1,269 @@
 /** @jest-environment jsdom */
 
 import * as cheerio from 'cheerio';
-
 import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+import { EXAMPLE_FIELDSET, EXAMPLE_FIELDSET_NO_ID, EXAMPLE_FIELDSET_NO_LEGEND } from './_test_examples';
 
-const EXAMPLE_FIELDSET_BASIC = {
-    id: 'example-fieldset',
-    legend: 'Fieldset legend',
-    description: 'A fieldset description',
-};
+describe('FOR: Macro: Fieldset', () => {
+    describe('GIVEN: Params: id', () => {
+        describe('WHEN: id is provided', () => {
+            const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET));
 
-describe('macro: fieldset', () => {
-    it('passes jest-axe checks', async () => {
-        const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC));
+            test('THEN: renders fieldset with provided id', () => {
+                expect($('.ons-fieldset').attr('id')).toBe('example-fieldset');
+            });
 
-        const results = await axe($.html());
-        expect(results).toHaveNoViolations();
-    });
+            test('THEN: legend has correct aria-describedby attribute', () => {
+                const ariaDescByVal = $('.ons-fieldset__legend').attr('aria-describedby');
+                expect(ariaDescByVal).toBe('example-fieldset-legend-description');
+            });
+        });
 
-    it('has the provided `id` attribute', () => {
-        const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC));
+        describe('WHEN: id is not provided', () => {
+            const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_NO_ID));
 
-        expect($('.ons-fieldset').attr('id')).toBe('example-fieldset');
-    });
+            test('THEN: description has default id', () => {
+                const id = $('.ons-fieldset__description').attr('id');
+                expect(id).toBe('legend-description');
+            });
 
-    it('has the `legend` text', () => {
-        const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC));
-
-        const title = $('.ons-fieldset__legend-title').text();
-        expect(title).toBe('Fieldset legend');
+            test('THEN: legend has correct aria-describedby attribute', () => {
+                const ariaDescByVal = $('.ons-fieldset__legend').attr('aria-describedby');
+                expect(ariaDescByVal).toBe('legend-description');
+            });
+        });
     });
 
-    it('has the correct `aria-decribedby` value', () => {
-        const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC));
+    describe('GIVEN: Params: legend', () => {
+        describe('WHEN: legend is provided', () => {
+            const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET));
 
-        const ariaDescByVal = $('.ons-fieldset__legend').attr('aria-describedby');
-        expect(ariaDescByVal).toBe('example-fieldset-legend-description');
-    });
+            test('THEN: jest-axe checks pass', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
 
-    it('has the `description` text', () => {
-        const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC));
+            test('THEN: renders legend with provided text', () => {
+                const title = $('.ons-fieldset__legend-title').text().trim();
+                expect(title).toBe('Fieldset legend');
+            });
 
-        const title = $('.ons-fieldset__description').html().trim();
-        expect(title).toBe('A fieldset description');
-    });
+            test('THEN: legend has correct aria-describedby attribute', () => {
+                const ariaDescByVal = $('.ons-fieldset__legend').attr('aria-describedby');
+                expect(ariaDescByVal).toBe('example-fieldset-legend-description');
+            });
+
+            test('THEN: legend has the legend with description class', () => {
+                expect($('.ons-fieldset__legend').hasClass('ons-fieldset__legend--with-description')).toBe(true);
+            });
+        });
 
-    it('has the correct `description` `id` when no `fieldset `id` is provided', () => {
-        const $ = cheerio.load(renderComponent('fieldset', { ...EXAMPLE_FIELDSET_BASIC, id: undefined }));
+        describe('WHEN: legend is not provided and legendIsQuestionTitle is not set', () => {
+            const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_NO_LEGEND));
 
-        const id = $('.ons-fieldset__description').attr('id');
-        expect(id).toBe('legend-description');
+            test('THEN: does not render fieldset or legend', () => {
+                expect($('.ons-fieldset').length).toBe(0);
+                expect($('.ons-fieldset__legend').length).toBe(0);
+            });
+        });
     });
 
-    it('has the correct `description` `id` when `fieldset `id` is provided', () => {
-        const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC));
+    describe('GIVEN: Params: classes', () => {
+        describe('WHEN: classes are provided', () => {
+            const $ = cheerio.load(
+                renderComponent('fieldset', {
+                    ...EXAMPLE_FIELDSET,
+                    classes: 'extra-class another-extra-class',
+                }),
+            );
 
-        const id = $('.ons-fieldset__description').attr('id');
-        expect(id).toBe('example-fieldset-legend-description');
+            test('THEN: renders fieldset with provided classes', () => {
+                expect($('.ons-fieldset').hasClass('extra-class')).toBe(true);
+                expect($('.ons-fieldset').hasClass('another-extra-class')).toBe(true);
+            });
+        });
     });
 
-    it('has the correct `legend` class when `description` is provided', () => {
-        const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC));
+    describe('GIVEN: Params: legendClasses', () => {
+        describe('WHEN: legendClasses are provided', () => {
+            const $ = cheerio.load(
+                renderComponent('fieldset', {
+                    ...EXAMPLE_FIELDSET,
+                    legendClasses: 'extra-class another-extra-class',
+                }),
+            );
 
-        expect($('.ons-fieldset__legend').hasClass('ons-fieldset__legend--with-description')).toBe(true);
+            test('THEN: renders legend with provided classes', () => {
+                expect($('.ons-fieldset__legend').hasClass('extra-class')).toBe(true);
+                expect($('.ons-fieldset__legend').hasClass('another-extra-class')).toBe(true);
+            });
+        });
     });
 
-    it('has additionally provided style classes', () => {
-        const $ = cheerio.load(
-            renderComponent('fieldset', {
-                ...EXAMPLE_FIELDSET_BASIC,
-                classes: 'extra-class another-extra-class',
-            }),
-        );
+    describe('GIVEN: Params: attributes', () => {
+        describe('WHEN: attributes are provided', () => {
+            const $ = cheerio.load(
+                renderComponent('fieldset', {
+                    ...EXAMPLE_FIELDSET,
+                    attributes: {
+                        a: 123,
+                        b: 456,
+                    },
+                }),
+            );
 
-        expect($('.ons-fieldset').hasClass('extra-class')).toBe(true);
-        expect($('.ons-fieldset').hasClass('another-extra-class')).toBe(true);
+            test('THEN: renders fieldset with provided attributes', () => {
+                expect($('.ons-fieldset').attr('a')).toBe('123');
+                expect($('.ons-fieldset').attr('b')).toBe('456');
+            });
+        });
     });
 
-    it('has additionally provided `legendClasses`', () => {
-        const $ = cheerio.load(
-            renderComponent('fieldset', {
-                ...EXAMPLE_FIELDSET_BASIC,
-                legendClasses: 'extra-class another-extra-class',
-            }),
-        );
+    describe('GIVEN: Params: dontWrap', () => {
+        describe('WHEN: dontWrap is set to true', () => {
+            const $ = cheerio.load(
+                renderComponent(
+                    'fieldset',
+                    {
+                        ...EXAMPLE_FIELDSET,
+                        dontWrap: true,
+                    },
+                    'Example content...',
+                ),
+            );
 
-        expect($('.ons-fieldset__legend').hasClass('extra-class')).toBe(true);
-        expect($('.ons-fieldset__legend').hasClass('another-extra-class')).toBe(true);
-    });
+            test('THEN: renders without fieldset wrapper', () => {
+                expect($('.ons-fieldset').length).toBe(0);
+                expect($('.ons-input-items').length).toBe(1);
+            });
 
-    it('has additionally provided `attributes`', () => {
-        const $ = cheerio.load(
-            renderComponent('fieldset', {
-                ...EXAMPLE_FIELDSET_BASIC,
-                attributes: {
-                    a: 123,
-                    b: 456,
-                },
-            }),
-        );
-
-        expect($('.ons-fieldset').attr('a')).toBe('123');
-        expect($('.ons-fieldset').attr('b')).toBe('456');
-    });
+            test('THEN: renders content inside ons-input-items div', () => {
+                expect($('.ons-input-items').html()).toBe('Example content...');
+            });
+        });
 
-    it('has the correct element with `dontWrap`', () => {
-        const $ = cheerio.load(
-            renderComponent('fieldset', {
-                ...EXAMPLE_FIELDSET_BASIC,
-                dontWrap: true,
-            }),
-        );
+        describe('WHEN: dontWrap is set to true and legend is not provided', () => {
+            const $ = cheerio.load(renderComponent('fieldset', { ...EXAMPLE_FIELDSET_NO_LEGEND, dontWrap: true }));
 
-        expect($('.ons-input-items').length).toBe(1);
-        expect($('.ons-fieldset').length).toBe(0);
+            test('THEN: renders ons-input-items div without fieldset or legend', () => {
+                expect($('.ons-fieldset').length).toBe(0);
+                expect($('.ons-fieldset__legend').length).toBe(0);
+                expect($('.ons-input-items').length).toBe(1);
+            });
+        });
     });
 
-    it('calls with content', () => {
-        const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC, 'Example content...'));
+    describe('GIVEN: Content', () => {
+        describe('WHEN: content is provided', () => {
+            const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET, 'Example content...'));
 
-        const content = $('.ons-fieldset').html().trim();
-        expect(content).toEqual(expect.stringContaining('Example content...'));
+            test('THEN: renders fieldset with provided content', () => {
+                const content = $('.ons-fieldset').html();
+                expect(content).toContain('Example content...');
+            });
+        });
     });
 
-    it('calls the error component when `error` is provided', () => {
-        const faker = templateFaker();
-        const errorSpy = faker.spy('error');
+    describe('GIVEN: Params: error', () => {
+        describe('WHEN: error is provided', () => {
+            const faker = templateFaker();
+            const errorSpy = faker.spy('error');
 
-        faker.renderComponent('fieldset', {
-            ...EXAMPLE_FIELDSET_BASIC,
-            error: { text: 'There is an error' },
-        });
+            faker.renderComponent('fieldset', {
+                ...EXAMPLE_FIELDSET,
+                error: { text: 'Error message' },
+            });
 
-        expect(errorSpy.occurrences[0]).toEqual({
-            text: 'There is an error',
+            test('THEN: wraps fieldset with error component', () => {
+                expect(errorSpy.occurrences.length).toBe(1);
+                expect(errorSpy.occurrences[0]).toEqual({ text: 'Error message' });
+            });
         });
     });
 
-    describe('with `legendIsQuestionTitle`', () => {
-        it('passes jest-axe checks', async () => {
-            const $ = cheerio.load(renderComponent('fieldset', { ...EXAMPLE_FIELDSET_BASIC, legendIsQuestionTitle: true }));
+    describe('GIVEN: Params: legendIsQuestionTitle', () => {
+        describe('WHEN: legendIsQuestionTitle is set to true and legend is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('fieldset', {
+                    ...EXAMPLE_FIELDSET,
+                    legendIsQuestionTitle: true,
+                }),
+            );
 
-            const results = await axe($.html());
-            expect(results).toHaveNoViolations();
+            test('THEN: jest-axe checks pass', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+
+            test('THEN: description has correct classes', () => {
+                expect($('.ons-fieldset__description').hasClass('ons-fieldset__description--title')).toBe(true);
+                expect($('.ons-fieldset__description').hasClass('ons-u-mb-l')).toBe(true);
+            });
         });
 
-        it('renders the legend in a H1', () => {
-            const $ = cheerio.load(renderComponent('fieldset', { ...EXAMPLE_FIELDSET_BASIC, legendIsQuestionTitle: true }));
-            const titleTag = $('.ons-fieldset__legend-title')[0].tagName;
+        describe('WHEN: legendIsQuestionTitle is not set and legend is provided', () => {
+            const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET));
 
-            expect(titleTag).toBe('h1');
+            test('THEN: renders legend title in a span', () => {
+                const titleTag = $('.ons-fieldset__legend-title')[0].tagName;
+                expect(titleTag).toBe('span');
+            });
         });
+    });
 
-        it('has additionally provided `legendTitleClasses`', () => {
+    describe('GIVEN: Params: legendTitleClasses', () => {
+        describe('WHEN: legendTitleClasses are provided with legendIsQuestionTitle set to true', () => {
             const $ = cheerio.load(
                 renderComponent('fieldset', {
-                    ...EXAMPLE_FIELDSET_BASIC,
-                    legendTitleClasses: 'extra-class another-extra-class',
+                    ...EXAMPLE_FIELDSET,
                     legendIsQuestionTitle: true,
+                    legendTitleClasses: 'extra-class another-extra-class',
                 }),
             );
 
-            expect($('.ons-fieldset__legend-title').hasClass('extra-class')).toBe(true);
-            expect($('.ons-fieldset__legend-title').hasClass('another-extra-class')).toBe(true);
+            test('THEN: renders legend title with provided classes', () => {
+                expect($('.ons-fieldset__legend-title').hasClass('extra-class')).toBe(true);
+                expect($('.ons-fieldset__legend-title').hasClass('another-extra-class')).toBe(true);
+            });
         });
 
-        it('has the `legend` text', () => {
+        describe('WHEN: legendTitleClasses are provided without legendIsQuestionTitle', () => {
             const $ = cheerio.load(
                 renderComponent('fieldset', {
-                    ...EXAMPLE_FIELDSET_BASIC,
+                    ...EXAMPLE_FIELDSET,
                     legendTitleClasses: 'extra-class another-extra-class',
-                    legendIsQuestionTitle: true,
                 }),
             );
 
-            const title = $('.ons-fieldset__legend-title').html().trim();
-            expect(title).toBe('Fieldset legend');
+            test('THEN: legend title does not have additional classes', () => {
+                expect($('.ons-fieldset__legend-title').hasClass('extra-class')).toBe(false);
+                expect($('.ons-fieldset__legend-title').hasClass('another-extra-class')).toBe(false);
+            });
         });
+    });
+
+    describe('GIVEN: Params: description', () => {
+        describe('WHEN: description is not provided', () => {
+            const $ = cheerio.load(
+                renderComponent('fieldset', {
+                    ...EXAMPLE_FIELDSET,
+                    description: undefined,
+                }),
+            );
+
+            test('THEN: fieldset renders without description', () => {
+                expect($('.ons-fieldset__description').length).toBe(0);
+            });
 
-        it('has the correct `description` classes', () => {
-            const $ = cheerio.load(renderComponent('fieldset', { ...EXAMPLE_FIELDSET_BASIC, legendIsQuestionTitle: true }));
+            test('THEN: legend does not have aria-describedby attribute', () => {
+                const ariaDescByVal = $('.ons-fieldset__legend').attr('aria-describedby');
+                expect(ariaDescByVal).toBeUndefined();
+            });
 
-            expect($('.ons-fieldset__description').hasClass('ons-fieldset__description--title')).toBe(true);
-            expect($('.ons-fieldset__description').hasClass('ons-u-mb-l')).toBe(true);
+            test('THEN: legend does not have ons-fieldset__legend--with-description class', () => {
+                expect($('.ons-fieldset__legend').hasClass('ons-fieldset__legend--with-description')).toBe(false);
+            });
         });
     });
 });

package/components/fieldset/_test_examples.js

@@ -0,0 +1,15 @@
+export const EXAMPLE_FIELDSET = {
+    id: 'example-fieldset',
+    legend: 'Fieldset legend',
+    description: 'A fieldset description',
+};
+
+export const EXAMPLE_FIELDSET_NO_LEGEND = {
+    id: 'example-fieldset',
+    description: 'A fieldset description',
+};
+
+export const EXAMPLE_FIELDSET_NO_ID = {
+    legend: 'Fieldset legend',
+    description: 'A fieldset description',
+};

package/components/header/_header.scss

@@ -243,8 +243,19 @@
     }
 
     &-nav-menu {
+        // applies styles for non-js variant
         background-color: var(--ons-color-branded-tint);
+        border-bottom: 1px solid var(--ons-color-ocean-blue);
         width: 100%;
+        margin-bottom: 0;
+        padding-bottom: 1rem;
+
+        // updates styles when js is enabled
+        .ons-js-enabled & {
+            border-bottom: 0;
+            margin-bottom: 1rem;
+            padding-bottom: 0;
+        }
 
         &__key-list {
             border-bottom: 1px solid var(--ons-color-ocean-blue);

package/components/header/_macro.njk

@@ -188,7 +188,7 @@
                                     {{
                                         onsButton({
                                             "text": params.menuLinks.toggleMenuButton.text | default("Menu"),
-                                            "classes": "ons-u-fs-s--b ons-js-toggle-nav-menu button-nav",
+                                            "classes": "ons-u-fs-s--b ons-js-toggle-nav-menu button-nav active disabled",
                                             "type": "button",
                                             "variants": "menu",
                                             "iconType": "chevron",
@@ -196,24 +196,27 @@
                                             "attributes": {
                                                 "aria-label": params.menuLinks.toggleMenuButton.ariaLabel | default("Toggle menu"),
                                                 "aria-controls": params.menuLinks.id,
-                                                "aria-expanded": "false"
+                                                "aria-expanded": "true",
+                                                "aria-disabled": "true"
                                             }
                                         })
                                     }}
                                 </div>
                             {% endif %}
+
                             {% if params.searchLinks %}
                                 <div class="ons-header__links ons-grid__col">
                                     {{
                                         onsButton({
-                                            "classes": "ons-u-fs-s--b ons-js-toggle-header-search ons-btn--search ons-btn--search-icon",
+                                            "classes": "ons-u-fs-s--b ons-js-toggle-header-search ons-btn--close ons-btn--search-icon active disabled",
                                             "type": "button",
                                             "variants": "search",
                                             "iconType": "search",
                                             "attributes": {
                                                 "aria-label": params.searchLinks.searchButtonAriaLabel | default("Toggle search"),
                                                 "aria-controls": params.searchLinks.id,
-                                                "aria-expanded": "false"
+                                                "aria-expanded": "true",
+                                                "aria-disabled": "true"
                                             }
                                         })
                                     }}
@@ -261,9 +264,10 @@
 
             {% if params.variants == "basic" and params.menuLinks %}
                 <nav
-                    class="ons-u-d-no ons-js-nav-menu ons-header-nav-menu ons-u-mb-s ons-u-pt-2xl"
+                    class="ons-js-nav-menu ons-header-nav-menu ons-u-pt-2xl"
                     id="{{ params.menuLinks.id }}"
                     aria-label="{{ params.menuLinks.ariaLabel | default("Menu navigation") }}"
+                    aria-hidden="false"
                 >
                     {% if params.menuLinks.keyLinks %}
                         <div class="ons-container">
@@ -334,9 +338,10 @@
 
             {% if params.variants == "basic" and params.searchLinks %}
                 <nav
-                    class="ons-u-d-no ons-js-header-search ons-header-nav-search {{ params.searchLinks.classes }}"
+                    class="ons-js-header-search ons-header-nav-search {{ params.searchLinks.classes }}"
                     id="{{ params.searchLinks.id }}"
                     aria-label="{{ params.searchLinks.searchNavigationAriaLabel | default('Search navigation') }}"
+                    aria-hidden="false"
                 >
                     <div class="ons-container">
                         <div class="ons-header-nav-search__input">

package/components/header/_macro.spec.js

@@ -5,6 +5,7 @@ import * as cheerio from 'cheerio';
 import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 import { mapAll } from '../../tests/helpers/cheerio';
+import NavigationToggle from '../../components/navigation/navigation';
 
 import {
     EXAMPLE_HEADER_BASIC,
@@ -15,6 +16,8 @@ import {
     EXAMPLE_HEADER_LANGUAGE_CONFIG,
     EXAMPLE_HEADER_NAVIGATION_WITH_SUBNAVIGATION_CONFIG,
     EXAMPLE_HEADER_NAVIGATION_WITH_SITESEARCHAUTOSUGGEST,
+    EXAMPLE_HEADER_MENU_LINKS,
+    EXAMPLE_HEADER_SEARCH_AND_MENU_LINKS,
 } from './_test-examples';
 
 describe('FOR: Macro: Header', () => {
@@ -794,13 +797,14 @@ describe('FOR: Macro: Header', () => {
             test('THEN: renders search icon button', () => {
                 expect(buttonSpy.occurrences[0]).toEqual({
                     iconType: 'search',
-                    classes: 'ons-u-fs-s--b ons-js-toggle-header-search ons-btn--search ons-btn--search-icon',
+                    classes: 'ons-u-fs-s--b ons-js-toggle-header-search ons-btn--close ons-btn--search-icon active disabled',
                     type: 'button',
                     variants: 'search',
                     attributes: {
-                        'aria-label': 'Example aria label',
-                        'aria-expanded': 'false',
                         'aria-controls': 'search-links-id',
+                        'aria-expanded': 'true',
+                        'aria-label': 'Example aria label',
+                        'aria-disabled': 'true',
                     },
                 });
             });
@@ -880,5 +884,111 @@ describe('FOR: Macro: Header', () => {
                 expect($('.ons-header-nav-search').hasClass('custom-class')).toBe(true);
             });
         });
+
+        describe('WHEN: using basic header variant and search is active & disabled by default before JS loads', () => {
+            const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH_LINKS, variants: 'basic' }));
+            const $searchBtn = $('.ons-js-toggle-header-search');
+
+            test('THEN: adds the "active" class to the search toggle button', () => {
+                expect($searchBtn.hasClass('active')).toBe(true);
+            });
+
+            test('THEN: adds the "disabled" class to the search toggle button', () => {
+                expect($searchBtn.hasClass('disabled')).toBe(true);
+            });
+
+            test('THEN: sets aria-disabled="true" on the search toggle button', () => {
+                expect($searchBtn.attr('aria-disabled')).toBe('true');
+            });
+        });
+    });
+
+    describe('GIVEN: Params: menuLinks', () => {
+        describe('WHEN: using basic header variant and menu toggle is rendered before JS loads', () => {
+            const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_MENU_LINKS));
+            const $menuBtn = $('.ons-js-toggle-nav-menu');
+
+            test('THEN: adds the "active" class to the menu toggle button', () => {
+                expect($menuBtn.hasClass('active')).toBe(true);
+            });
+
+            test('THEN: adds the "disabled" class to the menu toggle button', () => {
+                expect($menuBtn.hasClass('disabled')).toBe(true);
+            });
+
+            test('THEN: sets aria-disabled="true" on the menu toggle button', () => {
+                expect($menuBtn.attr('aria-disabled')).toBe('true');
+            });
+
+            test('THEN: sets aria-expanded="true" on the menu toggle button', () => {
+                expect($menuBtn.attr('aria-expanded')).toBe('true');
+            });
+
+            test('THEN: sets aria-controls to the correct menu ID', () => {
+                expect($menuBtn.attr('aria-controls')).toBe('menu-links-id');
+            });
+        });
+
+        describe('GIVEN: Progressive enhancement via JS', () => {
+            describe('WHEN: both menu and search toggles are present', () => {
+                let $, menuBtn, searchBtn, menuEl, searchEl;
+
+                beforeEach(() => {
+                    $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SEARCH_AND_MENU_LINKS));
+                    document.body.innerHTML = $.html();
+
+                    menuBtn = document.querySelector('.ons-js-toggle-nav-menu');
+                    menuEl = document.querySelector('.ons-js-nav-menu');
+                    searchBtn = document.querySelector('.ons-js-toggle-header-search');
+                    searchEl = document.querySelector('.ons-js-header-search');
+
+                    if (menuBtn && menuEl) {
+                        const navToggleMenu = new NavigationToggle(menuBtn, menuEl, 'ons-u-d-no');
+                        navToggleMenu.registerEvents();
+                    }
+
+                    if (searchBtn && searchEl) {
+                        const navToggleSearch = new NavigationToggle(searchBtn, searchEl, 'ons-u-d-no');
+                        navToggleSearch.registerEvents();
+                    }
+                });
+
+                test('THEN: menu toggle is active (aria-disabled false, no disabled class)', () => {
+                    expect(menuBtn).not.toBeNull();
+                    expect(menuBtn.getAttribute('aria-disabled')).toBe('false');
+                    expect(menuBtn.classList.contains('disabled')).toBe(false);
+                });
+
+                test('THEN: search toggle is active (aria-disabled false, no disabled class)', () => {
+                    expect(searchBtn).not.toBeNull();
+                    expect(searchBtn.getAttribute('aria-disabled')).toBe('false');
+                    expect(searchBtn.classList.contains('disabled')).toBe(false);
+                });
+
+                test('WHEN: clicking menu toggle closes search if open', () => {
+                    expect(menuBtn && searchBtn).not.toBeNull();
+
+                    // open search followed by menu
+                    searchBtn.click();
+                    menuBtn.click();
+
+                    expect(searchBtn.classList.contains('active')).toBe(false);
+                    expect(searchEl.getAttribute('aria-hidden')).toBe('true');
+                    expect(searchEl.classList.contains('ons-u-d-no')).toBe(true);
+                });
+
+                test('WHEN: clicking search toggle closes menu if open', () => {
+                    expect(menuBtn && searchBtn).not.toBeNull();
+
+                    // open menu followed by search
+                    menuBtn.click();
+                    searchBtn.click();
+
+                    expect(menuBtn.classList.contains('active')).toBe(false);
+                    expect(menuEl.getAttribute('aria-hidden')).toBe('true');
+                    expect(menuEl.classList.contains('ons-u-d-no')).toBe(true);
+                });
+            });
+        });
     });
 });