@ons/design-system 72.10.6 → 72.10.7

package/components/chart/_macro.spec.js

@@ -25,6 +25,7 @@ import {
     EXAMPLE_LINE_CHART_WITH_RANGE_ANNOTATION_WITH_LABEL_INSIDE_PARAMS,
     EXAMPLE_LINE_CHART_WITH_REFERENCE_LINE_ANNOTATIONS_PARAMS,
     EXAMPLE_LINE_CHART_WITH_MIXED_ANNOTATION_TYPES_PARAMS,
+    EXAMPLE_IFRAME_CHART_PARAMS,
 } from './_test-examples';
 
 describe('Macro: Chart', () => {
@@ -628,14 +629,14 @@ describe('Macro: Chart', () => {
                 });
 
                 test('THEN: it renders the footnotes', () => {
-                    expect($('.ons-chart__footnotes').text()).toContain('1');
-                    expect($('.ons-chart__footnotes').text()).toContain('A test annotation');
-                    expect($('.ons-chart__footnotes').text()).toContain('2');
-                    expect($('.ons-chart__footnotes').text()).toContain('Another test annotation');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('1');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('A test annotation');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('2');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('Another test annotation');
                 });
 
                 test('THEN: the footnotes are hidden from screen readers', () => {
-                    expect($('.ons-chart__footnotes').attr('aria-hidden')).toBe('true');
+                    expect($('.ons-chart__annotations-footnotes').attr('aria-hidden')).toBe('true');
                 });
 
                 test('THEN: it includes the Annotations JSON config', () => {
@@ -658,12 +659,12 @@ describe('Macro: Chart', () => {
                 });
 
                 test('THEN: it renders the footnotes', () => {
-                    expect($('.ons-chart__footnotes').text()).toContain('1');
-                    expect($('.ons-chart__footnotes').text()).toContain('A test annotation');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('1');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('A test annotation');
                 });
 
                 test('THEN: the footnotes are hidden from screen readers', () => {
-                    expect($('.ons-chart__footnotes').attr('aria-hidden')).toBe('true');
+                    expect($('.ons-chart__annotations-footnotes').attr('aria-hidden')).toBe('true');
                 });
 
                 test('THEN: it includes the Annotations JSON config', () => {
@@ -687,12 +688,12 @@ describe('Macro: Chart', () => {
                 });
 
                 test('THEN: it renders the footnotes', () => {
-                    expect($('.ons-chart__footnotes').text()).toContain('1');
-                    expect($('.ons-chart__footnotes').text()).toContain('A test annotation');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('1');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('A test annotation');
                 });
 
                 test('THEN: the footnotes are hidden from screen readers', () => {
-                    expect($('.ons-chart__footnotes').attr('aria-hidden')).toBe('true');
+                    expect($('.ons-chart__annotations-footnotes').attr('aria-hidden')).toBe('true');
                 });
 
                 test('THEN: it includes the Annotations JSON config', () => {
@@ -977,6 +978,26 @@ describe('Macro: Chart', () => {
                 });
             });
         });
+
+        describe('GIVEN: Params: Footnotes', () => {
+            describe('WHEN: footnotes are provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_AREA_CHART_PARAMS,
+                        footnotes: {
+                            title: 'Footnotes',
+                            content:
+                                '<ol><li>Non-store retailing refers to retailers that do not have a store presence. While the majority is made up of online retailers, it also includes other retailers, such as stalls and markets.</li><li>More data are available in our Retail Sales Index datasets.</li></ol>',
+                        },
+                    }),
+                );
+                test('THEN: it renders the footnotes', () => {
+                    expect($('#footnotes--area-chart-123').length).toBe(1);
+                    expect($('#footnotes--area-chart-123').find('ol').length).toBe(1);
+                    expect($('#footnotes--area-chart-123').text()).toContain('Footnotes');
+                });
+            });
+        });
     });
 
     describe('FOR: Boxplot Chart', () => {
@@ -1304,16 +1325,16 @@ describe('Macro: Chart', () => {
                 });
 
                 test('THEN: it renders the footnotes sequentially', () => {
-                    expect($('.ons-chart__footnotes').text()).toContain('1');
-                    expect($('.ons-chart__footnotes').text()).toContain('A test point annotation');
-                    expect($('.ons-chart__footnotes').text()).toContain('2');
-                    expect($('.ons-chart__footnotes').text()).toContain('A test x axis range annotation');
-                    expect($('.ons-chart__footnotes').text()).toContain('3');
-                    expect($('.ons-chart__footnotes').text()).toContain('A test y axis range annotation with the label inside');
-                    expect($('.ons-chart__footnotes').text()).toContain('4');
-                    expect($('.ons-chart__footnotes').text()).toContain('A test x axis reference line annotation');
-                    expect($('.ons-chart__footnotes').text()).toContain('5');
-                    expect($('.ons-chart__footnotes').text()).toContain('A test y axis reference line annotation');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('1');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('A test point annotation');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('2');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('A test x axis range annotation');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('3');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('A test y axis range annotation with the label inside');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('4');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('A test x axis reference line annotation');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('5');
+                    expect($('.ons-chart__annotations-footnotes').text()).toContain('A test y axis reference line annotation');
                 });
             });
         });
