@ons/design-system 72.10.8 → 72.10.9

package/components/accordion/accordion.js

@@ -1,3 +1,4 @@
+import DOMPurify from 'dompurify';
 export default class Accordion {
     constructor(button, detailsEls) {
         this.openDetailsEls = 0;
@@ -52,11 +53,11 @@ export default class Accordion {
 
     setButton() {
         if (this.canClose()) {
-            this.buttonInner.innerHTML = this.closeButton;
+            this.buttonInner.innerHTML = DOMPurify.sanitize(this.closeButton);
             this.button.setAttribute('data-ga-label', this.buttonOpen);
             this.button.setAttribute('aria-expanded', 'true');
         } else {
-            this.buttonInner.innerHTML = this.buttonOpen;
+            this.buttonInner.innerHTML = DOMPurify.sanitize(this.buttonOpen);
             this.button.setAttribute('data-ga-label', this.closeButton);
             this.button.setAttribute('aria-expanded', 'false');
         }

package/components/autosuggest/autosuggest.spec.js

@@ -386,9 +386,11 @@ describe('script: autosuggest', () => {
     describe('when the mouse moves over a result and a suggestion is focused', () => {
         it('removes the focused class', async () => {
             await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
+            await page.mouse.move(0, 0); // move out of the component
 
             await page.type('.ons-js-autosuggest-input', 'state', { delay: 20 });
             await page.keyboard.press('ArrowDown');
+
             await page.hover('.ons-autosuggest__option:nth-child(2)');
 
             const focusedClassCount = await page.$$eval('.ons-autosuggest__option--focused', (nodes) => nodes.length);

package/components/autosuggest/autosuggest.ui.js

@@ -1,6 +1,7 @@
 import abortableFetch from '../../js/abortable-fetch';
 import { sanitiseAutosuggestText } from './autosuggest.helpers';
 import runFuse from './fuse-config';
+import DOMPurify from 'dompurify';
 
 export const baseClass = 'ons-js-autosuggest';
 
@@ -398,7 +399,7 @@ export default class AutosuggestUI {
                 const listElement = document.createElement('li');
                 listElement.className = `${classAutosuggestOption} ${classAutosuggestOptionMoreResults}`;
                 listElement.setAttribute('aria-hidden', 'true');
-                listElement.innerHTML = this.moreResults;
+                listElement.innerHTML = DOMPurify.sanitize(this.moreResults);
                 this.listbox.appendChild(listElement);
             }
 
@@ -436,10 +437,12 @@ export default class AutosuggestUI {
         if (status === 400 || status === false) {
             message = this.typeMore;
             this.setAriaStatus(message);
-            this.listbox.innerHTML = `<li class="${classAutosuggestOption} ${classAutosuggestOptionNoResults}">${message}</li>`;
+            this.listbox.innerHTML = DOMPurify.sanitize(
+                `<li class="${classAutosuggestOption} ${classAutosuggestOptionNoResults}">${message}</li>`,
+            );
         } else if (status > 400 || status === '') {
-            message =
-                this.errorAPI + (this.errorAPILinkText ? ' <a href="' + window.location.href + '">' + this.errorAPILinkText + '</a>.' : '');
+            const sanitizedHref = DOMPurify.sanitize(window.location.href);
+            message = this.errorAPI + (this.errorAPILinkText ? ' <a href="' + sanitizedHref + '">' + this.errorAPILinkText + '</a>.' : '');
             let ariaMessage = this.errorAPI + (this.errorAPILinkText ? ' ' + this.errorAPILinkText : '');
 
             this.input.setAttribute('disabled', true);
@@ -453,7 +456,9 @@ export default class AutosuggestUI {
             this.resultsTitleContainer.remove();
         } else {
             message = this.noResults;
-            this.listbox.innerHTML = `<li class="${classAutosuggestOption} ${classAutosuggestOptionNoResults}">${message}</li>`;
+            this.listbox.innerHTML = DOMPurify.sanitize(
+                `<li class="${classAutosuggestOption} ${classAutosuggestOptionNoResults}">${message}</li>`,
+            );
         }
     }
 
@@ -503,7 +508,7 @@ export default class AutosuggestUI {
                 }
             }
         }
-        this.ariaStatus.innerHTML = content;
+        this.ariaStatus.innerHTML = DOMPurify.sanitize(content);
     }
 
     selectResult(index) {
@@ -548,7 +553,7 @@ export default class AutosuggestUI {
         warningSpanElement.innerHTML = '!';
 
         warningBodyElement.className = 'ons-panel__body';
-        warningBodyElement.innerHTML = content;
+        warningBodyElement.innerHTML = DOMPurify.sanitize(content);
 
         warningElement.appendChild(warningSpanElement);
         warningElement.appendChild(warningBodyElement);

package/components/breadcrumbs/_breadcrumbs.scss

@@ -1,5 +1,58 @@
 $breadcrumb-chevron-height: 0.65rem;
 
+.ons-breadcrumbs-wrapper {
+    position: relative;
+    z-index: 10;
+    margin-bottom: -2rem;
+    &--grey {
+        background-color: var(--ons-color-banner-bg);
+    }
+
+    &--dark {
+        background-color: var(--ons-color-hero-bg-dark);
+    }
+
+    &--navy-blue {
+        background-color: var(--ons-color-navy-blue-light);
+        margin-bottom: -1.75rem;
+        @include mq(l) {
+            margin-bottom: -3.25rem;
+        }
+    }
+
+    &--dark,
+    &--navy-blue {
+        .ons-icon {
+            color: var(--ons-color-text-inverse);
+        }
+
+        .ons-breadcrumbs__link {
+            color: var(--ons-color-text-inverse);
+            text-decoration: underline;
+
+            &:hover {
+                color: var(--ons-color-text-inverse);
+                text-decoration: underline solid var(--ons-color-text-inverse) 2px;
+            }
+
+            &:focus {
+                color: var(--ons-color-text);
+            }
+
+            &:focus:hover {
+                text-decoration: none;
+            }
+        }
+    }
+
+    &--pale-blue {
+        background-color: var(--ons-color-pale-blue);
+    }
+    .ons-breadcrumbs {
+        padding: 1rem;
+    }
+}
+
 .ons-breadcrumbs {
     align-items: center;
     display: flex;

package/components/breadcrumbs/_macro.njk

@@ -1,28 +1,37 @@
 {% from "components/icon/_macro.njk" import onsIcon %}
-
 {% macro onsBreadcrumbs(params) %}
-    <nav
-        class="ons-breadcrumbs{{ ' ' + params.classes if params.classes else '' }}"
-        aria-label="{{ params.ariaLabel | default('Breadcrumbs') }}"
-        {% if params.id %}id="{{ params.id }}"{% endif %}
-    >
-        <ol class="ons-breadcrumbs__items ons-u-fs-s">
-            {%- for item in params.itemsList -%}
-                <li class="ons-breadcrumbs__item{{ ' ' + item.itemClasses if item.itemClasses else '' }}" id="breadcrumb-{{ loop.index }}">
-                    <a
-                        class="ons-breadcrumbs__link{{ ' ' + item.linkClasses if item.linkClasses else '' }}"
-                        href="{% if not isDesignSystemExample %}{{ item.url }}{% else %}#0{% endif %}"
-                        {% if item.id %}{{ ' ' }}id='{{ item.id }}'{% endif %}
-                        {% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
-                        >{{ item.text }}</a
+    {% set breadcrumbs %}
+        <nav
+            class="ons-breadcrumbs{{ ' ons-container' if params.variant }}{{ ' ' + params.classes if params.classes else '' }}"
+            aria-label="{{ params.ariaLabel | default('Breadcrumbs') }}"
+            {% if params.id %}id="{{ params.id }}"{% endif %}
+        >
+            <ol class="ons-breadcrumbs__items ons-u-fs-s">
+                {%- for item in params.itemsList -%}
+                    <li
+                        class="ons-breadcrumbs__item{{ ' ' + item.itemClasses if item.itemClasses else '' }}"
+                        id="breadcrumb-{{ loop.index }}"
                     >
-                    {{-
-                        onsIcon({
-                            "iconType": "chevron"
-                        })
-                    -}}
-                </li>
-            {%- endfor -%}
-        </ol>
-    </nav>
+                        <a
+                            class="ons-breadcrumbs__link{{ ' ' + item.linkClasses if item.linkClasses else '' }}"
+                            href="{% if not isDesignSystemExample %}{{ item.url }}{% else %}#0{% endif %}"
+                            {% if item.id %}{{ ' ' }}id='{{ item.id }}'{% endif %}
+                            {% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
+                            >{{ item.text }}</a
+                        >
+                        {{-
+                            onsIcon({
+                                "iconType": "chevron"
+                            })
+                        -}}
+                    </li>
+                {%- endfor -%}
+            </ol>
+        </nav>
+    {% endset %}
+    {% if params.variant %}
+        <div class="ons-breadcrumbs-wrapper ons-breadcrumbs-wrapper--{{ params.variant }}">{{ breadcrumbs | safe }}</div>
+    {% else %}
+        {{ breadcrumbs | safe }}
+    {% endif %}
 {% endmacro %}

package/components/breadcrumbs/_macro.spec.js

@@ -132,4 +132,29 @@ describe('FOR: Macro: Breadcrumbs', () => {
             });
         });
     });
+
+    describe('GIVEN: Params: variant', () => {
+        describe('WHEN: variant is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('breadcrumbs', {
+                    ...EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS,
+                    variant: 'grey',
+                }),
+            );
+            test('THEN: renders breadcrumbs in a breadcrumbs-wrapper with correct modifier class', () => {
+                expect($('.ons-breadcrumbs-wrapper').hasClass('ons-breadcrumbs-wrapper--grey')).toBe(true);
+            });
+        });
+
+        describe('WHEN: variant is not provided', () => {
+            const $ = cheerio.load(
+                renderComponent('breadcrumbs', {
+                    ...EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS,
+                }),
+            );
+            test('THEN: does not render breadcrumbs-wrapper', () => {
+                expect($('.ons-breadcrumbs-wrapper').length).toBe(0);
+            });
+        });
+    });
 });

package/components/chart/_chart.scss

@@ -7,6 +7,28 @@
         overflow: visible !important;
     }
 
+    @media (forced-colors: active) {
+        .highcharts-plot-band {
+            fill: var(--ons-color-grey-75); /* Forces the color used for text in high contrast mode */
+        }
+        .highcharts-annotation-label text,
+        .highcharts-plot-line-label,
+        .highcharts-plot-band-label {
+            fill: CanvasText !important; /* Forces the color used for text in high contrast mode */
+        }
+
+        .highcharts-annotation-label-box {
+            fill: Canvas; /* Sets the background to match system background */
+            stroke: CanvasText; /* Ensures border is visible in contrast mode */
+        }
+    }
+
+    &__container:focus {
+        box-shadow: 0 0 0 3px var(--ons-color-black);
+        outline: 4px solid var(--ons-color-focus);
+        outline-offset: 2px;
+    }
+
     &__download-title {
         @extend .ons-u-pt-l;
         @extend .ons-u-fs-r--b;
@@ -170,6 +192,69 @@
     border-left: 1px solid var(--ons-color-grey-100);
 }
 
+@media (forced-colors: active) {
+    .ons-chart__boxplot-legend-item--uncertainty,
+    .highcharts-boxplot-box {
+        background-color: SelectedItem;
+        fill: SelectedItem;
+    }
+
+    .ons-chart__boxplot-legend-item--estimate,
+    .highcharts-boxplot-median {
+        background-color: WindowText;
+        stroke: WindowText;
+    }
+    .highcharts-color-0,
+    .highcharts-color-0 .highcharts-area,
+    .highcharts-legend-item.highcharts-color-0 rect {
+        fill: #007faa;
+    }
+    .highcharts-color-1,
+    .highcharts-color-1 .highcharts-area,
+    .highcharts-legend-item.highcharts-color-1 rect {
+        fill: #a6f0ff;
+    }
+    .highcharts-color-2,
+    .highcharts-color-2 .highcharts-area,
+    .highcharts-legend-item.highcharts-color-2 rect {
+        fill: #70d49e;
+    }
+    .highcharts-color-3,
+    .highcharts-color-3 .highcharts-area,
+    .highcharts-legend-item.highcharts-color-3 rect {
+        fill: #e898a5;
+    }
+    .highcharts-color-4,
+    .highcharts-color-4 .highcharts-area,
+    .highcharts-legend-item.highcharts-color-4 rect {
+        fill: #dadfe1;
+    }
+    .highcharts-color-5,
+    .highcharts-color-5 .highcharts-area,
+    .highcharts-legend-item.highcharts-color-5 rect {
+        fill: #f9db72;
+    }
+    .highcharts-color-6,
+    .highcharts-color-6 .highcharts-area,
+    .highcharts-legend-item.highcharts-color-6 rect {
+        fill: #f45b5b;
+    }
+    .highcharts-color-7,
+    .highcharts-color-7 .highcharts-area,
+    .highcharts-legend-item.highcharts-color-7 rect {
+        fill: #1e824c;
+    }
+    .highcharts-color-8,
+    .highcharts-color-8 .highcharts-area,
+    .highcharts-legend-item.highcharts-color-8 rect {
+        fill: #e7934c;
+    }
+    .highcharts-color-9,
+    .highcharts-color-9 .highcharts-area,
+    .highcharts-legend-item.highcharts-color-9 rect {
+        fill: #a0618b;
+    }
+}
 // Allow last label to overflow
 .highcharts-container {
     overflow: visible !important;

package/components/chart/_macro.njk

@@ -15,6 +15,9 @@
     {% set openingDownloadTitleTag = "<h" ~ (headingLevel + 2) %}
     {% set closingDownloadTitleTag = "</h" ~ (headingLevel + 2) ~ ">" %}
     {% set audioDescriptionId = "chart-audio-description-" ~ params.id %}
+    {% set instructionsId = "chart-instructions-" ~ params.id %}
+    {% set instructions = params.instructions | default('Use the Tab key to move focus into the chart. Once inside, use the arrow keys to navigate between data points. As you move, tooltips will be announced to describe each point. Touch device users, explore by touch or with swipe gestures.') %}
+
     <div
         {% if not params.iframeUrl %}
             data-highcharts-base-chart data-highcharts-type="{{ params.chartType }}" data-highcharts-theme="{{ params.theme }}"
@@ -60,7 +63,7 @@
 
             {% if params.iframeUrl %}
                 <div
-                    class="ons-chart__iframe-wrapper{% if params.fallbackImageUrl %} ons-chart__non-js-hide{% endif %}"
+                    class="ons-chart__iframe-wrapper{{ ' ons-chart__non-js-hide' if params.fallbackImageUrl else '' }}"
                     id="{{ params.id }}"
                     data-url="{{ params.iframeUrl }}"
                     data-title="{{ params.title }}"
@@ -85,7 +88,17 @@
                     </div>
                 {% endif %}
                 {% if params.chartType in supportedChartTypes %}
-                    <div data-highcharts-chart class="ons-chart__chart"></div>
+                    <div
+                        data-highcharts-chart-container
+                        class="ons-chart__container"
+                        tabindex="0"
+                        role="region"
+                        aria-label="chart container"
+                        aria-describedby="{{ instructionsId }}"
+                    >
+                        <div id="{{ instructionsId }}" class="ons-u-vh">{{ instructions }}</div>
+                        <div data-highcharts-chart class="ons-chart__chart"></div>
+                    </div>
                 {% else %}
                     <p data-invalid-chart-type data-unsupported-chart-text>
                         <b>{{ '"' + params.chartType + '" - ' + (params.unsupportedChartText or 'chart type is not supported') }}</b>

package/components/chart/_macro.spec.js

@@ -63,6 +63,36 @@ describe('Macro: Chart', () => {
                     expect($('figcaption').length).toBe(0);
                     expect($('.ons-chart__download-title').length).toBe(0);
                 });
+
+                test('THEN: it renders the chart container with the correct aria attributes', () => {
+                    expect($('.ons-chart__container').attr('aria-label')).toBe('chart container');
+                });
+            });
+        });
+
+        describe('GIVEN: Params: Instructions', () => {
+            describe('WHEN: instructions is provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_LINE_CHART_REQUIRED_PARAMS,
+                        instructions: 'Some custom instructions for the chart.',
+                    }),
+                );
+
+                test('THEN: it renders the chart with the correct instructions text', () => {
+                    const expectedText = 'Some custom instructions for the chart.';
+                    expect($('#chart-instructions-chart-123').text().trim()).toBe(expectedText);
+                });
+            });
+
+            describe('WHEN: instructions is not provided', () => {
+                const $ = cheerio.load(renderComponent('chart', EXAMPLE_LINE_CHART_REQUIRED_PARAMS));
+
+                test('THEN: it renders the chart with the default instructions text', () => {
+                    const expectedText =
+                        'Use the Tab key to move focus into the chart. Once inside, use the arrow keys to navigate between data points. As you move, tooltips will be announced to describe each point. Touch device users, explore by touch or with swipe gestures.';
+                    expect($('#chart-instructions-chart-123').text().trim()).toBe(expectedText);
+                });
             });
         });
 
