@ons/design-system 72.10.7 → 72.10.8

package/components/chart/_chart.scss

@@ -110,6 +110,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

package/components/chart/_macro.njk

@@ -14,6 +14,7 @@
     {% set closingSubtitleTag = "</h" ~ (headingLevel + 1) ~ ">" %}
     {% set openingDownloadTitleTag = "<h" ~ (headingLevel + 2) %}
     {% set closingDownloadTitleTag = "</h" ~ (headingLevel + 2) ~ ">" %}
+    {% set audioDescriptionId = "chart-audio-description-" ~ params.id %}
     <div
         {% if not params.iframeUrl %}
             data-highcharts-base-chart data-highcharts-type="{{ params.chartType }}" data-highcharts-theme="{{ params.theme }}"
@@ -48,18 +49,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{% if params.fallbackImageUrl %} ons-chart__non-js-hide{% endif %}"
+                    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 %}
@@ -86,6 +92,18 @@
                     </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

@@ -193,6 +193,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(
@@ -1489,11 +1535,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 +1694,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');
+                });
+            });
         });
     });
 });

package/components/chart/bar-chart.js

@@ -71,6 +71,7 @@ class BarChart {
     };
 
     // Updates the config to move the data labels inside the bars, but only if the bar is wide enough
+    // See the checkHideDataLabels function in chart.js for more details about when this function is run
     // This also runs when the chart is resized
     postLoadDataLabels = (currentChart) => {
         const insideOptions = this.getBarChartLabelsInsideOptions();

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

@@ -2,7 +2,7 @@ import pym from 'pym.js';
 
 class ChartIframeResize {
     static selector() {
-        return '[data-chart-iframe]';
+        return '.ons-chart__iframe-wrapper';
     }
 
     constructor(node) {

package/components/chart/chart.dom.js

@@ -1,8 +1,10 @@
 import HighchartsBaseChart from './chart';
 import domready from '../../js/domready';
 
-domready(async () => {
-    [HighchartsBaseChart].forEach((Component) => {
-        document.querySelectorAll(Component.selector()).forEach((el) => new Component(el));
+document.fonts.ready.then(() => {
+    domready(async () => {
+        [HighchartsBaseChart].forEach((Component) => {
+            document.querySelectorAll(Component.selector()).forEach((el) => new Component(el));
+        });
     });
 });

package/components/chart/chart.js

@@ -192,9 +192,15 @@ class HighchartsBaseChart {
     };
 
     // Check if the data labels should be hidden
-    // They should be hidden for clustered bar charts with more than 2 series, and also for stacked bar charts
+    // They should be hidden where there are more than 20 data points in a series, for clustered bar charts with more than 2 series, and also for stacked bar charts
     checkHideDataLabels = () => {
-        return (this.chartType === 'bar' && this.config.series.length > 2) || this.useStackedLayout === true;
+        let hideDataLabels = (this.chartType === 'bar' && this.config.series.length > 2) || this.useStackedLayout === true;
+        this.config.series.forEach((series) => {
+            if (series.data.length > 20) {
+                hideDataLabels = true;
+            }
+        });
+        return hideDataLabels;
     };
 
     // Adjust font size and annotations for smaller width of chart

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

@@ -63,6 +63,7 @@
             "title": "Y axis title"
         },
         "percentageHeightDesktop": 50,
-        "percentageHeightMobile": 120
+        "percentageHeightMobile": 120,
+        "fallbackImageUrl": '/img/small/area-chart-screenshot.png'
     })
 }}

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

@@ -27,6 +27,7 @@ may not be available in the future once Florence is decommissioned. #}
                 }
             ]
         },
-        "iframeUrl": "https://www.ons.gov.uk/visualisations/dvc3294/fig01/index.html"
+        "iframeUrl": "https://www.ons.gov.uk/visualisations/dvc3294/fig01/index.html",
+        "fallbackImageUrl": "/img/small/line-chart-screenshot.png"
     })
 }}

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

@@ -222,6 +222,7 @@
             }
         ],
         "percentageHeightDesktop": 35,
-        "percentageHeightMobile": 90
+        "percentageHeightMobile": 90,
+        "fallbackImageUrl": '/img/small/line-chart-screenshot.png'
     })
 }}

package/components/tabs/tabs.js

@@ -134,7 +134,7 @@ export default class Tabs {
         window.removeEventListener('hashchange', this.component.boundOnHashChange, true);
     }
 
-    // Handle haschange so that the browser can cycle through the tab history
+    // Handle hashchange so that the browser can cycle through the tab history
     onHashChange() {
         const hash = window.location.hash;
         const tabWithHash = this.getTab(hash);
@@ -259,7 +259,7 @@ export default class Tabs {
     }
 
     getPanel(tab) {
-        const panelSelector = this.getHref(tab).replace(/\./g, '\\.');
+        const panelSelector = this.getHref(tab).replace(/([ .:[\]{}()<>?+*~=|^$!\\])/g, '\\$1');
         const panel = this.component.querySelector(panelSelector);
         return panel;
     }