@ons/design-system 72.9.1 → 72.9.2

package/components/document-list/_document-list.scss

@@ -40,7 +40,7 @@
             .ons-document-list__item-image {
                 width: 248px;
 
-                & &__image-link {
+                & &__image {
                     &--placeholder {
                         height: 96px;
                     }
@@ -50,7 +50,7 @@
                     margin-right: 2.5rem;
                     width: 379px;
 
-                    & &__image-link {
+                    & &__image {
                         &--placeholder {
                             height: 248px;
                         }
@@ -100,7 +100,7 @@
     }
 
     &__item-image & {
-        &__image-link {
+        &__image {
             &--placeholder {
                 height: 96px;
             }
@@ -112,7 +112,7 @@
     }
 
     &__item-image--file & {
-        &__image-link {
+        &__image {
             border-color: var(--ons-color-borders);
 
             &--placeholder {
@@ -121,20 +121,12 @@
         }
     }
 
-    &__image-link {
+    &__image {
         border: 2px solid transparent;
         box-sizing: content-box;
         display: block;
         width: 100%;
 
-        &:focus {
-            background-color: var(--ons-color-placeholder) !important;
-            border: 2px solid var(--ons-color-borders-document-image-focus);
-            box-shadow: none;
-            outline: 4px solid var(--ons-color-focus) !important;
-            outline-offset: 0 !important;
-        }
-
         &--placeholder {
             background-clip: padding-box;
             background-color: var(--ons-color-placeholder);

package/components/document-list/_macro.njk

@@ -1,32 +1,29 @@
 {% macro onsDocumentList(params) %}
+    {% set titleTag = params.headingLevel | default(2) %}
+    {% set openingTag = "<h" ~ titleTag %}
+    {% set closingTag = "</h" ~ titleTag ~ ">" %}
     <ul
         {% if params.id %}id="{{ params.id }}"{% endif %}class="ons-document-list{{ ' ' + params.classes if params.classes else '' }}"
         {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
     >
         {% for document in params.documents %}
-            {% set titleTag = params.headingLevel | default(2) %}
-            {% set openingTag = "<h" ~ titleTag %}
-            {% set closingTag = "</h" ~ titleTag ~ ">" %}
             {% set documentItem %}
                 {% if document.thumbnail %}
                     <div
                         class="ons-document-list__item-image{{ ' ons-document-list__item-image--file' if document.metadata.file }}"
                         aria-hidden="true"
                     >
-                        <a
-                            class="ons-document-list__image-link{{ ' ons-document-list__image-link--placeholder' if not document.thumbnail.smallSrc }}"
-                            href="{{ document.title.url }}"
-                            tabindex="-1"
-                        >
-                            {% if document.thumbnail.smallSrc and document.thumbnail.largeSrc %}
-                                <img
-                                    srcset="{{ document.thumbnail.smallSrc }} 1x, {{ document.thumbnail.largeSrc }} 2x"
-                                    src="{{ document.thumbnail.smallSrc }}"
-                                    alt=""
-                                    loading="lazy"
-                                />
-                            {% endif %}
-                        </a>
+                        {% if document.thumbnail.smallSrc and document.thumbnail.largeSrc %}
+                            <img
+                                class="ons-document-list__image"
+                                srcset="{{ document.thumbnail.smallSrc }} 1x, {{ document.thumbnail.largeSrc }} 2x"
+                                src="{{ document.thumbnail.smallSrc }}"
+                                alt=""
+                                loading="lazy"
+                            />
+                        {% else %}
+                            <span class="ons-document-list__image ons-document-list__image--placeholder"> </span>
+                        {% endif %}
                     </div>
                 {% endif %}
 

package/components/document-list/_macro.spec.js

@@ -232,12 +232,12 @@ describe('FOR: Macro: Document list', () => {
             });
 
             test('THEN: has expected srcset attribute', () => {
-                const srcset = $('.ons-document-list__image-link img').attr('srcset');
+                const srcset = $('.ons-document-list__image').attr('srcset');
                 expect(srcset).toBe('/example-small.png 1x, /example-large.png 2x');
             });
 
             test('THEN: has expected src attribute', () => {
-                const src = $('.ons-document-list__image-link img').attr('src');
+                const src = $('.ons-document-list__image').attr('src');
                 expect(src).toBe('/example-small.png');
             });
         });
@@ -249,7 +249,7 @@ describe('FOR: Macro: Document list', () => {
                         documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, thumbnail: true }],
                     }),
                 );
-                expect($('.ons-document-list__image-link').hasClass('ons-document-list__image-link--placeholder')).toBe(true);
+                expect($('.ons-document-list__image').hasClass('ons-document-list__image--placeholder')).toBe(true);
             });
         });
     });

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">