@ons/design-system 73.0.2 → 73.0.4

package/README.md

@@ -1,7 +1,9 @@
 # ONS Design System
 
 [![GitHub release](https://img.shields.io/github/release/ONSdigital/design-system.svg)](https://github.com/ONSdigital/design-system/releases)
-[![Tests](https://github.com/ONSdigital/design-system/actions/workflows/tests.yml/badge.svg)](https://github.com/ONSdigital/design-system/actions/workflows/tests.yml)
+[![Macro and script tests](https://github.com/ONSdigital/design-system/actions/workflows/macro-and-script-tests.yml/badge.svg)](https://github.com/ONSdigital/design-system/actions/workflows/macro-and-script-tests.yml)
+[![Visual regression tests](https://github.com/ONSdigital/design-system/actions/workflows/visual-regression-tests.yml/badge.svg)](https://github.com/ONSdigital/design-system/actions/workflows/visual-regression-tests.yml)
+[![Lighthouse tests](https://github.com/ONSdigital/design-system/actions/workflows/lighthouse-ci.yml/badge.svg)](https://github.com/ONSdigital/design-system/actions/workflows/lighthouse-ci.yml)
 [![GitHub pull requests](https://img.shields.io/github/issues-pr-raw/ONSdigital/design-system.svg)](https://github.com/ONSdigital/design-system/pulls)
 [![Github last commit](https://img.shields.io/github/last-commit/ONSdigital/design-system.svg)](https://github.com/ONSdigital/design-system/commits)
 [![Github contributors](https://img.shields.io/github/contributors/ONSdigital/design-system.svg)](https://github.com/ONSdigital/design-system/graphs/contributors)

package/components/accordion/_macro.njk

@@ -8,6 +8,8 @@
             {%
                 set attributes = attributes | setAttributes({
                     "data-close-all": params.allButton.close,
+                    "data-open-aria-label": params.allButton.openAriaLabel | default("Show all buttons"),
+                    "data-close-aria-label": params.allButton.closeAriaLabel | default("Hide all buttons"),
                     "data-group": params.id
                 })
             %}

package/components/accordion/_macro.spec.js

@@ -202,7 +202,46 @@ describe('FOR: Macro: Accordion', () => {
                 expect($('button.ons-accordion__toggle-all').attr('b')).toBe('456');
             });
         });
+
+        describe('WHEN: openAriaLabel and closeAriaLabel are provided', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    ...EXAMPLE_ACCORDION,
+                    allButton: {
+                        open: 'Open label',
+                        close: 'Close label',
+                        openAriaLabel: 'Open all sections',
+                        closeAriaLabel: 'Close all sections',
+                    },
+                }),
+            );
+            test('THEN: renders toggle all button with provided openAriaLabel', () => {
+                expect($('button.ons-accordion__toggle-all').attr('data-open-aria-label')).toBe('Open all sections');
+            });
+            test('THEN: renders toggle all button with provided closeAriaLabel', () => {
+                expect($('button.ons-accordion__toggle-all').attr('data-close-aria-label')).toBe('Close all sections');
+            });
+        });
+
+        describe('WHEN: openAriaLabel and closeAriaLabel are NOT provided', () => {
+            const $ = cheerio.load(
+                renderComponent('accordion', {
+                    ...EXAMPLE_ACCORDION,
+                    allButton: {
+                        open: 'Open label',
+                        close: 'Close label',
+                    },
+                }),
+            );
+            test('THEN: renders toggle all button with default openAriaLabel', () => {
+                expect($('button.ons-accordion__toggle-all').attr('data-open-aria-label')).toBe('Show all buttons');
+            });
+            test('THEN: renders toggle all button with default closeAriaLabel', () => {
+                expect($('button.ons-accordion__toggle-all').attr('data-close-aria-label')).toBe('Hide all buttons');
+            });
+        });
     });
+
     describe('GIVEN: Params: saveState', () => {
         describe('WHEN: saveState param is not provided', () => {
             const $ = cheerio.load(

package/components/accordion/accordion.js

@@ -55,9 +55,11 @@ export default class Accordion {
         if (this.canClose()) {
             this.buttonInner.innerHTML = DOMPurify.sanitize(this.closeButton);
             this.button.setAttribute('data-ga-label', this.buttonOpen);
+            this.button.setAttribute('aria-label', this.button.getAttribute('data-close-aria-label'));
             this.button.setAttribute('aria-expanded', 'true');
         } else {
             this.buttonInner.innerHTML = DOMPurify.sanitize(this.buttonOpen);
+            this.button.setAttribute('aria-label', this.button.getAttribute('data-open-aria-label'));
             this.button.setAttribute('data-ga-label', this.closeButton);
             this.button.setAttribute('aria-expanded', 'false');
         }

package/components/accordion/example-accordion.njk

@@ -5,7 +5,12 @@
         "id": "accordion-example",
         "allButton": {
             "open": "Show all",
-            "close": "Hide all"
+            "close": "Hide all",
+            "openAriaLabel": "Show all sections",
+            "closeAriaLabel": "Hide all sections",
+            "attributes": {
+                "data-toggle-button": "accordion-toggle-all"
+            }
         },
         "itemsList": [
             {

package/components/back-to-top/example-full-page-back-to-top.njk

@@ -189,8 +189,8 @@ layout: ~
                                 },
                                 {
                                     "url": '#0',
-                                    "text": 'Twitter',
-                                    "iconType": 'twitter',
+                                    "text": 'X',
+                                    "iconType": 'x',
                                     "rel": 'noreferrer external'
                                 }
                             ]

package/components/button/example-button-new-window.njk

@@ -1,4 +1,5 @@
 {% from "components/button/_macro.njk" import onsButton %}
+
 {{
     onsButton({
         "text": 'Web chat',

package/components/chart/chart-constants.js

@@ -1,7 +1,8 @@
 class ChartConstants {
     static constants() {
         const constants = {
-            primaryTheme: ['#206095', '#27a0cc', '#003c57', '#118c7b', '#a8bd3a', '#871a5b', '#f66068', '#746cb1', '#22d0b6'],
+            primaryTheme: ['#206095', '#a8bd3a', '#871a5b', '#f66068', '#05341a', '#27a0cc'],
+            linePrimaryTheme: ['#206095', '#a8bd3a', '#871a5b', '#f66068', '#27a0cc', '#05341a'],
             // Alternate theme colours from https://service-manual.ons.gov.uk/data-visualisation/colours/using-colours-in-charts
             alternateTheme: ['#206095', '#27A0CC', '#871A5B', '#A8BD3A', '#F66068'],
             labelColor: '#414042',

package/components/chart/chart.js

@@ -187,6 +187,8 @@ class HighchartsBaseChart {
             }
         }
 
+        this.specificChartOptions.limitSeriesToThemeLength();
+
         // Disable the legend for single series charts
         this.specificChartOptions.disableLegendForSingleSeries(this.config);
     };

package/components/chart/example-area-chart-with-axis-min-and-max-values.njk

@@ -4,7 +4,7 @@
     onsChart({
         "chartType": "area",
         "description": "Area chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
-        "theme": "alternate",
+        "theme": "primary",
         "title": "Sales volumes and values saw moderate growth in July 2024",
         "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
         "id": "id",

package/components/chart/example-clustered-column-chart.njk

@@ -4,7 +4,7 @@
     onsChart({
         "chartType": "column",
         "description": "Volume sales, monthly percentage change, seasonally adjusted, Great Britain, October 2024",
-        "theme": "alternate",
+        "theme": "primary",
         "title": "Clothing stores fell back, following three months of growth",
         "subtitle": "Volume sales, monthly percentage change, seasonally adjusted, Great Britain, October 2024",
         "id": "uuid",

package/components/chart/example-line-chart-with-annotations.njk

@@ -4,7 +4,7 @@
     onsChart({
         "chartType": "line",
         "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
-        "theme": "alternate",
+        "theme": "primary",
         "title": "Sales volumes and values saw moderate growth in July 2024",
         "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
         "id": "id",

package/components/chart/example-line-chart-with-axis-min-and-max-values.njk

@@ -4,7 +4,7 @@
     onsChart({
         "chartType": "line",
         "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
-        "theme": "alternate",
+        "theme": "primary",
         "title": "Sales volumes and values saw moderate growth in July 2024",
         "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
         "id": "id",

package/components/chart/example-line-chart-with-custom-reference-line-value.njk

@@ -4,7 +4,7 @@
     onsChart({
         "chartType": "line",
         "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
-        "theme": "alternate",
+        "theme": "primary",
         "title": "Sales volumes and values saw moderate growth in July 2024",
         "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
         "id": "id",

package/components/chart/example-line-chart-with-markers.njk

@@ -38,11 +38,7 @@
                 'Dec 2014',
                 'Jan 2015',
                 'Feb 2015',
-                'Mar 2015',
-                'Apr 2015',
-                'May 2015',
-                'Jun 2015',
-                'Jul 2015'
+                'Mar 2015'
             ]
         },
         "yAxis": {
@@ -98,38 +94,6 @@
                 ],
                 "marker": true,
                 "connectNulls": true
-            },
-            {
-                "name": 'Extra test series 3',
-                "data": [
-                    5.5, 5.3, 5.4, 5.5, 5.4, 5.2, 5.1, 5.2, 5.0, 5.3
-                ],
-                "marker": true,
-                "connectNulls": true
-            },
-            {
-                "name": 'Extra test series 4',
-                "data": [
-                    -3.5, -3.3, -3.4, -3.5, -3.4, -3.2, -3.1, -3.2, -3.0, -3.3
-                ],
-                "marker": true,
-                "connectNulls": true
-            },
-            {
-                "name": 'Extra test series 5',
-                "data": [
-                    -4.5, -4.3, -4.4, -4.5, -4.4, -4.2, -4.1, -4.2, -4.0, -4.3
-                ],
-                "marker": true,
-                "connectNulls": true
-            },
-            {
-                "name": 'Extra test series 6',
-                "data": [
-                    -5.5, -5.3, -5.4, -5.5, -5.4, -5.2, -5.1, -5.2, -5.0, -5.3
-                ],
-                "marker": true,
-                "connectNulls": true
             }
         ],
         "percentageHeightDesktop": 35,

package/components/chart/example-line-chart-with-range-annotations-inside.njk

@@ -4,7 +4,7 @@
     onsChart({
         "chartType": "line",
         "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
-        "theme": "alternate",
+        "theme": "primary",
         "title": "Sales volumes and values saw moderate growth in July 2024",
         "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
         "id": "id",

package/components/chart/example-line-chart-with-range-annotations-outside-left-right.njk

@@ -4,7 +4,7 @@
     onsChart({
         "chartType": "line",
         "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
-        "theme": "alternate",
+        "theme": "primary",
         "title": "Sales volumes and values saw moderate growth in July 2024",
         "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
         "id": "id",

package/components/chart/example-line-chart-with-range-annotations-outside-top-bottom.njk

@@ -4,7 +4,7 @@
     onsChart({
         "chartType": "line",
         "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
-        "theme": "alternate",
+        "theme": "primary",
         "title": "Sales volumes and values saw moderate growth in July 2024",
         "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
         "id": "id",

package/components/chart/example-line-chart-with-reference-line-annotations.njk

@@ -4,7 +4,7 @@
     onsChart({
         "chartType": "line",
         "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
-        "theme": "alternate",
+        "theme": "primary",
         "title": "Sales volumes and values saw moderate growth in July 2024",
         "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
         "id": "id",

package/components/chart/example-line-chart.njk

@@ -4,7 +4,7 @@
     onsChart({
         "chartType": "line",
         "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
-        "theme": "alternate",
+        "theme": "primary",
         "title": "Sales volumes and values saw moderate growth in July 2024",
         "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
         "id": "id",

package/components/chart/example-scatter-chart-with-axis-min-and-max-values.njk

@@ -4,7 +4,7 @@
     onsChart({
         "chartType": "scatter",
         "description": "Example scatter chart",
-        "theme": "alternate",
+        "theme": "primary",
         "title": "Example scatter chart",
         "subtitle": "Scatter chart subtitle",
         "id": "id",

package/components/chart/example-scatter-chart.njk

@@ -4,7 +4,7 @@
     onsChart({
         "chartType": "scatter",
         "description": "Example scatter chart",
-        "theme": "alternate",
+        "theme": "primary",
         "title": "Example scatter chart",
         "subtitle": "Scatter chart subtitle",
         "id": "id",

package/components/chart/example-stacked-column-chart.njk

@@ -2,66 +2,55 @@
 {{
     onsChart({
         "chartType": "column",
-        "description": "Volume sales, seasonally adjusted, Great Britain, January 2022 to January 2025",
+        "description": "Monthly percentage change in retail sales volume by store type, Great Britain, January to June 2025",
         "theme": "primary",
         "title": "Food stores showed a strong rise on the month, while non-food stores fell",
-        "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
+        "subtitle": "Figure 6: Upward contribution to monthly percentage change in total retail sales",
         "id": "uuid",
         "useStackedLayout": true,
         "caption": "Source: Monthly Business Survey, Retail Sales Inquiry from the Office for National Statistics",
         "download": {
-            'title': 'Download Figure 1 data',
-            'itemsList': [
-                {
-                    "text": "Excel spreadsheet (XLSX format, 18KB)",
-                    "url": "#"
-                },
-                {
-                    "text": "Simple text file (CSV format, 25KB)",
-                    "url": "#"
-                },
-                {
-                    "text": "Image (PNG format, 25KB)",
-                    "url": "#"
-                }
+            "title": "Download Figure 6 data",
+            "itemsList": [
+                { "text": "Excel spreadsheet (XLSX format, 22KB)", "url": "#" },
+                { "text": "Simple text file (CSV format, 28KB)", "url": "#" },
+                { "text": "Image (PNG format, 32KB)", "url": "#" }
             ]
         },
         "legend": true,
         "series": [
             {
-                "data": [5, 3, 4, 6, 2, 2, 3, 7],
-                "dataLabels": false,
-                "name": "2022"
+                "name": "Food stores",
+                "data": [1.5, 0.8, 1.2, 0.9, 1.1, 1.4]
             },
             {
-                "data": [2, 2, 3, 7, 3, 4, 4, 1],
-                "dataLabels": false,
-                "name": "2023"
+                "name": "Non-food stores",
+                "data": [0.5, -0.2, 0.6, 0.8, 0.3, 0.4]
             },
             {
-                "data": [3, 4, 4, 1, 5, 3, 4, 6],
-                "dataLabels": false,
-                "name": "2024"
+                "name": "Non-store retailing",
+                "data": [0.2, 0.1, 0.3, 0.2, 0.4, 0.3]
+            },
+            {
+                "name": "Automotive fuel",
+                "data": [0.3, 0.2, -0.1, 0.4, 0.2, 0.5]
             }
         ],
         "xAxis": {
             "categories": [
-                "Food stores",
-                "Non-food stores",
-                "Non-store retailing ",
-                "Automotive fuel",
-                "Household goods stores",
-                "Clothing stores",
-                "Other stores",
-                "All retailing"
+                "Jan 2025",
+                "Feb 2025",
+                "Mar 2025",
+                "Apr 2025",
+                "May 2025",
+                "Jun 2025"
             ],
-            "title": "Items",
-            "type": "linear"
+            "title": "Month"
         },
         "yAxis": {
-            "title": "Percentage of GDP (%)"
+            "title": "Monthly percentage change (%)"
         },
-        "percentageHeightDesktop": 35,
+        "percentageHeightDesktop": 40,
         "percentageHeightMobile": 90
     })
 }}

package/components/chart/specific-chart-options.js

@@ -8,7 +8,12 @@ class SpecificChartOptions {
         this.config = config;
 
         this.options = {
-            colors: this.theme === 'alternate' ? this.constants.alternateTheme : this.constants.primaryTheme,
+            colors:
+                this.theme === 'alternate'
+                    ? this.constants.alternateTheme
+                    : type == 'line'
+                      ? this.constants.linePrimaryTheme
+                      : this.constants.primaryTheme,
             chart: {
                 type: type,
                 marginTop: this.config.legend.enabled ? (type === 'boxplot' ? 50 : undefined) : 50,
@@ -41,6 +46,16 @@ class SpecificChartOptions {
         };
     }
 
+    limitSeriesToThemeLength = () => {
+        // Get the theme array from ChartConstants based on the theme name
+        const themeArray = this.theme === 'alternate' ? this.constants.alternateTheme : this.constants.primaryTheme;
+
+        // Limit the series to the theme array length
+        if (this.config.series.length > themeArray.length) {
+            this.config.series.length = themeArray.length;
+        }
+    };
+
     getOptions = () => this.options;
 
     getMobileOptions = (xAxisTickInterval, yAxisTickInterval) => {

package/components/cookies-banner/_macro.njk

@@ -4,7 +4,6 @@
     {% if params.lang == 'cy' %}
         {% set ariaLabel = 'Cwcis' %}
         {% set serviceName = 'ons.gov.uk' %}
-        {% set defaultCookiesLink = '/cwics' %}
         {% set statementTitle = 'Cwcis ar' %}
         {% set settingsLinkText = 'Gweld cwcis' %}
         {% set acceptButtonText = 'Derbyn cwcis ychwanegol' %}
@@ -20,7 +19,6 @@
     {% else %}
         {% set ariaLabel = 'Cookies banner' %}
         {% set serviceName = 'ons.gov.uk' %}
-        {% set defaultCookiesLink = '/cookies' %}
         {% set statementTitle = 'Cookies on' %}
         {% set settingsLinkText = 'View cookies' %}
         {% set acceptButtonText = 'Accept additional cookies' %}
@@ -36,7 +34,7 @@
     {% endif %}
 
     {% if not isDesignSystemExample %}
-        {% set settingsLinkUrl = params.settingsLinkUrl | default(defaultCookiesLink) %}
+        {% set settingsLinkUrl = params.settingsLinkUrl | default('/cookies') %}
     {% else %}
         {% set settingsLinkUrl = '#0' %}
     {% endif %}

package/components/featured-article/example-featured-article-with-chart.njk

@@ -18,7 +18,7 @@
         "chart": {
             "chartType": "line",
             "description": "Line chart showing the annual rate of inflation for the Consumer Prices Index including owner occupiers’ housing costs (CPIH) and its components.",
-            "theme": "alternate",
+            "theme": "primary",
             "title": "Sales volumes and values saw moderate growth in July 2024",
             "subtitle": "Figure 6: Upward contribution from housing and household services (including energy) saw the annual CPIH inflation rate rise",
             "id": "id",

package/components/icon/_macro.njk

@@ -241,10 +241,10 @@
                 d="M32,16.0986285 C32.0009185,7.5342974 25.337417,0.468462963 16.8372092,0.0203294753 C8.33700136,-0.427804013 0.97607758,5.89865855 0.0874346352,14.4161886 C-0.801208309,22.9337186 5.09355054,30.6602611 13.5009524,31.9979281 L13.5009524,20.7518951 L9.44,20.7518951 L9.44,16.0986285 L13.5009524,16.0986285 L13.5009524,12.549267 C13.5009524,8.5169471 15.8857143,6.28613892 19.5428571,6.28613892 C20.742535,6.30277426 21.9393895,6.40782423 23.1238095,6.60044523 L23.1238095,10.5637711 L21.1047619,10.5637711 C19.1161905,10.5637711 18.4990476,11.8056643 18.4990476,13.0782216 L18.4990476,16.0986285 L22.9409524,16.0986285 L22.2247619,20.7518951 L18.4990476,20.7518951 L18.4990476,31.9979281 C26.2735701,30.760956 31.9991507,24.0182672 32,16.0986285 L32,16.0986285 Z"
             />
         </svg>
-    {%- elif params.iconType == "twitter" -%}
+    {%- elif params.iconType == "x" -%}
         <svg
             class="{% if params.iconSize %}ons-icon ons-icon--{{ params.iconSize }}{% else %}ons-icon{% endif %}{{ iconClasses }}"
-            id="icon-twitter"
+            id="icon-x"
             viewBox="0 0 90.01 90.01"
             xmlns="http://www.w3.org/2000/svg"
             focusable="false"
@@ -649,6 +649,7 @@
             viewBox="0 0 115 96"
             focusable="false"
             role="img"
+            aria-hidden="true"
         >
             <title id="{{ params.altTextId | default ('crest-alt') }}">
                 {{ params.altText | default ('Royal coat of arms of the United Kingdom') }}
@@ -835,7 +836,15 @@
             />
         </svg>
     {%- elif params.iconType == "census-logo" -%}
-        <svg xmlns="http://www.w3.org/2000/svg" class="ons-icon--logo{{ iconClasses }}" width="152" height="16" viewBox="0 0 171 18">
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="ons-icon--logo{{ iconClasses }}"
+            width="152"
+            height="16"
+            viewBox="0 0 171 18"
+            aria-hidden="true"
+            focusable="false"
+        >
             <title id="{{ params.altTextId | default ('census-logo-alt') }}">{{ params.altText | default ('Census 2021 Logo') }}</title>
             <path
                 d="M22.9246 6.96226H31.8567C31.0755 5.26415 29.3774 4.09245 27.3906 4.09245C25.4038 4.09245 23.7057 5.26415 22.9246 6.96226ZM27.3906 18C22.4321 18 18.3906 13.9585 18.3906 9C18.3906 4.04151 22.4321 0 27.3906 0C32.3491 0 36.3906 4.04151 36.3906 9C36.3906 10.1208 35.4736 11.0377 34.3529 11.0377H22.9246C23.7057 12.7358 25.4038 13.9076 27.3906 13.9076C28.5114 13.9076 29.4284 14.8245 29.4284 15.9453C29.4284 17.083 28.5114 18 27.3906 18Z"

package/components/icon/_macro.spec.js

@@ -22,7 +22,7 @@ describe('macro: icon', () => {
         'search',
         'sort-sprite',
         'facebook',
-        'twitter',
+        'x',
         'instagram',
         'linkedin',
         'loader',
@@ -80,7 +80,7 @@ describe('macro: icon', () => {
         'quote',
         'search',
         'facebook',
-        'twitter',
+        'x',
         'instagram',
         'linkedin',
     ])('icon type: %s', (iconType) => {

package/components/image/_image.scss

@@ -9,8 +9,9 @@
     }
 
     &__caption {
+        @extend .ons-u-fs-s;
+
         display: block;
-        font-size: 0.8rem;
         padding: 0.5rem 0 0;
     }
 }

package/components/list/example-inline-list-with-social-icon-prefix.njk

@@ -7,8 +7,8 @@
         "itemsList": [
             {
                 "url": '#0',
-                "text": 'Twitter',
-                "iconType": 'twitter',
+                "text": 'X',
+                "iconType": 'x',
                 "attributes": {
                     "rel": 'noreferrer external'
                 }

package/components/pagination/_macro.njk

@@ -7,8 +7,8 @@
     {% 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') %}
+    {% set prevPageAriaLabel = (params.previousAriaLabel or 'Previous page') %}
+    {% set nextPageAriaLabel = (params.nextAriaLabel or 'Next page') %}
 
     <nav
         class="ons-pagination{{ ' ' + params.classes if params.classes else '' }}{{ ' ons-pagination--no-indicator' if params.hideRangeIndicator }}"
@@ -41,7 +41,7 @@
                     <a
                         href="{{ firstPage.url }}"
                         class="ons-pagination__link"
-                        aria-label="{{ params.firstAriaLabel | default('Go to the first page') }}"
+                        aria-label="{{ params.firstAriaLabel | default('First page') }}"
                         >1</a
                     >
                 </li>
@@ -63,9 +63,10 @@
                             href="{{ page.url }}"
                             class="ons-pagination__link"
                             {%- if loop.index == currentPageIndex -%}
-                                aria-current="true" aria-label="{{ params.currentAriaLabel | default('Current page') }} ({{ position }})"
+                                aria-current="true"
+                                aria-label="{% if params.currentAriaLabel %}{{ params.currentAriaLabel }} ({{ position }}){% else %}{{ position }}{% endif %}"
                             {%- else -%}
-                                aria-label="{{ params.goToAriaLabel | default('Go to page') }} {{ loop.index }}"
+                                aria-label="{{ params.goToAriaLabel | default('Page') }} {{ loop.index }}"
                             {%- endif -%}
                             {%- if loop.index == currentPageIndex - 1 -%}
                                 rel="prev"
@@ -86,7 +87,7 @@
                     <a
                         href="{{ lastPage.url }}"
                         class="ons-pagination__link"
-                        aria-label="{{ params.lastAriaLabel | default('Go to the last page') }} ({{ totalPages }})"
+                        aria-label="{{ params.lastAriaLabel | default('Last page') }} ({{ totalPages }})"
                         >{{ totalPages }}</a
                     >
                 </li>