@ons/design-system 72.10.7 → 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;
@@ -110,6 +132,12 @@
             aspect-ratio: 16 / 9;
         }
     }
+
+    &__non-js-hide {
+        @media (scripting: none) {
+            display: none;
+        }
+    }
 }
 
 // This is a workaround to position the axis title to the left
@@ -164,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

@@ -14,6 +14,10 @@
     {% set closingSubtitleTag = "</h" ~ (headingLevel + 1) ~ ">" %}
     {% 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 }}"
@@ -48,18 +52,23 @@
             {% endif %}
         {% endif %}
     >
-        <figure class="ons-chart">
+        <figure class="ons-chart" aria-describedby="{{ audioDescriptionId }}">
             {{ openingTitleTag | safe }} class="ons-chart__title">{{ params.title }}{{ closingTitleTag | safe }}
             {% if params.subtitle %}
                 {{ openingSubtitleTag | safe }}
                 class="ons-chart__subtitle">{{ params.subtitle }}{{ closingSubtitleTag | safe }}
             {% endif %}
-            {% if params.description %}
-                <p class="ons-u-vh">{{ params.description }}</p>
-            {% endif %}
+
+            <p class="ons-u-vh" id="{{ audioDescriptionId }}">{{ params.description }}</p>
+
             {% if params.iframeUrl %}
-                <div data-chart-iframe id="{{ params.id }}" data-url="{{ params.iframeUrl }}" data-title="{{ params.title }}">
-                    <iframe src="{{ params.iframeUrl }}" title="{{ params.title }}" class="ons-chart__iframe"> </iframe>
+                <div
+                    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 }}"
+                >
+                    <iframe src="{{ params.iframeUrl }}" title="{{ params.title }}" class="ons-chart__iframe"></iframe>
                 </div>
             {% else %}
                 {% if params.chartType == 'boxplot' and (params.estimateLineLabel or params.uncertaintyRangeLabel) and params.legend == true %}
@@ -79,13 +88,35 @@
                     </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>
                     </p>
                 {% endif %}
             {% endif %}
+
+            {% if params.fallbackImageUrl %}
+                {% set fallbackImageId = ["fallback-image--", params.id] | join %}
+                <noscript id="{{ fallbackImageId }}">
+                    {# Note that a more detailed description of the chart is provided in the audio description above #}
+                    <img
+                        src="{{ params.fallbackImageUrl }}"
+                        alt="{{ params.fallbackImageAlt or 'Fallback image for the chart as JavaScript is disabled' }}"
+                        class="ons-chart__fallback-image"
+                    />
+                </noscript>
+            {% endif %}
             {#
                 Footnotes for the annotations at mobile
                 Hidden from screen readers because the full text will be read out where they appear in the chart

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);
+                });
             });
         });
 
@@ -193,6 +223,52 @@ describe('Macro: Chart', () => {
             });
         });
 
+        describe('GIVEN: Params: fallbackImageUrl', () => {
+            describe('WHEN: fallbackImageUrl is provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_LINE_CHART_WITH_CONFIG_PARAMS,
+                        fallbackImageUrl: '/img/small/line-chart-screenshot.png',
+                    }),
+                );
+                const noScriptFallbackImage = $(`#fallback-image--chart-456`).html();
+                test('THEN: it renders the fallback image', () => {
+                    expect(noScriptFallbackImage).toContain('/img/small/line-chart-screenshot.png');
+                });
+            });
+        });
+
+        describe('GIVEN: Params: fallbackImageAlt', () => {
+            describe('WHEN: fallbackImageAlt is provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_LINE_CHART_WITH_CONFIG_PARAMS,
+                        fallbackImageUrl: '/img/small/line-chart-screenshot.png',
+                        fallbackImageAlt: 'A description of the fallback image for screen readers',
+                    }),
+                );
+                const noScriptFallbackImage = $(`#fallback-image--chart-456`).html();
+                test('THEN: it renders the customised fallback image alt text', () => {
+                    expect(noScriptFallbackImage).toContain('alt="A description of the fallback image for screen readers"');
+                });
+            });
+        });
+
+        describe('GIVEN: Params: no fallbackImageAlt', () => {
+            describe('WHEN: fallbackImageAlt is not provided', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_LINE_CHART_WITH_CONFIG_PARAMS,
+                        fallbackImageUrl: '/img/small/line-chart-screenshot.png',
+                    }),
+                );
+                const noScriptFallbackImage = $(`#fallback-image--chart-456`).html();
+                test('THEN: it renders the default fallback image alt text', () => {
+                    expect(noScriptFallbackImage).toContain('alt="Fallback image for the chart as JavaScript is disabled"');
+                });
+            });
+        });
+
         describe('GIVEN: Params: Caption', () => {
             describe('WHEN: caption is provided', () => {
                 const $ = cheerio.load(
@@ -242,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.');
                 });
             });
         });
@@ -419,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.');
                 });
             });
         });
@@ -566,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.');
                 });
             });
         });
@@ -791,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.');
                 });
             });
         });
@@ -947,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.');
                 });
             });
         });
@@ -1004,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());
@@ -1020,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', () => {
@@ -1124,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);
                 });
             });
         });
@@ -1156,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());
@@ -1170,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', () => {
@@ -1208,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', () => {
@@ -1489,11 +1565,11 @@ describe('Macro: Chart', () => {
                 });
 
                 test('THEN: it renders the iframe', () => {
-                    expect($('[data-chart-iframe]').length).toBe(1);
+                    expect($('.ons-chart__iframe-wrapper').length).toBe(1);
                 });
 
                 test('THEN: it includes the iframe title as a data attribute', () => {
-                    const iframe = $('[data-chart-iframe]');
+                    const iframe = $('.ons-chart__iframe-wrapper');
                     expect(iframe.attr('data-title')).toBe(EXAMPLE_IFRAME_CHART_PARAMS.title);
                 });
 
@@ -1648,6 +1724,19 @@ describe('Macro: Chart', () => {
                     expect($('[data-invalid-chart-type]').length).toBe(0);
                 });
             });
+
+            describe('WHEN: Params: fallbackImageUrl is set', () => {
+                const $ = cheerio.load(
+                    renderComponent('chart', {
+                        ...EXAMPLE_IFRAME_CHART_PARAMS,
+                        fallbackImageUrl: '/img/small/line-chart-screenshot.png',
+                    }),
+                );
+                const iframe = $(`.ons-chart__iframe-wrapper`);
+                test('THEN: the iframe is hidden when JavaScript is disabled', () => {
+                    expect(iframe.attr('class')).toContain('ons-chart__non-js-hide');
+                });
+            });
         });
     });
 });