@ons/design-system 74.0.0-next.1 → 74.0.0-next.10

package/README.md

@@ -143,11 +143,23 @@ Checkout the branch locally and run:
 
 `yarn test-visual` - This will run the same tests locally as were run in Github Actions. After they have completed the report will open in your default browser.
 
+`VR_SHARD_INDEX=0 VR_SHARD_COUNT=4 yarn test-visual` - This runs only one shard of the visual tests locally. Useful when one shard fails in CI.
+
+### Handling VR test failures
+
+If the VR tests fail locally, you'll see an error starting with `Error: docker run --rm -i --add-host=host.docker.internal:host-gateway...`
+
+`npx http-server backstop_data -p 8008 -o /html_report/` - View the report in your browser.
+
+### Approving VR test reference image changes
+
 `yarn test-visual:approve` - This will approve the failures/diff caught by the tests.
 
-`git lfs push --all origin` - First commit the files in the normal way then run the command. This will push the new reference images to Git LFS.
+Commit and approve the file changes in the normal way.
+
+`git lfs push --all origin` - This will push the new reference images to Git LFS.
 
-You can then commit and push the updated references and your changes to your branch. The test images that would have been created when you ran `yarn test-visual` are gitignored and the new references images will be pushed to Git LFS.
+You can then push the updated references and your changes to your branch. The test images that would have been created when you ran `yarn test-visual` are gitignored and the new references images will be pushed to Git LFS.
 
 If your local tests are failing but you have approved them, run `yarn test-visual:reference`. This will update the reference images locally on your machine.
 
@@ -176,7 +188,7 @@ yarn add @ons/design-system@next
 
 ### Publishing the stable major
 
-1. Merge `next` into `main`.
+1. Merge `next` into `main`. **Do not squash; use a regular merge commit to preserve history.**
 2. Create a normal release tag, for example: `74.0.0`.
 3. Publish the GitHub Release (not marked as a pre-release).
 

package/components/access-code/example-access-code-error.njk

@@ -14,7 +14,7 @@ layout: ~
     }
 %}
 
-{% block main %}
+{% block mainContent %}
     {%
         call onsPanel({
             "title": "There is a problem with this page",

package/components/access-code/example-access-code.njk

@@ -16,7 +16,7 @@ layout: ~
     }
 %}
 
-{% block main %}
+{% block mainContent %}
     <h1 class="ons-u-mt-2xl">Start study</h1>
 
     {{

package/components/address-input/autosuggest.address.spec.js

@@ -411,6 +411,29 @@ describe('script: address-input', () => {
                     });
                 });
             });