@@ -1456,4 +1477,177 @@ describe('Macro: Chart', () => {
             });
         });
     });
+
+    describe('FOR: Iframe chart', () => {
+        describe('GIVEN: Params: Iframe chart', () => {
+            describe('WHEN: an iframe url param is provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_IFRAME_CHART_PARAMS));
+
+                test('THEN: it passes jest-axe checks', async () => {
+                    const results = await axe($.html());
+                    expect(results).toHaveNoViolations();
+                });
+
+                test('THEN: it renders the iframe', () => {
+                    expect($('[data-chart-iframe]').length).toBe(1);
+                });
+
+                test('THEN: it includes the iframe title as a data attribute', () => {
+                    const iframe = $('[data-chart-iframe]');
+                    expect(iframe.attr('data-title')).toBe(EXAMPLE_IFRAME_CHART_PARAMS.title);
+                });
+
+                test('THEN: the theme parameter is ignored', () => {
+                    const $ = cheerio.load(
+                        renderComponent('chart', {
+                            ...EXAMPLE_IFRAME_CHART_PARAMS,
+                            theme: 'secondary',
+                        }),
+                    );
+
+                    expect($('[data-highcharts-theme]').length).toBe(0);
+                });
+
+                test('THEN: the percentageHeightDesktop and percentageHeightMobile parameters are ignored', () => {
+                    const $ = cheerio.load(
+                        renderComponent('chart', {
+                            ...EXAMPLE_IFRAME_CHART_PARAMS,
+                            percentageHeightDesktop: 50,
+                            percentageHeightMobile: 10,
+                        }),
+                    );
+
+                    expect($('[data-highcharts-percentage-height-desktop]').length).toBe(0);
+                    expect($('[data-highcharts-percentage-height-mobile]').length).toBe(0);
+                });
+
+                test('THEN: the tickIntervalDesktop and tickIntervalMobile parameters are ignored', () => {
+                    const $ = cheerio.load(
+                        renderComponent('chart', {
+                            ...EXAMPLE_IFRAME_CHART_PARAMS,
+                            xAxis: {
+                                tickIntervalDesktop: 10,
+                                tickIntervalMobile: 5,
+                            },
+                            yAxis: {
+                                tickIntervalDesktop: 10,
+                                tickIntervalMobile: 5,
+                            },
+                        }),
+                    );
+
+                    expect($('[data-highcharts-x-axis-tick-interval-desktop]').length).toBe(0);
+                    expect($('[data-highcharts-x-axis-tick-interval-mobile]').length).toBe(0);
+                    expect($('[data-highcharts-y-axis-tick-interval-desktop]').length).toBe(0);
+                    expect($('[data-highcharts-y-axis-tick-interval-mobile]').length).toBe(0);
+                });
+
+                test('THEN: the tickIntervalDesktop and tickIntervalMobile parameters are ignored', () => {
+                    const $ = cheerio.load(
+                        renderComponent('chart', {
+                            ...EXAMPLE_IFRAME_CHART_PARAMS,
+                            estimateLineLabel: 'Estimated value',
+                            uncertaintyRangeLabel: '95% Confidence Interval',
+                        }),
+                    );
+
+                    expect($('[data-highcharts-estimate-line-label]').length).toBe(0);
+                    expect($('[data-highcharts-uncertainty-range-label]').length).toBe(0);
+                });
+
+                test('THEN: the customReferenceLineValue parameter is ignored', () => {
+                    const $ = cheerio.load(
+                        renderComponent('chart', {
+                            ...EXAMPLE_IFRAME_CHART_PARAMS,
+                            yAxis: {
+                                customReferenceLineValue: 10,
+                            },
+                        }),
+                    );
+
+                    expect($('[data-highcharts-custom-reference-line-value]').length).toBe(0);
+                });
+
+                test('THEN: the legend for boxplot charts is not rendered', () => {
+                    const $ = cheerio.load(
+                        renderComponent('chart', {
+                            ...EXAMPLE_IFRAME_CHART_PARAMS,
+                            chartType: 'boxplot',
+                            legend: true,
+                            estimateLineLabel: 'Estimated value',
+                            uncertaintyRangeLabel: '95% Confidence Interval',
+                        }),
+                    );
+
+                    expect($('.ons-chart__boxplot-legend').length).toBe(0);
+                });
+
+                test('THEN: the Highcharts config is not included', () => {
+                    const configScript = $(`script[data-highcharts-config--iframe-chart-123]`).html();
+                    expect(configScript).toBeNull();
+                });
+
+                test('THEN: the annotations footnotes and scripts are not rendered', () => {
+                    const $ = cheerio.load(
+                        renderComponent('chart', {
+                            ...EXAMPLE_IFRAME_CHART_PARAMS,
+                            annotations: [
+                                {
+                                    text: 'A test point annotation',
+                                    point: { x: 2, y: 3 },
+                                    labelOffsetX: 10,
+                                    labelOffsetY: -50,
+                                },
+                            ],
+                            rangeAnnotations: [
+                                {
+                                    text: 'A test x axis range annotation',
+                                    range: { axisValue1: 10, axisValue2: 15 },
+                                    axis: 'x',
+                                    labelOffsetX: 150,
+                                    labelOffsetY: 0,
+                                },
+                                {
+                                    text: 'A test y axis range annotation with the label inside',
+                                    range: { axisValue1: 5, axisValue2: 10 },
+                                    axis: 'y',
+                                    labelInside: true,
+                                    labelWidth: 250,
+                                },
+                            ],
+                            referenceLineAnnotations: [
+                                {
+                                    text: 'A test x axis reference line annotation',
+                                    value: 34,
+                                    axis: 'x',
+                                },
+                                {
+                                    text: 'A test y axis reference line annotation',
+                                    value: 12,
+                                    axis: 'y',
+                                    labelWidth: 100,
+                                },
+                            ],
+                        }),
+                    );
+
+                    expect($('[data-annotations-footnotes]').length).toBe(0);
+                    expect($('[data-highcharts-annotations--iframe-chart-123]').length).toBe(0);
+                    expect($('[data-highcharts-range-annotations--iframe-chart-123]').length).toBe(0);
+                    expect($('[data-highcharts-reference-line-annotations--iframe-chart-123]').length).toBe(0);
+                });
+
+                test('THEN: invalid chart type is ignored', () => {
+                    const $ = cheerio.load(
+                        renderComponent('chart', {
+                            ...EXAMPLE_IFRAME_CHART_PARAMS,
+                            chartType: 'foobar',
+                        }),
+                    );
+
+                    expect($('[data-invalid-chart-type]').length).toBe(0);
+                });
+            });
+        });
+    });
 });