@@ -288,7 +318,7 @@ describe('Macro: Chart', () => {
                 );
 
                 test('THEN: it renders the description for accessibility', () => {
-                    expect($('.ons-u-vh').text()).toBe('An accessible description for screen readers.');
+                    expect($('#chart-audio-description-chart-123').text()).toBe('An accessible description for screen readers.');
                 });
             });
         });
@@ -465,7 +495,7 @@ describe('Macro: Chart', () => {
                 );
 
                 test('THEN: it renders the description for accessibility', () => {
-                    expect($('.ons-u-vh').text()).toBe('An accessible description for screen readers.');
+                    expect($('#chart-audio-description-bar-chart-123').text()).toBe('An accessible description for screen readers.');
                 });
             });
         });
@@ -612,7 +642,7 @@ describe('Macro: Chart', () => {
                 );
 
                 test('THEN: it renders the description for accessibility', () => {
-                    expect($('.ons-u-vh').text()).toBe('An accessible description for screen readers.');
+                    expect($('#chart-audio-description-column-chart-123').text()).toBe('An accessible description for screen readers.');
                 });
             });
         });
@@ -837,7 +867,7 @@ describe('Macro: Chart', () => {
                 );
 
                 test('THEN: it renders the description for accessibility', () => {
-                    expect($('.ons-u-vh').text()).toBe('An accessible description for screen readers.');
+                    expect($('#chart-audio-description-column-chart-123').text()).toBe('An accessible description for screen readers.');
                 });
             });
         });