+
+            describe('when a grouped suggestion is selected with the mouse', () => {
+                beforeEach(async () => {
+                    const options = await page.$$('.ons-autosuggest__option');
+                    await options[0].click();
+                    await setTimeout(400);
+                });
+
+                it('makes expected bucket request', async () => {
+                    expect(
+                        await apiFaker.getRequestCount(
+                            '/addresses/eq/bucket?postcode=CF14%202AA&streetname=Penlline%20Road&townname=Whitchurch&groupfullpostcodes=combo',
+                        ),
+                    ).toBe(1);
+                });
+
+                it('keeps nested suggestion entries after blur timeout', async () => {
+                    const suggestions = await page.$$eval('.ons-autosuggest__option', (nodes) =>
+                        nodes.map((node) => node.textContent.trim()),
+                    );
+                    expect(suggestions).toEqual(['197 College Road, Whitchurch, Cardiff, CF14 2AB']);
+                });
+            });
         });
 
         describe('when there is an error retrieving the address', () => {

package/components/autosuggest/autosuggest.ui.js

@@ -201,6 +201,8 @@ export default class AutosuggestUI {
     }
 
     handleFocus() {
+        this.blurring = false;
+
         if (this.allowMultiple === 'true' && this.allSelections.length && this.input.value.slice(-1) !== ' ' && this.input.value !== '') {
             this.input.value = `${this.input.value}, `;
         }
@@ -513,6 +515,7 @@ export default class AutosuggestUI {
 
     selectResult(index) {
         if (this.results.length) {
+            clearTimeout(this.blurTimeout);
             this.settingResult = true;
             const result = this.results[index || this.highlightedResultIndex || 0];
             const resultItem = result.item ?? result;

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

@@ -30,7 +30,7 @@ layout: ~
     }
 %}
 
-{% block main %}
+{% block mainContent %}
     <h1 class="ons-u-fs-2xl">
         <span class="ons-u-fs-m ons-u-db ons-u-mb-2xs ons-u-lighter">Press releases</span>
         <span class="ons-u-vh">: </span>

package/components/breadcrumbs/_breadcrumbs.scss

@@ -3,7 +3,7 @@ $breadcrumb-chevron-height: 0.65rem;
 .ons-breadcrumbs-wrapper {
     position: relative;
     z-index: 10;
-    margin-bottom: -2rem;
+    margin-bottom: -1rem;
     &--grey {
         background-color: var(--ons-color-banner-bg);
     }
@@ -14,9 +14,9 @@ $breadcrumb-chevron-height: 0.65rem;
 
     &--navy-blue {
         background-color: var(--ons-color-navy-blue-light);
-        margin-bottom: -1.75rem;
+        margin-bottom: -0.75rem;
         @include mq(l) {
-            margin-bottom: -3.25rem;
+            margin-bottom: -2.25rem;
         }
     }
 
@@ -48,15 +48,12 @@ $breadcrumb-chevron-height: 0.65rem;
     &--pale-blue {
         background-color: var(--ons-color-pale-blue);
     }
-    .ons-breadcrumbs {
-        padding: 1rem;
-    }
 }
 
 .ons-breadcrumbs {
     align-items: center;
     display: flex;
-    padding: 1rem 0;
+    padding: 1rem 0 0;
 
     &__items {
         margin: 0;

package/components/breadcrumbs/_macro.njk

@@ -1,33 +1,37 @@
 {% from "components/icon/_macro.njk" import onsIcon %}
 {% macro onsBreadcrumbs(params) %}
     {% 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 %}
+        <div
+            class="ons-container{{ ' ons-container--full-width' if params.fullWidth else "" }}{{ ' ons-container--wide' if params.wide else "" }}"
         >
-            <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
+            <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 }}"
                         >
-                        {{-
-                            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>
+        </div>
     {% endset %}
     {% if params.variant %}
         <div class="ons-breadcrumbs-wrapper ons-breadcrumbs-wrapper--{{ params.variant }}">{{ breadcrumbs | safe }}</div>

package/components/breadcrumbs/_macro.spec.js

@@ -133,6 +133,45 @@ describe('FOR: Macro: Breadcrumbs', () => {
         });
     });
 
+    describe('GIVEN: Params: fullWidth', () => {
+        describe('WHEN: fullWidth is not provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS));
+            test('THEN: renders container without full-width class', () => {
+                expect($('.ons-container').hasClass('ons-container--full-width')).toBe(false);
+            });
+        });
+        describe('WHEN: fullWidth is set to true', () => {
+            const $ = cheerio.load(
+                renderComponent('breadcrumbs', {
+                    ...EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS,
+                    fullWidth: true,
+                }),
+            );
+            test('THEN: renders container with full-width class', () => {
+                expect($('.ons-container').hasClass('ons-container--full-width')).toBe(true);
+            });
+        });
+    });
+    describe('GIVEN: Params: wide', () => {
+        describe('WHEN: wide is not provided', () => {
+            const $ = cheerio.load(renderComponent('breadcrumbs', EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS));
+            test('THEN: renders container without wide class', () => {
+                expect($('.ons-container').hasClass('ons-container--wide')).toBe(false);
+            });
+        });
+        describe('WHEN: wide is set to true', () => {
+            const $ = cheerio.load(
+                renderComponent('breadcrumbs', {
+                    ...EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS,
+                    wide: true,
+                }),
+            );
+            test('THEN: renders container with wide class', () => {
+                expect($('.ons-container').hasClass('ons-container--wide')).toBe(true);
+            });
+        });
+    });
+
     describe('GIVEN: Params: variant', () => {
         describe('WHEN: variant is provided', () => {
             const $ = cheerio.load(

package/components/breadcrumbs/example-breadcrumbs-wide.njk

@@ -0,0 +1,52 @@
+---
+title: 'Example: Breadcrumbs override wide'
+layout: ~
+---
+
+{% from "components/hero/_macro.njk" import onsHero %}
+{% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}
+{% extends "layout/_template.njk" %}
+{%
+    set pageConfig = {
+        "header": {
+            "title": 'Service title',
+            "mastheadLogoUrl": '#0',
+            "titleUrl": '#0',
+            "serviceLinks": {
+                "id": "service-links-internal",
+                "ariaLabel": 'Services menu',
+                "ariaListLabel": 'Menu',
+                "toggleServicesButton": {
+                    "text": 'Account',
+                    "ariaLabel": 'Toggle services menu'
+                },
+                "itemsList": [
+                    {
+                        "text": "Jacky Turner",
+                        "iconType": 'person'
+                    },
+                    {
+                        "text": "Sign out",
+                        "url": "#0"
+                    }
+                ]
+            }
+        },
+        "wide": true
+    }
+%}
+
+{% block breadcrumbs %}
+    {{
+        onsBreadcrumbs({
+            "wide": true,
+            "ariaLabel": 'Breadcrumbs',
+            "itemsList": [
+                {
+                    "url": '/',
+                    "text": 'Home'
+                }
+            ]
+        })
+    }}
+{% endblock %}

package/components/chart/_chart.scss

@@ -29,15 +29,6 @@
         outline-offset: 2px;
     }
 
-    &__download-title {
-        @extend .ons-u-pt-l;
-        @extend .ons-u-fs-r--b;
-    }
-
-    &__caption {
-        color: var(--ons-color-grey-75);
-    }
-
     &__annotations-footnotes-number {
         // !important is necessary for some range annotation labels at mobile, otherwise
         // the inline-styled block display takes precedence. This inline style is only

package/components/chart/_macro.njk

@@ -1,21 +1,11 @@
-{% from "components/list/_macro.njk" import onsList %}
-{% from "components/details/_macro.njk" import onsDetails %}
-
 {% macro onsChart(params) %}
+    {% from "components/figure/_macro.njk" import onsFigure %}
     {% set supportedChartTypes = ['line', 'bar', 'column', 'scatter', 'area', 'columnrange', 'boxplot'] %}
     {% set supportedChartTypesWithLine = ['column'] %}
     {% set supportedChartTypesWithScatter = ['columnrange'] %}
     {% set supportedChartTypesWithXAxisMinAndMax = ['scatter'] %}
     {% set supportedChartTypesWithYAxisMinAndMax = ['line', 'bar', 'column', 'scatter', 'area', 'columnrange', 'boxplot'] %}
     {% set supportedAspectRatios = ['16-9', '4-3', '21-9', '1-1', '3-2', '9-16'] %}
-    {% set headingLevel = params.headingLevel | default(2) %}
-    {% set openingTitleTag = "<h" ~ headingLevel %}
-    {% set closingTitleTag = "</h" ~ headingLevel ~ ">" %}
-    {% set openingSubtitleTag = "<h" ~  (headingLevel + 1) %}
-    {% 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 iframeAspectRatio = params.iframeAspectRatio if params.iframeAspectRatio in supportedAspectRatios else '16-9' %}
     {% 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.') %}
@@ -54,132 +44,110 @@
             {% endif %}
         {% endif %}
     >
-        <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 %}
-
-            <p class="ons-u-vh" id="{{ audioDescriptionId }}">{{ params.description }}</p>
-
-            {% if params.iframeUrl %}
-                <div
-                    class="ons-chart__iframe-wrapper{{ ' ons-chart__non-js-hide' if params.fallbackImageUrl else '' }}"
-                    id="{{ params.id }}"
-                >
-                    <iframe
-                        src="{{ params.iframeUrl }}"
-                        title="{{ params.title }}"
-                        class="ons-chart__iframe ons-chart__iframe--{{ iframeAspectRatio }}"
-                        frameborder="0"
-                        scrolling="no"
-                    ></iframe>
-                </div>
-            {% else %}
-                {% if params.chartType == 'boxplot' and (params.estimateLineLabel or params.uncertaintyRangeLabel) and params.legend == true %}
-                    <div class="ons-chart__boxplot-legend">
-                        {% if params.uncertaintyRangeLabel %}
-                            <div class="ons-chart__boxplot-legend-item">
-                                <span class="ons-chart__boxplot-legend-item ons-chart__boxplot-legend-item--uncertainty"></span>
-                                <span class="ons-chart__boxplot-legend-label">{{ params.uncertaintyRangeLabel }}</span>
-                            </div>
-                        {% endif %}
-                        {% if params.estimateLineLabel %}
-                            <div class="ons-chart__boxplot-legend-item">
-                                <span class="ons-chart__boxplot-legend-item ons-chart__boxplot-legend-item--estimate"></span>
-                                <span class="ons-chart__boxplot-legend-label">{{ params.estimateLineLabel }}</span>
-                            </div>
-                        {% endif %}
-                    </div>
-                {% endif %}
-                {% if params.chartType in supportedChartTypes %}
+        {%
+            call onsFigure({
+                "id": params.id,
+                "headingLevel": params.headingLevel,
+                "figureNumber": params.figureNumber,
+                "title": params.title,
+                "subtitle": params.subtitle,
+                "audioDescription": params.description,
+                "caption": params.caption,
+                "footnotes": params.footnotes,
+                "download": params.download
+            })
+        %}
+            <div class="ons-chart">
+                {% if params.iframeUrl %}
                     <div
-                        data-highcharts-chart-container
-                        class="ons-chart__container"
-                        tabindex="0"
-                        role="region"
-                        aria-label="chart container"
-                        aria-describedby="{{ instructionsId }}"
+                        class="ons-chart__iframe-wrapper{{ ' ons-chart__non-js-hide' if params.fallbackImageUrl else '' }}"
+                        id="iframe--{{ params.id }}"
                     >
-                        <div id="{{ instructionsId }}" class="ons-u-vh">{{ instructions }}</div>
-                        <div data-highcharts-chart class="ons-chart__chart"></div>
+                        <iframe
+                            src="{{ params.iframeUrl }}"
+                            title="{{ params.title }}"
+                            class="ons-chart__iframe ons-chart__iframe--{{ iframeAspectRatio }}"
+                            frameborder="0"
+                            scrolling="no"
+                        ></iframe>
                     </div>
                 {% else %}
-                    <p data-invalid-chart-type data-unsupported-chart-text>
-                        <b>{{ '"' + params.chartType + '" - ' + (params.unsupportedChartText or 'chart type is not supported') }}</b>
-                    </p>
+                    {% if params.chartType == 'boxplot' and (params.estimateLineLabel or params.uncertaintyRangeLabel) and params.legend == true %}
+                        <div class="ons-chart__boxplot-legend">
+                            {% if params.uncertaintyRangeLabel %}
+                                <div class="ons-chart__boxplot-legend-item">
+                                    <span class="ons-chart__boxplot-legend-item ons-chart__boxplot-legend-item--uncertainty"></span>
+                                    <span class="ons-chart__boxplot-legend-label">{{ params.uncertaintyRangeLabel }}</span>
+                                </div>
+                            {% endif %}
+                            {% if params.estimateLineLabel %}
+                                <div class="ons-chart__boxplot-legend-item">
+                                    <span class="ons-chart__boxplot-legend-item ons-chart__boxplot-legend-item--estimate"></span>
+                                    <span class="ons-chart__boxplot-legend-label">{{ params.estimateLineLabel }}</span>
+                                </div>
+                            {% endif %}
+                        </div>
+                    {% endif %}
+                    {% if params.chartType in supportedChartTypes %}
+                        <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 %}
-            {% 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 %}
-            {#
+                {% 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 figure's audio description #}
+                        <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
             #}
-            {% if (params.annotations or params.rangeAnnotations or params.referenceLineAnnotations) and not params.iframeUrl %}
-                <ul class="ons-chart__annotations-footnotes" aria-hidden="true" data-annotations-footnotes>
-                    {% for annotation in params.annotations %}
-                        <li class="ons-chart__annotations-footnotes_item">
-                            <span class="ons-chart__annotations-footnotes-number">{{ loop.index }}</span>
-                            {{ annotation.text }}
-                        </li>
-                    {% endfor %}
-                    {% for rangeAnnotation in params.rangeAnnotations %}
-                        <li class="ons-chart__annotations-footnotes_item">
-                            <span class="ons-chart__annotations-footnotes-number">{{ loop.index + params.annotations | length }}</span>
-                            {{ rangeAnnotation.text }}
-                        </li>
-                    {% endfor %}
-                    {% for referenceLineAnnotation in params.referenceLineAnnotations %}
-                        <li class="ons-chart__annotations-footnotes_item">
-                            <span class="ons-chart__annotations-footnotes-number"
-                                >{{ loop.index + params.annotations | length + params.rangeAnnotations | length }}</span
-                            >
-                            {{ referenceLineAnnotation.text }}
-                        </li>
-                    {% endfor %}
-                </ul>
-            {% endif %}
-            {% if params.caption %}
-                <figcaption class="ons-chart__caption">{{ params.caption }}</figcaption>
-            {% endif %}
-        </figure>
-
-        {% if params.download.title and params.download.itemsList | length > 0 %}
-            {{ openingDownloadTitleTag | safe }}
-            class="ons-chart__download-title">{{ params.download.title }}{{ closingDownloadTitleTag | safe }}
-            {{
-                onsList({
-                    "element": "ol",
-                    "itemsList": params.download.itemsList
-                })
-            }}
-        {% endif %}
-
-        {% if params.footnotes %}
-            {% set footnotesId = ["footnotes--", params.id] | join %}
-
-            {{
-                onsDetails({
-                    "id": footnotesId,
-                    "title": params.footnotes.title,
-                    "content": params.footnotes.content,
-                    "headingLevel": headingLevel + 2,
-                    "classes": "ons-u-mt-xl"
-                })
-            }}
-        {% endif %}
+                {% if (params.annotations or params.rangeAnnotations or params.referenceLineAnnotations) and not params.iframeUrl %}
+                    <ul class="ons-chart__annotations-footnotes" aria-hidden="true" data-annotations-footnotes>
+                        {% for annotation in params.annotations %}
+                            <li class="ons-chart__annotations-footnotes_item">
+                                <span class="ons-chart__annotations-footnotes-number">{{ loop.index }}</span>
+                                {{ annotation.text }}
+                            </li>
+                        {% endfor %}
+                        {% for rangeAnnotation in params.rangeAnnotations %}
+                            <li class="ons-chart__annotations-footnotes_item">
+                                <span class="ons-chart__annotations-footnotes-number">{{ loop.index + params.annotations | length }}</span>
+                                {{ rangeAnnotation.text }}
+                            </li>
+                        {% endfor %}
+                        {% for referenceLineAnnotation in params.referenceLineAnnotations %}
+                            <li class="ons-chart__annotations-footnotes_item">
+                                <span class="ons-chart__annotations-footnotes-number"
+                                    >{{ loop.index + params.annotations | length + params.rangeAnnotations | length }}</span
+                                >
+                                {{ referenceLineAnnotation.text }}
+                            </li>
+                        {% endfor %}
+                    </ul>
+                {% endif %}
+            </div>
+        {% endcall %}
 
         {% if (params.chartType in supportedChartTypes) and not params.iframeUrl %}
             {% set series = [] %}