@ons/design-system 72.10.4 → 72.10.6

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

@@ -102,7 +102,7 @@ describe('macro: language-selector', () => {
         it('has the `abbrText` rendered', () => {
             const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_TWO_LANGUAGES));
 
-            expect($('.ons-language-links__item a span:first-child').text()).toBe('CY');
+            expect($('.ons-language-links__item a span:nth-child(2)').text()).toBe('CY');
         });
     });
 
@@ -124,8 +124,9 @@ describe('macro: language-selector', () => {
         it('does not show the current language', () => {
             const $ = cheerio.load(renderComponent('language-selector', EXAMPLE_WITH_THREE_LANGUAGES));
 
-            expect($('.ons-language-links__item:first-child a').text()).toBe('English');
-            expect($('.ons-language-links__item:last-child a').text()).toBe('Polski');
+            // .replace(/\s+/g, ' ') will replace any sequence of whitespace characters (spaces, tabs, newlines) with a single space
+            expect($('.ons-language-links__item:first-child a').text().replace(/\s+/g, ' ').trim()).toBe('Change language to English');
+            expect($('.ons-language-links__item:last-child a').text().replace(/\s+/g, ' ').trim()).toBe('Change language to Polski');
         });
 
         it('has the visibility class applied', () => {
@@ -134,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>
                         {{-

package/components/pagination/_macro.spec.js

@@ -105,7 +105,7 @@ describe('macro: pagination', () => {
             expect($('li').length).toBe(3);
             assertIsCurrentPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Current page (Page 1 of 2)', '1');
             assertIsNextPage($('.ons-pagination__item:nth-child(2)'), '/page/2', 'Go to page 2', '2');
-            assertIsNextPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Go to the next page (Page 2)', 'Next page');
+            assertIsNextPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Go to the next page (2)', 'Next page');
         });
     });
 
@@ -133,7 +133,7 @@ describe('macro: pagination', () => {
 
         it('has a 3 list items ("Previous page", "1", "2")', () => {
             expect($('li').length).toBe(3);
-            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (Page 1)', 'Previous page');
+            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (1)', 'Previous page');
             assertIsPreviousPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to page 1', '1');
             assertIsCurrentPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Current page (Page 2 of 2)', '2');
         });
@@ -163,11 +163,11 @@ describe('macro: pagination', () => {
 
         it('has a 5 list items ("Previous page", "1", "2", "3", "Next page")', () => {
             expect($('li').length).toBe(5);
-            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (Page 1)', 'Previous page');
+            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (1)', 'Previous page');
             assertIsPreviousPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to page 1', '1');
             assertIsCurrentPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Current page (Page 2 of 3)', '2');
             assertIsNextPage($('.ons-pagination__item:nth-child(4)'), '/page/3', 'Go to page 3', '3');
-            assertIsNextPage($('.ons-pagination__item:nth-child(5)'), '/page/3', 'Go to the next page (Page 3)', 'Next page');
+            assertIsNextPage($('.ons-pagination__item:nth-child(5)'), '/page/3', 'Go to the next page (3)', 'Next page');
         });
     });
 
@@ -195,13 +195,13 @@ describe('macro: pagination', () => {
 
         it('has a 7 list items ("Previous page", "1", "2", "3", "4", "5", "Next page")', () => {
             expect($('li').length).toBe(7);
-            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (Page 1)', 'Previous page');
+            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (1)', 'Previous page');
             assertIsPreviousPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to page 1', '1');
             assertIsCurrentPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Current page (Page 2 of 5)', '2');
             assertIsNextPage($('.ons-pagination__item:nth-child(4)'), '/page/3', 'Go to page 3', '3');
             assertIsOtherPage($('.ons-pagination__item:nth-child(5)'), '/page/4', 'Go to page 4', '4');
-            assertIsOtherPage($('.ons-pagination__item:nth-child(6)'), '/page/5', 'Go to the last page (Page 5)', '5');
-            assertIsNextPage($('.ons-pagination__item:nth-child(7)'), '/page/3', 'Go to the next page (Page 3)', 'Next page');
+            assertIsOtherPage($('.ons-pagination__item:nth-child(6)'), '/page/5', 'Go to the last page (5)', '5');
+            assertIsNextPage($('.ons-pagination__item:nth-child(7)'), '/page/3', 'Go to the next page (3)', 'Next page');
         });
     });
 
@@ -236,13 +236,13 @@ describe('macro: pagination', () => {
 
         it('has 7 list items ("Previous page", "1", "2", "3", "...", "6", "Next page")', () => {
             expect($('li').length).toBe(7);
-            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (Page 1)', 'Previous page');
+            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/1', 'Go to the previous page (1)', 'Previous page');
             assertIsPreviousPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to page 1', '1');
             assertIsCurrentPage($('.ons-pagination__item:nth-child(3)'), '/page/2', 'Current page (Page 2 of 6)', '2');
             assertIsNextPage($('.ons-pagination__item:nth-child(4)'), '/page/3', 'Go to page 3', '3');
             assertIsGap($('.ons-pagination__item:nth-child(5)'));
-            assertIsOtherPage($('.ons-pagination__item:nth-child(6)'), '/page/6', 'Go to the last page (Page 6)', '6');
-            assertIsNextPage($('.ons-pagination__item:nth-child(7)'), '/page/3', 'Go to the next page (Page 3)', 'Next page');
+            assertIsOtherPage($('.ons-pagination__item:nth-child(6)'), '/page/6', 'Go to the last page (6)', '6');
+            assertIsNextPage($('.ons-pagination__item:nth-child(7)'), '/page/3', 'Go to the next page (3)', 'Next page');
         });
     });
 
@@ -282,15 +282,15 @@ describe('macro: pagination', () => {
 
         it('has a 9 list items ("Previous page", "1", "...", "4", "5", "6", "...", "11", "Next page")', () => {
             expect($('li').length).toBe(9);
-            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/4', 'Go to the previous page (Page 4)', 'Previous page');
-            assertIsOtherPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to the first page (Page 1)', '1');
+            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/4', 'Go to the previous page (4)', 'Previous page');
+            assertIsOtherPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to the first page', '1');
             assertIsGap($('.ons-pagination__item:nth-child(3)'));
             assertIsPreviousPage($('.ons-pagination__item:nth-child(4)'), '/page/4', 'Go to page 4', '4');
             assertIsCurrentPage($('.ons-pagination__item:nth-child(5)'), '/page/5', 'Current page (Page 5 of 11)', '5');
             assertIsNextPage($('.ons-pagination__item:nth-child(6)'), '/page/6', 'Go to page 6', '6');
             assertIsGap($('.ons-pagination__item:nth-child(7)'));
-            assertIsOtherPage($('.ons-pagination__item:nth-child(8)'), '/page/11', 'Go to the last page (Page 11)', '11');
-            assertIsNextPage($('.ons-pagination__item:nth-child(9)'), '/page/6', 'Go to the next page (Page 6)', 'Next page');
+            assertIsOtherPage($('.ons-pagination__item:nth-child(8)'), '/page/11', 'Go to the last page (11)', '11');
+            assertIsNextPage($('.ons-pagination__item:nth-child(9)'), '/page/6', 'Go to the next page (6)', 'Next page');
         });
     });
 
@@ -330,13 +330,187 @@ describe('macro: pagination', () => {
 
         it('has a 7 list items ("Previous page", "1", "...", "9", "10", "11", "Next page")', () => {
             expect($('li').length).toBe(7);
-            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/9', 'Go to the previous page (Page 9)', 'Previous page');
-            assertIsOtherPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to the first page (Page 1)', '1');
+            assertIsPreviousPage($('.ons-pagination__item:nth-child(1)'), '/page/9', 'Go to the previous page (9)', 'Previous page');
+            assertIsOtherPage($('.ons-pagination__item:nth-child(2)'), '/page/1', 'Go to the first page', '1');
             assertIsGap($('.ons-pagination__item:nth-child(3)'));
             assertIsPreviousPage($('.ons-pagination__item:nth-child(4)'), '/page/9', 'Go to page 9', '9');
             assertIsCurrentPage($('.ons-pagination__item:nth-child(5)'), '/page/10', 'Current page (Page 10 of 11)', '10');
             assertIsNextPage($('.ons-pagination__item:nth-child(6)'), '/page/11', 'Go to page 11', '11');
-            assertIsNextPage($('.ons-pagination__item:nth-child(7)'), '/page/11', 'Go to the next page (Page 11)', 'Next page');
+            assertIsNextPage($('.ons-pagination__item:nth-child(7)'), '/page/11', 'Go to the next page (11)', 'Next page');
+        });
+    });
+
+    describe('custom previousAriaLabel and nextAriaLabel', () => {
+        const customPreviousAriaLabel = 'Go back to page';
+        const customNextAriaLabel = 'Continue to page';
+        const $custom = cheerio.load(
+            renderComponent('pagination', {
+                currentPageNumber: 2,
+                pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }],
+                previous: 'Previous',
+                next: 'Next',
+                previousAriaLabel: customPreviousAriaLabel,
+                nextAriaLabel: customNextAriaLabel,
+            }),
+        );
+        const $default = cheerio.load(
+            renderComponent('pagination', {
+                currentPageNumber: 2,
+                pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }],
+                previous: 'Previous',
+                next: 'Next',
+            }),
+        );
+
+        it('renders the custom previousAriaLabel and page number on the Previous link', () => {
+            const prevItem = $custom('.ons-pagination__item--previous');
+            expect(prevItem.length).toBe(1);
+            expect(prevItem.find('a').attr('aria-label')).toBe('Go back to page (1)');
+        });
+        it('renders the default previousAriaLabel and page number on the Previous link if not provided', () => {
+            const prevItem = $default('.ons-pagination__item--previous');
+            expect(prevItem.length).toBe(1);
+            expect(prevItem.find('a').attr('aria-label')).toBe('Go to the previous page (1)');
+        });
+        it('renders the custom nextAriaLabel and page number on the Next link', () => {
+            const nextItem = $custom('.ons-pagination__item--next');
+            expect(nextItem.length).toBe(1);
+            expect(nextItem.find('a').attr('aria-label')).toBe('Continue to page (3)');
+        });
+        it('renders the default nextAriaLabel and page number on the Next link if not provided', () => {
+            const nextItem = $default('.ons-pagination__item--next');
+            expect(nextItem.length).toBe(1);
+            expect(nextItem.find('a').attr('aria-label')).toBe('Go to the next page (3)');
+        });
+    });
+
+    describe('custom ariaLabel', () => {
+        it('renders a custom aria-label on the nav element', () => {
+            const $ = cheerio.load(
+                renderComponent('pagination', {
+                    currentPageNumber: 2,
+                    pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }],
+                    ariaLabel: 'Custom pagination navigation',
+                }),
+            );
+            expect($('.ons-pagination').attr('aria-label')).toBe('Custom pagination navigation (Page 2 of 3)');
+        });
+        it('renders the default aria-label on the nav element if not provided', () => {
+            const $ = cheerio.load(
+                renderComponent('pagination', {
+                    currentPageNumber: 2,
+                    pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }],
+                }),
+            );
+            expect($('.ons-pagination').attr('aria-label')).toBe('Pagination (Page 2 of 3)');
+        });
+    });
+
+    describe('custom firstAriaLabel', () => {
+        it('renders a custom aria-label on the first page link', () => {
+            const $ = cheerio.load(
+                renderComponent('pagination', {
+                    currentPageNumber: 3,
+                    pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }, { url: '/page/4' }],
+                    firstAriaLabel: 'Jump to first page',
+                }),
+            );
+            const firstPageLink = $('.ons-pagination__item a').filter(function () {
+                return $(this).text().trim() === '1';
+            });
+            expect(firstPageLink.attr('aria-label')).toBe('Jump to first page');
+        });
+        it('renders the default aria-label on the first page link if not provided', () => {
+            const $ = cheerio.load(
+                renderComponent('pagination', {
+                    currentPageNumber: 3,
+                    pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }, { url: '/page/4' }],
+                }),
+            );
+            const firstPageLink = $('.ons-pagination__item a').filter(function () {
+                return $(this).text().trim() === '1';
+            });
+            expect(firstPageLink.attr('aria-label')).toBe('Go to the first page');
+        });
+    });
+
+    describe('custom currentAriaLabel', () => {
+        it('renders a custom aria-label on the current page link', () => {
+            const $ = cheerio.load(
+                renderComponent('pagination', {
+                    currentPageNumber: 2,
+                    pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }],
+                    currentAriaLabel: 'You are on page',
+                }),
+            );
+            const currentPageLink = $('.ons-pagination__item--current a');
+            expect(currentPageLink.attr('aria-label')).toBe('You are on page (Page 2 of 3)');
+        });
+        it('renders the default aria-label on the current page link if not provided', () => {
+            const $ = cheerio.load(
+                renderComponent('pagination', {
+                    currentPageNumber: 2,
+                    pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }],
+                }),
+            );
+            const currentPageLink = $('.ons-pagination__item--current a');
+            expect(currentPageLink.attr('aria-label')).toBe('Current page (Page 2 of 3)');
+        });
+    });
+
+    describe('custom lastAriaLabel', () => {
+        it('renders a custom aria-label on the last page link', () => {
+            const $ = cheerio.load(
+                renderComponent('pagination', {
+                    currentPageNumber: 2,
+                    pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }, { url: '/page/4' }],
+                    lastAriaLabel: 'Jump to last page',
+                }),
+            );
+            const lastPageLink = $('.ons-pagination__item a').filter(function () {
+                return $(this).text().trim() === '4';
+            });
+            expect(lastPageLink.attr('aria-label')).toBe('Jump to last page (4)');
+        });
+        it('renders the default aria-label on the last page link if not provided', () => {
+            const $ = cheerio.load(
+                renderComponent('pagination', {
+                    currentPageNumber: 2,
+                    pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }, { url: '/page/4' }],
+                }),
+            );
+            const lastPageLink = $('.ons-pagination__item a').filter(function () {
+                return $(this).text().trim() === '4';
+            });
+            expect(lastPageLink.attr('aria-label')).toBe('Go to the last page (4)');
+        });
+    });
+
+    describe('custom goToAriaLabel', () => {
+        it('renders a custom aria-label on non-current, non-first/last page links', () => {
+            const $ = cheerio.load(
+                renderComponent('pagination', {
+                    currentPageNumber: 3,
+                    pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }, { url: '/page/4' }, { url: '/page/5' }],
+                    goToAriaLabel: 'Jump to page',
+                }),
+            );
+            const page2Link = $('.ons-pagination__item a').filter(function () {
+                return $(this).text().trim() === '2';
+            });
+            expect(page2Link.attr('aria-label')).toBe('Jump to page 2');
+        });
+        it('renders the default aria-label on non-current, non-first/last page links if not provided', () => {
+            const $ = cheerio.load(
+                renderComponent('pagination', {
+                    currentPageNumber: 3,
+                    pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }, { url: '/page/4' }, { url: '/page/5' }],
+                }),
+            );
+            const page2Link = $('.ons-pagination__item a').filter(function () {
+                return $(this).text().trim() === '2';
+            });
+            expect(page2Link.attr('aria-label')).toBe('Go to page 2');
         });
     });
 });