package/components/chart/annotations-options.js

@@ -49,7 +49,7 @@ class AnnotationsOptions {
                     borderColor: 'transparent',
                     // We use css styling for the rounded number annotation at mobile
                     useHTML: true,
-                    className: 'ons-chart__footnote-number',
+                    className: 'ons-chart__annotations-footnotes-number',
                 },
                 draggable: '',
             },

package/components/chart/bar-chart.js

@@ -38,6 +38,7 @@ class BarChart {
                 // Update the category label colours for bar charts
                 labels: {
                     style: {
+                        textOverflow: 'ellipsis',
                         color: this.constants.categoryLabelColor,
                     },
                     useHTML: false,

package/components/chart/chart-iframe-resize.dom.js

@@ -0,0 +1,8 @@
+import ChartIframeResize from './chart-iframe-resize';
+import domready from '../../js/domready';
+
+domready(async () => {
+    [ChartIframeResize].forEach((Component) => {
+        document.querySelectorAll(Component.selector()).forEach((el) => new Component(el));
+    });
+});

package/components/chart/chart-iframe-resize.js

@@ -0,0 +1,16 @@
+import pym from 'pym.js';
+
+class ChartIframeResize {
+    static selector() {
+        return '[data-chart-iframe]';
+    }
+
+    constructor(node) {
+        this.node = node;
+        new pym.Parent(this.node.getAttribute('id'), this.node.dataset.url, {
+            title: this.node.dataset.title,
+        });
+    }
+}
+
+export default ChartIframeResize;

package/components/chart/chart.js

@@ -31,6 +31,11 @@ class HighchartsBaseChart {
             console.error('No chart node found');
             return;
         }
+
+        // Add a CSS class to the chart based on the chart type (e.g., 'bar-chart-container', 'line-chart-container')
+        // This allows type-specific styling in CSS.
+        chartNode.classList.add(`${this.chartType}-chart-container`);
+
         this.id = this.node.dataset.highchartsId;
         this.useStackedLayout = this.node.hasAttribute('data-highcharts-use-stacked-layout');
         this.config = JSON.parse(this.node.querySelector(`[data-highcharts-config--${this.id}]`).textContent);

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

@@ -26,6 +26,10 @@
                 }
             ]
         },