@@ -993,7 +1023,7 @@ describe('Macro: Chart', () => {
                 );
 
                 test('THEN: it renders the description for accessibility', () => {
-                    expect($('.ons-u-vh').text()).toBe('An accessible description for screen readers.');
+                    expect($('#chart-audio-description-area-chart-123').text()).toBe('An accessible description for screen readers.');
                 });
             });
         });
@@ -1050,7 +1080,7 @@ describe('Macro: Chart', () => {
         describe('GIVEN: Params: required', () => {
             describe('WHEN: required params are provided', () => {
                 const $ = cheerio.load(renderComponent('chart', EXAMPLE_BOXPLOT_CHART_PARAMS));
-                const configScript = $(`script[data-highcharts-config--uuid]`).html();
+                const configScript = $(`script[data-highcharts-config--boxplot-chart-123]`).html();
 
                 test('THEN: it passes jest-axe checks', async () => {
                     const results = await axe($.html());
@@ -1066,7 +1096,7 @@ describe('Macro: Chart', () => {
                     expect(chartContainer.attr('data-highcharts-type')).toBe('boxplot');
                     expect(chartContainer.attr('data-highcharts-theme')).toBe('primary');
                     expect(chartContainer.attr('data-highcharts-title')).toBe('Example Boxplot Chart');
-                    expect(chartContainer.attr('data-highcharts-id')).toBe('uuid');
+                    expect(chartContainer.attr('data-highcharts-id')).toBe('boxplot-chart-123');
                 });
 
                 test('THEN: it includes the Highcharts JSON config', () => {
@@ -1170,7 +1200,7 @@ describe('Macro: Chart', () => {
                 );
 
                 test('THEN: it renders the description for accessibility', () => {
-                    expect($('.ons-u-vh').text()).toBe(accessibleDescription);
+                    expect($('#chart-audio-description-boxplot-chart-123').text()).toBe(accessibleDescription);
                 });
             });
         });
@@ -1202,7 +1232,7 @@ describe('Macro: Chart', () => {
         describe('GIVEN: Params: Required', () => {
             describe('WHEN: required params are provided', () => {
                 const $ = cheerio.load(renderComponent('chart', EXAMPLE_COLUMN_RANGE_CHART_PARAMS));
-                const configScript = $(`script[data-highcharts-config--uuid]`).html();
+                const configScript = $(`script[data-highcharts-config--column-range-chart-123]`).html();
 
                 test('THEN: it passes jest-axe accessibility checks', async () => {
                     const results = await axe($.html());
@@ -1216,7 +1246,7 @@ describe('Macro: Chart', () => {
                     expect(baseChart.attr('data-highcharts-title')).toBe(
                         'Food stores showed a strong rise on the month, while non-food stores fell',
                     );
-                    expect(baseChart.attr('data-highcharts-id')).toBe('uuid');
+                    expect(baseChart.attr('data-highcharts-id')).toBe('column-range-chart-123');
                 });
 
                 test('THEN: it includes columnrange and scatter series types', () => {
@@ -1254,7 +1284,7 @@ describe('Macro: Chart', () => {
                 });
 
                 test('THEN: it still renders the description', () => {
-                    expect($('.ons-u-vh').text()).toBe('A detailed description');
+                    expect($('#chart-audio-description-invalid-chart-123').text()).toBe('A detailed description');
                 });
 
                 test('THEN: it still renders the caption', () => {

package/components/chart/bar-chart.js

@@ -47,7 +47,14 @@ class BarChart {
                 tickWidth: 0,
                 tickLength: 0,
                 tickColor: 'transparent',
-                title: { align: 'high', textAlign: 'middle', reserveSpace: false, rotation: 0, y: -25, useHTML: true },
+                title: {
+                    text: '', // Set to an empty string to hide the x-axis title for bar charts
+                    textAlign: 'middle',
+                    reserveSpace: false,
+                    rotation: 0,
+                    y: -25,
+                    useHTML: true,
+                },
             },
             yAxis: {
                 labels: {

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

@@ -57,6 +57,15 @@ class CommonChartOptions {
             },
             accessibility: {
                 enabled: true,
+                keyboardNavigation: {
+                    focusBorder: {
+                        enabled: false,
+                    },
+                    enabled: true,
+                    seriesNavigation: {
+                        mode: 'serialize',
+                    },
+                },
             },
             yAxis: {
                 labels: {

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

@@ -38,7 +38,6 @@
                 "Non-store retailing",
                 "Automotive fuel"
             ],
-            "title": "Retailing",
             "type": "linear"
         },
         "yAxis": {

package/components/chart/example-bar-chart-with-point-range-and-reference-line-annotations.njk

@@ -54,8 +54,8 @@
             {
                 "text": "A test point annotation",
                 "point": {"x": 2, "y": 3},
-                "labelOffsetX": 40,
-                "labelOffsetY": -30
+                "labelOffsetX": 50,
+                "labelOffsetY": 60
             }
         ],
         "rangeAnnotations": [
@@ -71,7 +71,7 @@
                 "range": {"axisValue1": 5, "axisValue2": 6},
                 "axis": "y",
                 "labelOffsetX": -80,
-                "labelOffsetY": 220,
+                "labelOffsetY": 230,
                 "labelWidth": 80
             }
         ],
@@ -88,7 +88,7 @@
                 "axis": "y",
                 "labelWidth": 100,
                 "labelOffsetX": 10,
-                "labelOffsetY": 140
+                "labelOffsetY": 170
             }
         ]
     })

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

@@ -42,7 +42,6 @@
                 "Non-store retailing",
                 "Automotive fuel"
             ],
-            "title": "Retailing",
             "type": "linear"
         },
         "yAxis": {

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

@@ -160,7 +160,7 @@ class RangeAnnotationsOptions {
             }
 
             // Create and add the connecting line
-            const line = document.createElement('div');
+            const line = document.createElement('tspan');
             line.classList.add('ons-chart__connector-line');
             line.setAttribute('data-range-annotation-line', true);
             labelElement.appendChild(line);

package/components/download-resources/download-resources.spec.js

@@ -432,11 +432,13 @@ describe('script: download-resources', () => {
     });
 
     describe('"Reset all filters" button', () => {
+        const { setTimeout } = require('node:timers/promises');
         beforeEach(async () => {
             await setTestPage('/test', RENDERED_EXAMPLE_PAGE);
             await page.click('#general-public');
             await page.click('#logo');
             await page.click('.ons-js-adv-filter__reset');
+            await setTimeout(50);
         });
 
         it('resets state of all filter checkboxes ', async () => {