@ons/design-system 73.3.0 → 73.4.0

package/components/header/_macro.spec.js

@@ -35,6 +35,100 @@ describe('FOR: Macro: Header', () => {
             });
         });
     });
+
+    describe('Accessibility: search heading', () => {
+        test('THEN: axe passes when search heading is present (params.search.links.heading)', async () => {
+            const params = {
+                ...EXAMPLE_HEADER_BASIC,
+                variants: 'basic',
+                search: {
+                    links: {
+                        heading: 'Popular searches',
+                        itemsList: [{ text: 'Census', url: '/census' }],
+                    },
+                    form: { action: '/search' },
+                },
+                searchLinks: undefined,
+            };
+            const $ = cheerio.load(renderComponent('header', params));
+            const results = await axe($.html());
+            expect(results).toHaveNoViolations();
+            expect($('.ons-header-nav-search__heading').text()).toBe('Popular searches');
+        });
+
+        test('THEN: axe passes when search heading is present (params.searchLinks.heading)', async () => {
+            const params = {
+                ...EXAMPLE_HEADER_BASIC,
+                variants: 'basic',
+                search: undefined,
+                searchLinks: {
+                    heading: 'Other searches',
+                    itemsList: [{ text: 'Population', url: '/population' }],
+                },
+            };
+            const $ = cheerio.load(renderComponent('header', params));
+            const results = await axe($.html());
+            expect(results).toHaveNoViolations();
+            expect($('.ons-header-nav-search__heading').text()).toBe('Other searches');
+        });
+
+        test('THEN: axe passes and no h2 is rendered when no heading present', async () => {
+            const params = {
+                ...EXAMPLE_HEADER_BASIC,
+                variants: 'basic',
+                search: { links: { itemsList: [] }, form: { action: '/search' } },
+                searchLinks: undefined,
+            };
+            const $ = cheerio.load(renderComponent('header', params));
+            const results = await axe($.html());
+            expect(results).toHaveNoViolations();
+            expect($('.ons-header-nav-search__heading').length).toBe(0);
+        });
+    });
+
+    describe('Snapshot: search heading', () => {
+        test('matches snapshot when search heading is present (params.search.links.heading)', () => {
+            const params = {
+                ...EXAMPLE_HEADER_BASIC,
+                variants: 'basic',
+                search: {
+                    links: {
+                        heading: 'Popular searches',
+                        itemsList: [{ text: 'Census', url: '/census' }],
+                    },
+                    form: { action: '/search' },
+                },
+                searchLinks: undefined,
+            };
+            const $ = cheerio.load(renderComponent('header', params));
+            expect($.html()).toMatchSnapshot();
+        });
+
+        test('matches snapshot when search heading is present (params.searchLinks.heading)', () => {
+            const params = {
+                ...EXAMPLE_HEADER_BASIC,
+                variants: 'basic',
+                search: undefined,
+                searchLinks: {
+                    heading: 'Other searches',
+                    itemsList: [{ text: 'Population', url: '/population' }],
+                },
+            };
+            const $ = cheerio.load(renderComponent('header', params));
+            expect($.html()).toMatchSnapshot();
+        });
+
+        test('matches snapshot when no search heading is present', () => {
+            const params = {
+                ...EXAMPLE_HEADER_BASIC,
+                variants: 'basic',
+                search: { links: { itemsList: [] }, form: { action: '/search' } },
+                searchLinks: undefined,
+            };
+            const $ = cheerio.load(renderComponent('header', params));
+            expect($.html()).toMatchSnapshot();
+        });
+    });
     describe('GIVEN: Params: variants', () => {
         describe('WHEN: variants are provided', () => {
             const $ = cheerio.load(
@@ -823,12 +917,12 @@ 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--close ons-btn--search-icon active disabled',
+                    classes: 'ons-u-fs-s--b ons-js-toggle-header-search ons-u-db-no-js_disabled ons-btn--search-icon disabled',
                     type: 'button',
                     variants: 'search',
                     attributes: {
                         'aria-controls': 'search-id',
-                        'aria-expanded': 'true',
+                        'aria-expanded': 'false',
                         'aria-label': 'Custom search button aria label',
                         'aria-disabled': 'true',
                     },
@@ -911,12 +1005,12 @@ describe('FOR: Macro: Header', () => {
             });
         });
 
-        describe('WHEN: using basic header variant and search is active & disabled by default before JS loads', () => {
+        describe('WHEN: using basic header variant and search is disabled by default before JS loads', () => {
             const $ = cheerio.load(renderComponent('header', { ...EXAMPLE_HEADER_SEARCH, 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: does not add the "active" class to the search toggle button', () => {
+                expect($searchBtn.hasClass('active')).toBe(false);
             });
 
             test('THEN: adds the "disabled" class to the search toggle button', () => {
@@ -926,6 +1020,10 @@ describe('FOR: Macro: Header', () => {
             test('THEN: sets aria-disabled="true" on the search toggle button', () => {
                 expect($searchBtn.attr('aria-disabled')).toBe('true');
             });
+
+            test('THEN: sets aria-expanded="false" on the search toggle button', () => {
+                expect($searchBtn.attr('aria-expanded')).toBe('false');
+            });
         });
 
         describe('WHEN: search is provided with all custom properties', () => {
@@ -1044,12 +1142,12 @@ 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--close ons-btn--search-icon active disabled',
+                    classes: 'ons-u-fs-s--b ons-js-toggle-header-search ons-u-db-no-js_disabled ons-btn--search-icon disabled',
                     type: 'button',
                     variants: 'search',
                     attributes: {
                         'aria-controls': 'search-links-id',
-                        'aria-expanded': 'true',
+                        'aria-expanded': 'false',
                         'aria-label': 'Custom search button aria label',
                         'aria-disabled': 'true',
                     },
@@ -1132,12 +1230,12 @@ describe('FOR: Macro: Header', () => {
             });
         });
 
-        describe('WHEN: using basic header variant and search is active & disabled by default before JS loads', () => {
+        describe('WHEN: using basic header variant and search is 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: does not add the "active" class to the search toggle button', () => {
+                expect($searchBtn.hasClass('active')).toBe(false);
             });
 
             test('THEN: adds the "disabled" class to the search toggle button', () => {
@@ -1147,6 +1245,10 @@ describe('FOR: Macro: Header', () => {
             test('THEN: sets aria-disabled="true" on the search toggle button', () => {
                 expect($searchBtn.attr('aria-disabled')).toBe('true');
             });
+
+            test('THEN: sets aria-expanded="false" on the search toggle button', () => {
+                expect($searchBtn.attr('aria-expanded')).toBe('false');
+            });
         });
 
         describe('WHEN: searchLinks are provided with all custom properties', () => {
@@ -1259,8 +1361,8 @@ describe('FOR: Macro: Header', () => {
             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: does not add the "active" class to the menu toggle button', () => {
+                expect($menuBtn.hasClass('active')).toBe(false);
             });
 
             test('THEN: adds the "disabled" class to the menu toggle button', () => {
@@ -1271,8 +1373,8 @@ describe('FOR: Macro: Header', () => {
                 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-expanded="false" on the menu toggle button', () => {
+                expect($menuBtn.attr('aria-expanded')).toBe('false');
             });
 
             test('THEN: sets aria-controls to the correct menu ID', () => {

package/components/header/example-header-basic-with-search-no-heading.njk

@@ -0,0 +1,22 @@
+---
+'fullWidth': true
+---
+
+{% from "components/header/_macro.njk" import onsHeader %}
+
+{{
+    onsHeader({
+        "variants": 'basic',
+        "search": {
+            "id": "search",
+            "navAriaLabel": 'Nav Search',
+            "toggleAriaLabel": 'Toggle search',
+            "form": {
+                "action":  "https://www.ons.gov.uk/search" ,
+                "inputName": "q",
+                "inputLabel": "Search the ONS",
+                "buttonText": "Search"
+             }
+        }
+    })
+}}

package/components/header/header.spec.js

@@ -1,6 +1,6 @@
 import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 import { EXAMPLE_HEADER_SEARCH_AND_MENU_LINKS } from './_test-examples';
-import { getNodeAttributes } from '../../tests/helpers/puppeteer';
+import { getNodeAttributes, setViewport } from '../../tests/helpers/puppeteer';
 
 describe('script: header', () => {
     beforeEach(async () => {
@@ -107,6 +107,23 @@ describe('script: header', () => {
             const isAriaHiddenFalse = await page.$eval('.ons-header-nav-menu', (el) => el.getAttribute('aria-hidden') === 'false');
             expect(isAriaHiddenFalse).toBe(true);
         });
+
+        describe('and only the viewport height changes', () => {
+            beforeEach(async () => {
+                const viewport = page.viewport();
+                await setViewport(page, { width: viewport.width, height: viewport.height - 150 });
+            });
+
+            it('then the navigation menu stays displayed', async () => {
+                const isMenuNavVisible = await page.$eval('.ons-header-nav-menu', (el) => !el.classList.contains('ons-u-d-no'));
+                expect(isMenuNavVisible).toBe(true);
+            });
+
+            it('then the menu button stays marked as expanded', async () => {
+                const menuButtonAriaExpanded = await page.$eval('.ons-btn--menu', (el) => el.getAttribute('aria-expanded'));
+                expect(menuButtonAriaExpanded).toBe('true');
+            });
+        });
     });
 
     describe('when the menu button is not clicked', () => {

package/components/hero/example-hero-grey-with-last-updated.njk

@@ -0,0 +1,27 @@
+---
+'fullWidth': true
+---
+
+{% from "components/hero/_macro.njk" import onsHero %}
+{{
+    onsHero({
+        "variants": 'grey',
+        "detailsColumns": '12',
+        "title": 'Lorem Ipsum',
+        "text": 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+        "descriptionList": {
+            "termCol": "5",
+            "descriptionCol": "7",
+            "itemsList": [
+                {
+                    "term": "Last updated:",
+                    "descriptions": [
+                        {
+                            "description": "23 February 2024"
+                        }
+                    ]
+                }
+            ]
+        }
+    })
+}}

package/components/navigation/navigation.js

@@ -90,15 +90,33 @@ export default class NavigationToggle {
     }
 
     isHidden(el) {
-        return el.offsetParent === null;
+        if (!el) {
+            return true;
+        }
+
+        const style = window.getComputedStyle(el);
+        if (style.display === 'none') {
+            return true;
+        }
+
+        // `offsetParent` can be `null` for reasons other than `display: none` (e.g. fixed positioning),
+        // so use layout rects as a more reliable proxy for visibility.
+        return el.getClientRects().length === 0;
     }
 
-    setAria() {
+    setAria(viewportDetails = null) {
         const isToggleHidden = this.isHidden(this.toggle);
         this.toggle.setAttribute(attrDisabled, 'false');
 
         this.searchToggleBtn?.setAttribute(attrDisabled, 'false');
 
+        // iOS Safari/Chrome can change viewport height during scroll when the browser chrome
+        // hides/shows, which can trigger resize events. If the user has the navigation open
+        // on a small screen, don't force-close it in response to these resizes.
+        if (viewportDetails && !isToggleHidden && this.navigation.getAttribute(attrHidden) === 'false') {
+            return;
+        }
+
         if (!isToggleHidden) {
             // close nav by default if toggle button is visible
             this.closeNav();

package/components/navigation/navigation.spec.js

@@ -259,6 +259,28 @@ describe('script: navigation', () => {
                     expect(hasClass).toBe(false);
                 });
             });
+
+            describe('when the navigation is open and only the viewport height changes', () => {
+                beforeEach(async () => {
+                    await page.focus(buttonEl);
+                    await page.keyboard.press('Enter');
+                    // Simulate iOS address bar show/hide which changes height during scroll
+                    // without any meaningful layout/breakpoint change.
+                    await setViewport(page, { width: 600, height: 900 });
+                });
+
+                it('keeps aria-hidden set as `false` on the navigation list', async () => {
+                    const nav = await page.$(navEl);
+                    const hasAriaAttribute = await nav.evaluate((node) => node.getAttribute('aria-hidden') === 'false');
+                    expect(hasAriaAttribute).toBe(true);
+                });
+
+                it('keeps aria-expanded set as `true` on the navigation toggle button', async () => {
+                    const button = await page.$(buttonEl);
+                    const ariaExpandedIsTrue = await button.evaluate((node) => node.getAttribute('aria-expanded') === 'true');
+                    expect(ariaExpandedIsTrue).toBe(true);
+                });
+            });
         });
     });