+        "footnotes": {
+            "title": "Footnotes",
+            "content": "<ol><li>Non-store retailing refers to retailers that do not have a store presence. While the majority is made up of online retailers, it also includes other retailers, such as stalls and markets.</li><li>More data are available in our Retail Sales Index datasets.</li></ol>"
+        },
         "xAxis": {
             "categories": [
                 "All retailing",

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

@@ -0,0 +1,32 @@
+{% from "components/chart/_macro.njk" import onsChart %}
+
+{# Important note: the example visualisation used here by the iframeUrl parameter
+may not be available in the future once Florence is decommissioned. #}
+
+{{
+    onsChart({
+        "description": "Volume sales, seasonally adjusted, Great Britain, January 2022 to January 2025",
+        "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",
+        "id": "uuid",
+        "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": "#"
+                }
+            ]
+        },
+        "iframeUrl": "https://www.ons.gov.uk/visualisations/dvc3294/fig01/index.html"
+    })
+}}

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

@@ -154,7 +154,9 @@
                 'Aug 2024',
                 'Sep 2024',
                 'Oct 2024'
-            ]
+            ],
+            "tickIntervalDesktop": 10,
+            "tickIntervalMobile": 30
         },
         "yAxis": {
             "title": "Sales",

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

@@ -27,6 +27,10 @@
                 "url": "#"
             }
         ]},
+        "footnotes": {
+            "title": "Footnotes",
+            "content": "<ol><li>Non-store retailing refers to retailers that do not have a store presence. While the majority is made up of online retailers, it also includes other retailers, such as stalls and markets.</li><li>More data are available in our Retail Sales Index datasets.</li></ol>"
+        },
         "legend": true,
         "xAxis": {
             "title": "Year",

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

@@ -27,6 +27,10 @@
                 "url": "#"
             }
         ]},
+        "footnotes": {
+            "title": "Footnotes",
+            "content": "<ol><li>Non-store retailing refers to retailers that do not have a store presence. While the majority is made up of online retailers, it also includes other retailers, such as stalls and markets.</li><li>More data are available in our Retail Sales Index datasets.</li></ol>"
+        },
         "xAxis": {
             "title": "Height"
         },

package/components/chart/range-annotations-options.js

