@ons/design-system 72.10.5 → 72.10.7

package/components/header/example-header-basic-with-search-and-language.njk

@@ -0,0 +1,207 @@
+---
+'fullWidth': true
+---
+
+{% from "components/header/_macro.njk" import onsHeader %}
+
+{{
+    onsHeader({
+        "variants": 'basic',
+        "language": {
+            "languages": [
+                {
+                    "url": '#0',
+                    "isoCode": 'en',
+                    "text": 'English',
+                    "current": false
+                },
+                {
+                    "url": '#0',
+                    "isoCode": 'cy',
+                    "text": 'Cymraeg',
+                    "current": true
+                }
+            ]
+        },
+        "menuLinks": {
+            "id": "menu-links",
+            "keyLinks": [
+                {
+                    'heading': 'Taking part in a survey?',
+                    'description': 'It’s never been more important.'
+                },
+                {
+                    'heading': 'Release calendar',
+                    'description': 'View our latest and upcoming releases.'
+                },
+                {
+                    'heading': 'Explore local statistics',
+                    'url': '#0',
+                    'description': 'Explore statistics across the UK.'
+                }
+            ],
+            "columns": [
+                {
+                    "groups": [
+                        {
+                            "heading": "People, population and community",
+                            "groupItems": [
+                                {
+                                    "text": "Armed forces community"
+                                },
+                                {
+                                    "text": "Births, deaths and marriages"
+                                },
+                                {
+                                    "text": "Crime and justice"
+                                },
+                                {
+                                    "text": "Cultural identity"
+                                },
+                                {
+                                    "text": "Education and childcare"
+                                },
+                                {
+                                    "text": "Elections"
+                                },
+                                {
+                                    "text": "Health and social care"
+                                },
+                                {
+                                    "text": "Household characteristics"
+                                },
+                                {
+                                    "text": "Housing"
+                                },
+                                {
+                                    "text": "Leisure and tourism"
+                                },
+                                {
+                                    "text": "Personal and household finances"
+                                },
+                                {
+                                    "text": "Population and migration"
+                                },
+                                {
+                                    "text": "Well-being"
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    "groups": [
+                        {
+                            "heading": "Business, industry and trade",
+                            "groupItems": [
+                                {
+                                    "text": "Business"
+                                },
+                                {
+                                    "text": "Changes to business"
+                                },
+                                {
+                                    "text": "Construction industry"
+                                },
+                                {
+                                    "text": "International trade"
+                                },
+                                {
+                                    "text": "IT and internet industry"
+                                },
+                                {
+                                    "text": "Manufacturing and production industry"
+                                },
+                                {
+                                    "text": "Retail industry",
+                                    "url": "#0"
+                                },
+                                {
+                                    "text": "Tourism industry"
+                                }
+                            ]
+                        },
+                        {
+                            "heading": "Employment and labour market",
+                            "url": "#0",
+                            "groupItems":
+                            [
+                                {
+                                    "text": "People in work"
+                                },
+                                {
+                                    "text": "People not in work"
+                                }
+                            ]
+
+                        }
+                    ]
+                },
+                {
+                    "groups": [
+                        {
+                            "heading": "Economy",
+                            "groupItems": [
+                                {
+                                    "text": "Economic output and productivity"
+                                },
+                                {
+                                    "text": "Government, public sector and taxes"
+                                },
+                                {
+                                    "text": "Gross Value Added (GVA)"
+                                },
+                                {
+                                    "text": "Investments, pensions and trusts"
+                                },
+                                {
+                                    "text": "Regional accounts"
+                                },
+                                {
+                                    "text": "Environmental accounts"
+                                },
+                                {
+                                    "text": "Gross Domestic Product (GDP)"
+                                },
+                                {
+                                    "text": "Inflation and price indices"
+                                },
+                                {
+                                    "text": "National accounts"
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        },
+        "searchLinks": {
+            "id": "search-links",
+            "searchNavigationAriaLabel": 'Nav Search',
+            "searchButtonAriaLabel": 'Toggle search',
+            'heading': 'Popular searches',
+            "itemsList": [
+                {
+                    "url": '#1',
+                    "text": 'Cost of living'
+                },
+                {
+                    "url": '#1',
+                    "text": 'Inflation'
+                },
+                {
+                    "url": '#3',
+                    "text": 'NHS waiting times'
+                },
+                {
+                    "url": '#0',
+                    "text": 'Wellbeing'
+                },
+                {
+                    "url": '#0',
+                    "text": 'Baby names'
+                }
+            ]
+        }
+    })
+}}

package/components/header/{example-header-with-search-button.njk → example-header-basic-with-search-button.njk}

@@ -8,6 +8,7 @@
     onsHeader({
         "variants": 'basic',
         "menuLinks": {
+            "id": "menu-links",
             "keyLinks": [
                 {
                     'heading': 'Taking part in a survey?',

package/components/header/example-header-basic.njk

@@ -8,6 +8,7 @@
     onsHeader({
         "variants": 'basic',
         "menuLinks": {
+            "id": "menu-links",
             "keyLinks": [
                 {
                     'heading': 'Taking part in a survey?',

package/components/hero/_macro.njk

@@ -94,10 +94,17 @@
                     {% if params.informationPanel %}
                         <div class="ons-hero__information ons-u-mt-s">
                             <div class="ons-hero__panel ons-hero__panel--{{ params.informationPanel.panelType }}">
-                                {{- params.informationPanel.panelText -}}
+                                <h2 class="ons-u-fs-r--b ons-u-m-no">{{- params.informationPanel.panelText -}}</h2>
                             </div>
                             <div class="ons-hero__link">
-                                <a href="{{ params.informationPanel.panelLink.url }}">{{ params.informationPanel.panelLink.text }}</a>
+                                <a
+                                    href="{{ params.informationPanel.panelLink.url }}"
+                                    {% if params.informationPanel.panelLink.ariaLabel %}
+                                        aria-label="{{ params.informationPanel.panelLink.ariaLabel }}"
+                                    {% endif %}
+                                >
+                                    {{ params.informationPanel.panelLink.text }}
+                                </a>
                             </div>
                         </div>
                     {% endif %}

package/components/hero/_macro.spec.js

@@ -176,6 +176,28 @@ describe('macro: hero', () => {
                 expect($('.ons-hero__link > a').text().trim()).toBe('Some link text');
                 expect($('.ons-hero__link > a').attr('href')).toBe('#0');
             });
+
+            it('renders the `informationPanel` link with a custom aria-label', () => {
+                const $ = cheerio.load(
+                    renderComponent('hero', {
+                        ...EXAMPLE_HERO,
+                        variants: 'grey',
+                        informationPanel: {
+                            panelText: 'Some panel text',
+                            panelType: 'ons-green',
+                            panelLink: {
+                                text: 'Some link text',
+                                url: '#0',
+                                ariaLabel: 'Some link aria label',
+                            },
+                        },
+                    }),
+                );
+                const link = $('.ons-hero__link > a');
+                expect(link.attr('aria-label')).toBe('Some link aria label');
+                expect(link.text().trim()).toBe('Some link text');
+                expect(link.attr('href')).toBe('#0');
+            });
         });
 
         describe('and `panelType` is set to `ons-green`', () => {

package/components/hero/example-hero-grey.njk

@@ -14,7 +14,8 @@
             "panelType": 'ons-green',
             "panelLink": {
                 "text": 'View previous releases',
-                "url": '#0'
+                "url": '#0',
+                "ariaLabel": 'View previous release of Retail sales rise amid summer discounts and sporting events'
             }
         },
         "topic": 'Statistical article',

package/components/input/_macro.njk

@@ -44,10 +44,9 @@
             {% if params.autocomplete %}autocomplete="{{ params.autocomplete }}"{% endif %}
             {% if params.accessiblePlaceholder %}placeholder="{{ params.label.text }}"{% endif %}
             {% if params.charCheckLimit %}
-                data-char-check-ref="{{ params.id }}-check" data-char-check-num="{{ params.charCheckLimit.limit }}"
+                data-message-check-ref="{{ params.id }}-check" data-message-check-num="{{ params.charCheckLimit.limit }}"
                 aria-describedby="{{ params.id }}-check"
             {% endif %}
-            {% if params.charCheckLimit and params.charCheckLimit.charcheckCountdown %}data-char-check-countdown="true"{% endif %}
             {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}
             {% if params.label and params.label.description %}{% if params.label.id %}aria-describedby="{{ params.label.id }}-description-hint"{% else %}aria-describedby="description-hint"{% endif %}{% endif %}
         />

package/components/input/_macro.spec.js

@@ -570,36 +570,16 @@ describe('macro: input', () => {
             expect($('.ons-input').attr('maxlength')).toBe('200');
         });
 
-        it('does not have `data-char-check-countdown` attribute when `charcheckCountdown` is not provided', () => {
-            const $ = cheerio.load(renderComponent('input', EXAMPLE_INPUT_WITH_CHARACTER_LIMIT));
-
-            expect($('.ons-input').attr('data-char-check-countdown')).toBe(undefined);
-        });
-
-        it('has `data-char-check-countdown` attribute when `charcheckCountdown` is true', () => {
-            const $ = cheerio.load(
-                renderComponent('input', {
-                    ...EXAMPLE_INPUT_WITH_CHARACTER_LIMIT,
-                    charCheckLimit: {
-                        ...EXAMPLE_INPUT_WITH_CHARACTER_LIMIT.charCheckLimit,
-                        charcheckCountdown: true,
-                    },
-                }),
-            );
-
-            expect($('.ons-input').attr('data-char-check-countdown')).toBe('true');
-        });
-
         it('has data attribute which references the character limit component', () => {
             const $ = cheerio.load(renderComponent('input', EXAMPLE_INPUT_WITH_CHARACTER_LIMIT));
 
-            expect($('.ons-input').attr('data-char-check-ref')).toBe('example-id-check');
+            expect($('.ons-input').attr('data-message-check-ref')).toBe('example-id-check');
         });
 
         it('has data attribute which defines limit for character check', () => {
             const $ = cheerio.load(renderComponent('input', EXAMPLE_INPUT_WITH_CHARACTER_LIMIT));
 
-            expect($('.ons-input').attr('data-char-check-num')).toBe('200');
+            expect($('.ons-input').attr('data-message-check-num')).toBe('200');
         });
 
         it('has `aria-describedby` attribute which references the character limit component', () => {

package/components/input/example-input-search-with-character-check.njk

@@ -11,7 +11,6 @@
         },
         "width": "10",
         "charCheckLimit": {
-            "charcheckCountdown": true,
             "limit": 10,
             "charCountSingular": "{x} more character needed",
             "charCountPlural": "{x} more characters needed",

package/components/language-selector/_macro.njk

@@ -11,7 +11,7 @@
                     {% if language.attributes %}{% for attribute, value in (language.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
                 >
                     {# Visually hidden helper text for screenreaders #}
-                    <span class="ons-u-vh">Change language to{{ ' ' }}</span>
+                    <span class="ons-u-vh">{{ (language.srText | default("Change language to")) + ' ' }}</span>
                     {% if language.abbrText %}
                         <span class="ons-u-d-no@s">{{ language.abbrText }}</span><span class="ons-u-d-no@2xs@s">{{- language.text -}}</span>
                     {% else %}

package/components/language-selector/_macro.spec.js

@@ -135,4 +135,49 @@ describe('macro: language-selector', () => {
             expect($('.ons-language-links').hasClass('ons-u-d-no@2xs@m')).toBe(true);
         });
     });
+
+    describe('srText parameter', () => {
+        it('renders custom srText when provided', () => {
+            const params = {
+                languages: [
+                    {
+                        url: '/welsh',
+                        isoCode: 'cy',
+                        text: 'Cymraeg',
+                        srText: 'Custom screen reader text',
+                        current: false,
+                    },
+                    {
+                        url: '/english',
+                        isoCode: 'en',
+                        text: 'English',
+                        current: true,
+                    },
+                ],
+            };
+            const $ = cheerio.load(renderComponent('language-selector', params));
+            expect($('.ons-language-links__item a .ons-u-vh').text().trim()).toBe('Custom screen reader text');
+        });
+
+        it('renders default srText when not provided', () => {
+            const params = {
+                languages: [
+                    {
+                        url: '/welsh',
+                        isoCode: 'cy',
+                        text: 'Cymraeg',
+                        current: false,
+                    },
+                    {
+                        url: '/english',
+                        isoCode: 'en',
+                        text: 'English',
+                        current: true,
+                    },
+                ],
+            };
+            const $ = cheerio.load(renderComponent('language-selector', params));
+            expect($('.ons-language-links__item a .ons-u-vh').text().trim()).toBe('Change language to');
+        });
+    });
 });

package/components/navigation/navigation.js

@@ -82,9 +82,11 @@ export default class NavigationToggle {
                     <span class="ons-btn__text"></span>
                 </span>`,
         };
-        toggle.innerHTML = isOpen ? icons.open : icons.close;
-        toggle.classList.toggle('ons-btn--close', isOpen);
-        toggle.classList.toggle('ons-btn--search-icon', !isOpen);
+        if (isOpen != null) {
+            toggle.innerHTML = isOpen ? icons.open : icons.close;
+            toggle.classList.toggle('ons-btn--close', isOpen);
+            toggle.classList.toggle('ons-btn--search-icon', !isOpen);
+        }
     }
 
     isHidden(el) {
@@ -115,22 +117,27 @@ export default class NavigationToggle {
     }
 
     toggleMenuAndSearch() {
-        const isMenuOpen = this.menuBtn.getAttribute('aria-expanded') === 'true';
-        const isSearchOpen = this.searchBtn.getAttribute('aria-expanded') === 'true';
-
-        if (isMenuOpen && this.toggle == this.menuBtn) {
-            this.updateSearchIcon(false, this.searchToggleBtn);
-            this.searchBtn.setAttribute('aria-expanded', 'false');
-            this.searchEl.setAttribute('aria-hidden', 'true');
-            this.searchEl.classList.add('ons-u-d-no');
-            this.searchToggleBtn.classList.remove('active');
+        if (this.menuBtn) {
+            const isMenuOpen = this.menuBtn.getAttribute('aria-expanded') === 'true';
+
+            if (isMenuOpen && this.toggle == this.menuBtn && this.searchBtn) {
+                this.updateSearchIcon(false, this.searchToggleBtn && this.searchBtn);
+                this.searchBtn.setAttribute('aria-expanded', 'false');
+                this.searchEl.setAttribute('aria-hidden', 'true');
+                this.searchEl.classList.add('ons-u-d-no');
+                this.searchToggleBtn.classList.remove('active');
+            }
         }
 
-        if (isSearchOpen && this.toggle == this.searchToggleBtn) {
-            this.menuBtn.setAttribute('aria-expanded', 'false');
-            this.menuEl.setAttribute('aria-hidden', 'true');
-            this.menuEl.classList.add('ons-u-d-no');
-            this.menuBtn.classList.remove('active');
+        if (this.searchBtn) {
+            const isSearchOpen = this.searchBtn.getAttribute('aria-expanded') === 'true';
+
+            if (isSearchOpen && this.toggle == this.searchToggleBtn && this.menuBtn) {
+                this.menuBtn.setAttribute('aria-expanded', 'false');
+                this.menuEl.setAttribute('aria-hidden', 'true');
+                this.menuEl.classList.add('ons-u-d-no');
+                this.menuBtn.classList.remove('active');
+            }
         }
     }
 }

package/components/pagination/_macro.njk

@@ -7,10 +7,12 @@
     {% set firstPage = params.pages | first %}
     {% set prevPageIndex = currentPageIndex - 1 %}
     {% set nextPageIndex = currentPageIndex + 1 %}
+    {% set prevPageAriaLabel = (params.previousAriaLabel or 'Go to the previous page') %}
+    {% set nextPageAriaLabel = (params.nextAriaLabel or 'Go to the next page') %}
 
     <nav
         class="ons-pagination{{ ' ' + params.classes if params.classes else '' }}{{ ' ons-pagination--no-indicator' if params.hideRangeIndicator }}"
-        aria-label="Pagination ({{ position }})"
+        aria-label="{{ params.ariaLabel | default ('Pagination') }} ({{ position }})"
     >
         <div class="ons-pagination__position">{{ position }}</div>
         <ul class="ons-pagination__items{{ ' ons-pagination__items--no-previous' if currentPageIndex == 1 }}">
@@ -21,7 +23,7 @@
                         href="{{ params.pages[prevPageIndex].url }}"
                         class="ons-pagination__link ons-pagination__link--no-underline"
                         rel="prev"
-                        aria-label="Go to the previous page (Page {{ currentPageIndex - 1 }})"
+                        aria-label="{{ prevPageAriaLabel }} ({{ currentPageIndex - 1 }})"
                     >
                         {{-
                             onsIcon({
@@ -36,7 +38,12 @@
             {% endif %}
             {% if currentPageIndex > 2 %}
                 <li class="ons-pagination__item{{ ' ons-pagination__item--current' if currentPageIndex == 1 }}">
-                    <a href="{{ firstPage.url }}" class="ons-pagination__link" aria-label="Go to the first page (Page 1)">1</a>
+                    <a
+                        href="{{ firstPage.url }}"
+                        class="ons-pagination__link"
+                        aria-label="{{ params.firstAriaLabel | default('Go to the first page') }}"
+                        >1</a
+                    >
                 </li>
             {% endif %}
             {% if currentPageIndex > 4 %}
@@ -56,9 +63,9 @@
                             href="{{ page.url }}"
                             class="ons-pagination__link"
                             {%- if loop.index == currentPageIndex -%}
-                                aria-current="true" aria-label="Current page ({{ position }})"
+                                aria-current="true" aria-label="{{ params.currentAriaLabel | default('Current page') }} ({{ position }})"
                             {%- else -%}
-                                aria-label="Go to page {{ loop.index }}"
+                                aria-label="{{ params.goToAriaLabel | default('Go to page') }} {{ loop.index }}"
                             {%- endif -%}
                             {%- if loop.index == currentPageIndex - 1 -%}
                                 rel="prev"
@@ -76,7 +83,10 @@
             {% endif %}
             {% if currentPageIndex < totalPages - 1 %}
                 <li class="ons-pagination__item{{ ' ons-pagination__item--current' if currentPageIndex == totalPages }}">
-                    <a href="{{ lastPage.url }}" class="ons-pagination__link" aria-label="Go to the last page (Page {{ totalPages }})"
+                    <a
+                        href="{{ lastPage.url }}"
+                        class="ons-pagination__link"
+                        aria-label="{{ params.lastAriaLabel | default('Go to the last page') }} ({{ totalPages }})"
                         >{{ totalPages }}</a
                     >
                 </li>
@@ -87,7 +97,7 @@
                         href="{{ params.pages[currentPageIndex].url }}"
                         class="ons-pagination__link ons-pagination__link--no-underline"
                         rel="next"
-                        aria-label="Go to the next page (Page {{ currentPageIndex + 1 }})"
+                        aria-label="{{ nextPageAriaLabel }} ({{ currentPageIndex + 1 }})"
                     >
                         <span class="ons-pagination__link-text">{{ params.next | default("Next") }}</span>
                         {{-