@@ -65,7 +65,7 @@ class RangeAnnotationsOptions {
                     // So that if we have both types of annotations, the numbers will be sequential
                     text: `${annotationsLength + index + 1}`,
                     useHTML: true,
-                    className: 'ons-chart__footnote-number',
+                    className: 'ons-chart__annotations-footnotes-number',
                     allowOverlap: true,
                     style: {
                         color: this.constants.labelColor,

package/components/chart/reference-line-annotations-options.js

@@ -58,7 +58,7 @@ class ReferenceLineAnnotationsOptions {
                     // So that if we have more than one type of annotations, the numbers will be sequential
                     text: `${annotationsLength + index + 1}`,
                     useHTML: true,
-                    className: 'ons-chart__footnote-number',
+                    className: 'ons-chart__annotations-footnotes-number',
                     allowOverlap: true,
                     style: {
                         color: this.constants.labelColor,

package/components/checkboxes/_macro.spec.js

@@ -164,9 +164,9 @@ describe('macro: checkboxes', () => {
         it('renders the text area with expected parameters', () => {
             const $ = cheerio.load(renderComponent('checkboxes', EXAMPLE_CHECKBOX_ITEM_CHECKBOXES_WITH_TEXTAREA));
             expect($('.ons-input--textarea').attr('name')).toBe('other answer');
-            expect($('.ons-input--textarea').attr('data-char-check-num')).toBe('300');
-            expect($('.ons-input__limit').attr('data-charcount-singular')).toBe('You have {x} character remaining');
-            expect($('.ons-input__limit').attr('data-charcount-plural')).toBe('You have {x} characters remaining');
+            expect($('.ons-input--textarea').attr('data-message-check-num')).toBe('300');
+            expect($('.ons-input__limit').attr('data-message-singular')).toBe('You have {x} character remaining');
+            expect($('.ons-input__limit').attr('data-message-plural')).toBe('You have {x} characters remaining');
         });
     });
 

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/textarea/_macro.njk

@@ -19,14 +19,17 @@
 
         <textarea
             id="{{ params.id }}"
-            class="ons-input ons-input--textarea{{ ' ons-input--error' if params.error }}{{ ' ons-js-char-check-input' if params.charCheckLimit and params.charCheckLimit.limit }}{{ textareaExclusiveClass }}{{ ' ' + params.classes if params.classes else '' }}{% if params.width %}{{ ' ' }}ons-input--w-{{ params.width }}{% endif %}"
+            class="ons-input ons-input--textarea{{ ' ons-input--error' if params.error }}{{ ' ons-js-char-check-input' if (params.charCheckLimit and params.charCheckLimit.limit) or (params.wordCheckLimit and params.wordCheckLimit.limit) }}{{ textareaExclusiveClass }}{{ ' ' + params.classes if params.classes else '' }}{% if params.width %}{{ ' ' }}ons-input--w-{{ params.width }}{% endif %}"
             {% if params.name %}
                 name="{{ params.name }}"
             {% endif %}
             rows="{{ params.rows | default(8) }}"
             {% if params.charCheckLimit %}
-                data-char-check-ref="{{ params.id }}-check" data-char-check-num="{{ params.charCheckLimit.limit }}"
-                aria-describedby="{{ params.id }}-check" data-char-check-countdown=true
+                data-message-check-ref="{{ params.id }}-check" data-message-check-num="{{ params.charCheckLimit.limit }}"
+                aria-describedby="{{ params.id }}-check"
+            {% elif params.wordCheckLimit %}
+                data-message-check-ref="{{ params.id }}-check" data-message-check-num="{{ params.wordCheckLimit.limit }}"
+                aria-describedby="{{ params.id }}-check"
             {% 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 %}
         >
@@ -45,6 +48,19 @@
                 })
             %}
             {% endcall %}
+        {% elif params.wordCheckLimit and params.wordCheckLimit.limit %}
+            {%
+                call onsCharLimit({
+                    "id": params.id ~ "-check",
+                    "variant": "word",
+                    "limit": params.wordCheckLimit.limit,
+                    "wordCountSingular": params.wordCheckLimit.wordCountSingular,
+                    "wordCountPlural": params.wordCheckLimit.wordCountPlural,
+                    "wordCountOverLimitSingular": params.wordCheckLimit.wordCountOverLimitSingular,
+                    "wordCountOverLimitPlural": params.wordCheckLimit.wordCountOverLimitPlural
+                })
+            %}
+            {% endcall %}
         {% endif %}
     {% endset %}