@ons/design-system 62.2.3 → 63.0.0

package/components/pagination/_macro.spec.js

@@ -12,7 +12,8 @@ const PAGINATION_PREV_NEXT_LABELS = {
 
 const EXAMPLE_PAGINATION_MINIMAL = {
   ...PAGINATION_PREV_NEXT_LABELS,
-  pages: [{ url: '/page/1', current: true }],
+  currentPageNumber: 1,
+  pages: [{ url: '/page/1' }],
 };
 
 describe('macro: pagination', () => {
@@ -54,7 +55,8 @@ describe('macro: pagination', () => {
     const $ = cheerio.load(
       renderComponent('pagination', {
         ...PAGINATION_PREV_NEXT_LABELS,
-        pages: [{ url: '/page/1', current: true }],
+        currentPageNumber: 1,
+        pages: [{ url: '/page/1' }],
       }),
     );
 
@@ -85,7 +87,8 @@ describe('macro: pagination', () => {
     const $ = cheerio.load(
       renderComponent('pagination', {
         ...PAGINATION_PREV_NEXT_LABELS,
-        pages: [{ url: '/page/1', current: true }, { url: '/page/2' }],
+        currentPageNumber: 1,
+        pages: [{ url: '/page/1' }, { url: '/page/2' }],
       }),
     );
 
@@ -118,7 +121,8 @@ describe('macro: pagination', () => {
     const $ = cheerio.load(
       renderComponent('pagination', {
         ...PAGINATION_PREV_NEXT_LABELS,
-        pages: [{ url: '/page/1' }, { url: '/page/2', current: true }],
+        currentPageNumber: 2,
+        pages: [{ url: '/page/1' }, { url: '/page/2' }],
       }),
     );
 
@@ -151,7 +155,8 @@ describe('macro: pagination', () => {
     const $ = cheerio.load(
       renderComponent('pagination', {
         ...PAGINATION_PREV_NEXT_LABELS,
-        pages: [{ url: '/page/1' }, { url: '/page/2', current: true }, { url: '/page/3' }],
+        currentPageNumber: 2,
+        pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }],
       }),
     );
 
@@ -186,7 +191,8 @@ describe('macro: pagination', () => {
     const $ = cheerio.load(
       renderComponent('pagination', {
         ...PAGINATION_PREV_NEXT_LABELS,
-        pages: [{ url: '/page/1' }, { url: '/page/2', current: true }, { url: '/page/3' }, { url: '/page/4' }, { url: '/page/5' }],
+        currentPageNumber: 2,
+        pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }, { url: '/page/4' }, { url: '/page/5' }],
       }),
     );
 
@@ -223,14 +229,8 @@ describe('macro: pagination', () => {
     const $ = cheerio.load(
       renderComponent('pagination', {
         ...PAGINATION_PREV_NEXT_LABELS,
-        pages: [
-          { url: '/page/1' },
-          { url: '/page/2', current: true },
-          { url: '/page/3' },
-          { url: '/page/4' },
-          { url: '/page/5' },
-          { url: '/page/6' },
-        ],
+        currentPageNumber: 2,
+        pages: [{ url: '/page/1' }, { url: '/page/2' }, { url: '/page/3' }, { url: '/page/4' }, { url: '/page/5' }, { url: '/page/6' }],
       }),
     );
 
@@ -267,12 +267,13 @@ describe('macro: pagination', () => {
     const $ = cheerio.load(
       renderComponent('pagination', {
         ...PAGINATION_PREV_NEXT_LABELS,
+        currentPageNumber: 5,
         pages: [
           { url: '/page/1' },
           { url: '/page/2' },
           { url: '/page/3' },
           { url: '/page/4' },
-          { url: '/page/5', current: true },
+          { url: '/page/5' },
           { url: '/page/6' },
           { url: '/page/7' },
           { url: '/page/8' },
@@ -318,6 +319,7 @@ describe('macro: pagination', () => {
     const $ = cheerio.load(
       renderComponent('pagination', {
         ...PAGINATION_PREV_NEXT_LABELS,
+        currentPageNumber: 10,
         pages: [
           { url: '/page/1' },
           { url: '/page/2' },
@@ -328,7 +330,7 @@ describe('macro: pagination', () => {
           { url: '/page/7' },
           { url: '/page/8' },
           { url: '/page/9' },
-          { url: '/page/10', current: true },
+          { url: '/page/10' },
           { url: '/page/11' },
         ],
       }),

package/components/pagination/example-pagination-first.njk

@@ -5,19 +5,19 @@
         "previous": "Previous",
         "next": "Next",
         "hideRangeIndicator": true,
+        "currentPageNumber": 1,
         "pages": [
             {
-                "url": "#page1",
-                "current": true
+                "url": "#0"
             },
             {
-                "url": "#page2"
+                "url": "#0"
             },
             {
-                "url": "#page3"
+                "url": "#0"
             },
             {
-                "url": "#page4"
+                "url": "#0"
             }
         ]
     })

package/components/pagination/example-pagination-last.njk

@@ -5,19 +5,19 @@
         "previous": "Previous",
         "next": "Next",
         "hideRangeIndicator": true,
+        "currentPageNumber": 4,
         "pages": [
             {
-                "url": "#page1"
+                "url": "#0"
             },
             {
-                "url": "#page2"
+                "url": "#0"
             },
             {
-                "url": "#page3"
+                "url": "#0"
             },
             {
-                "url": "#page4",
-                "current": true
+                "url": "#0"
             }
         ]
     })

package/components/pagination/example-pagination-with-no-range-indicator.njk

@@ -5,37 +5,37 @@
         "previous": "Previous",
         "next": "Next",
         "hideRangeIndicator": true,
+        "currentPageNumber": 5,
         "pages": [
             {
-                "url": "#page1"
+                "url": "#0"
             },
             {
-                "url": "#page2"
+                "url": "#0"
             },
             {
-                "url": "#page3"
+                "url": "#0"
             },
             {
-                "url": "#page4"
+                "url": "#0"
             },
             {
-                "url": "#page5",
-                "current": true
+                "url": "#0"
             },
             {
-                "url": "#page6"
+                "url": "#0"
             },
             {
-                "url": "#page7"
+                "url": "#0"
             },
             {
-                "url": "#page8"
+                "url": "#0"
             },
             {
-                "url": "#page9"
+                "url": "#0"
             },
             {
-                "url": "#page10"
+                "url": "#0"
             }
         ]
     })

package/components/pagination/example-pagination.njk

@@ -4,6 +4,7 @@
     onsPagination({
         "previous": "Previous",
         "next": "Next",
+        "currentPageNumber": 5,
         "pages": [
             {
                 "url": "#0"
@@ -18,8 +19,7 @@
                 "url": "#0"
             },
             {
-                "url": "#0",
-                "current": true
+                "url": "#0"
             },
             {
                 "url": "#0"

package/components/panel/_macro.njk

@@ -39,7 +39,7 @@
             {% endif %}
 
             {% if params.type == "announcement" %}
-                {% from "components/icons/_macro.njk" import onsIcon %}
+                {% from "components/icon/_macro.njk" import onsIcon %}
                 <span class="ons-panel__icon" aria-hidden="true">
                     {{
                         onsIcon({
@@ -70,7 +70,7 @@
             {% endif %}
 
             {% if params.iconType %}
-                {% from "components/icons/_macro.njk" import onsIcon %}
+                {% from "components/icon/_macro.njk" import onsIcon %}
                 <span class= "ons-panel__icon ons-u-fs-{{ params.iconSize | default('r') }}">
                     {{
                         onsIcon({

package/components/panel/_macro.spec.js

@@ -313,7 +313,7 @@ describe('macro: panel', () => {
 
     it('has `arrow-forward` icon', () => {
       const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
+      const iconsSpy = faker.spy('icon');
 
       faker.renderComponent('panel', {
         ...EXAMPLE_PANEL_BASIC,
@@ -385,7 +385,7 @@ describe('macro: panel', () => {
 
     it('has a custom icon `iconType`', () => {
       const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
+      const iconsSpy = faker.spy('icon');
 
       faker.renderComponent('panel', {
         ...EXAMPLE_PANEL_BASIC,

package/components/panel/example-panel-with-error-summary.njk

@@ -1,5 +1,5 @@
 {% from "components/panel/_macro.njk" import onsPanel %}
-{% from "components/lists/_macro.njk" import onsList %}
+{% from "components/list/_macro.njk" import onsList %}
 
 {% call onsPanel({
         "title": 'There are 2 problems with your answer',

package/components/phase-banner/_phase-banner.scss

@@ -1,5 +1,6 @@
 .ons-phase-banner {
-  background: var(--ons-color-grey-5);
+  background: var(--ons-color-white);
+  border-bottom: 1px solid var(--ons-color-borders);
   padding: 0.5rem 0;
 
   &__badge {

package/components/question/_macro.njk

@@ -52,7 +52,7 @@
                         {% if item.listLeadingLine %}
                             <p class="ons-question-guidance__list-leading-line">{{ item.listLeadingLine }}</p>
                         {% endif %}
-                        {% from "components/lists/_macro.njk" import onsList %}
+                        {% from "components/list/_macro.njk" import onsList %}
                         {{
                             onsList({
                                 "itemsList": item.itemsList

package/components/question/_macro.spec.js

@@ -239,7 +239,7 @@ describe('macro: question', () => {
 
     it('outputs the expected list', () => {
       const faker = templateFaker();
-      const listSpy = faker.spy('lists');
+      const listSpy = faker.spy('list');
 
       faker.renderComponent('question', EXAMPLE_QUESTION_GUIDANCE);
 

package/components/quote/_macro.njk

@@ -1,6 +1,6 @@
 {% macro onsQuote(params) %}
     <blockquote class="ons-quote">
-        {% from "components/icons/_macro.njk" import onsIcon %}
+        {% from "components/icon/_macro.njk" import onsIcon %}
         {{
             onsIcon({
                 "iconType": 'quote'

package/components/quote/_macro.spec.js

@@ -70,7 +70,7 @@ describe('macro: quote', () => {
 
   it('has `quote` icon', () => {
     const faker = templateFaker();
-    const iconsSpy = faker.spy('icons');
+    const iconsSpy = faker.spy('icon');
 
     faker.renderComponent('quote', {
       text: 'Example quote text.',

package/components/related-content/_macro.njk

@@ -15,7 +15,7 @@
           }
         ) %}            
           <nav class="ons-related-content__navigation" aria-labelledby="{{ row.id }}">
-            {% from "components/lists/_macro.njk" import onsList %}
+            {% from "components/list/_macro.njk" import onsList %}
             {{
               onsList({
                 "variants": 'bare',

package/components/related-content/_macro.spec.js

@@ -111,7 +111,7 @@ describe('macro: related-content', () => {
 
     it('renders the expected list items using the list macro', () => {
       const faker = templateFaker();
-      const listsSpy = faker.spy('lists');
+      const listsSpy = faker.spy('list');
 
       faker.renderComponent('related-content', EXAMPLE_RELATED_CONTENT_LINKS);
 

package/components/related-content/example-related-content-general.njk

@@ -1,6 +1,6 @@
 {% from "components/related-content/_macro.njk" import onsRelatedContent %}
 {% from "components/related-content/_section-macro.njk" import onsRelatedContentSection %}
-{% from "components/lists/_macro.njk" import onsList %}
+{% from "components/list/_macro.njk" import onsList %}
 
 {% call onsRelatedContent({
     "ariaLabel": 'Related content'

package/components/relationships/example-relationships-error.njk

@@ -6,7 +6,7 @@ layout: ~
 {% from "components/question/_macro.njk" import onsQuestion %}
 {% from "components/relationships/_macro.njk" import onsRelationships %}
 {% from "components/panel/_macro.njk" import onsPanel %}
-{% from "components/lists/_macro.njk" import onsList %}
+{% from "components/list/_macro.njk" import onsList %}
 
 {% set pageConfig = {
     "header": {

package/components/section-navigation/_macro.njk

@@ -6,7 +6,7 @@
           {% if section.title %}
             <h3 class="ons-u-fs-r--b ons-u-mb-s">{{ section.title }}</h3>{% endif %}
               <ul class="ons-section-nav__list">
-                {% for item in (section.itemsList if section.itemsList is iterable else section.itemsList.items()) %}
+                {% for item in section.itemsList %}
                   {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title|lower) %}
                     {% set isCurrent = true %}
                   {% else %}
@@ -33,7 +33,7 @@
           <h3 class="ons-u-fs-r--b ons-u-mb-s">{{ params.title }}</h3>
         {% endif %}
             <ul class="ons-section-nav__list">
-              {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) %}
+              {% for item in params.itemsList %}
                 {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title|lower) %}
                   {% set isCurrent = true %}
                 {% else %}

package/components/share-page/_macro.njk

@@ -1,5 +1,5 @@
 {% macro onsSharePage(params) %}
-    {% from "components/lists/_macro.njk" import onsList %}
+    {% from "components/list/_macro.njk" import onsList %}
 
     {% if params.title %}
         {% set titleTag = params.titleTag | default("h2") %}

package/components/share-page/_macro.spec.js

@@ -48,7 +48,7 @@ describe('macro: share-page', () => {
 
   it('uses the provided icon size', () => {
     const faker = templateFaker();
-    const listsSpy = faker.spy('lists');
+    const listsSpy = faker.spy('list');
 
     faker.renderComponent('share-page', {
       ...EXAMPLE_SHARE_PAGE,
@@ -61,7 +61,7 @@ describe('macro: share-page', () => {
   describe('Share on Twitter', () => {
     it('has a link with the expected url', () => {
       const faker = templateFaker();
-      const listsSpy = faker.spy('lists');
+      const listsSpy = faker.spy('list');
 
       faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
 
@@ -73,7 +73,7 @@ describe('macro: share-page', () => {
 
     it('has a link which opens in a new tab', () => {
       const faker = templateFaker();
-      const listsSpy = faker.spy('lists');
+      const listsSpy = faker.spy('list');
 
       faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
 
@@ -87,7 +87,7 @@ describe('macro: share-page', () => {
   describe('Share on Facebook', () => {
     it('has a link with the expected url', () => {
       const faker = templateFaker();
-      const listsSpy = faker.spy('lists');
+      const listsSpy = faker.spy('list');
 
       faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
 
@@ -97,7 +97,7 @@ describe('macro: share-page', () => {
 
     it('has a link which opens in a new tab', () => {
       const faker = templateFaker();
-      const listsSpy = faker.spy('lists');
+      const listsSpy = faker.spy('list');
 
       faker.renderComponent('share-page', EXAMPLE_SHARE_PAGE);
 

package/components/summary/_macro.njk

@@ -23,7 +23,7 @@
                     {% if group.rows %}
                         <div class="ons-summary__items">
 
-                            {% for row in (group.rows if group.rows is iterable else group.rows.items()) %}
+                            {% for row in group.rows %}
                                 {% set itemClass = "" %}
                                 {% if row.error %} {% set itemClass = " ons-summary__item--error" %}{% endif %}
                                 {% if row.total %} {% set itemClass = itemClass + " ons-summary__item--total" %}{% endif %}
@@ -42,7 +42,7 @@
                                                 {% if rowItem.rowTitleAttributes %}{% for attribute, value in (rowItem.rowTitleAttributes.items() if rowItem.rowTitleAttributes is mapping and rowItem.rowTitleAttributes.items else rowItem.rowTitleAttributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
                                             >
                                                 {% if rowItem.iconType %}
-                                                    {% from "components/icons/_macro.njk" import onsIcon %}
+                                                    {% from "components/icon/_macro.njk" import onsIcon %}
                                                     <span class="ons-summary__item-title-icon{% if rowItem.iconType == 'check' %} ons-summary__item-title-icon--check{% endif %}">
                                                         {{
                                                             onsIcon({
@@ -75,7 +75,7 @@
                                                         {% endif %}
                                                     {% else %}
                                                         <ul class="ons-u-mb-no">
-                                                            {% for value in (rowItem.valueList if rowItem.valueList is iterable else rowItem.valueList.items()) %}
+                                                            {% for value in rowItem.valueList %}
                                                                 <li>
                                                                     <span class="ons-summary__text">{{ value.text | safe }}</span>
                                                                     {% if value.other or value.other == 0 %}
@@ -91,7 +91,7 @@
                                             {% endif %}
                                             {% if rowItem.actions %}
                                                 <dd class="ons-summary__actions">
-                                                    {% for action in (rowItem.actions if rowItem.actions is iterable else rowItem.actions.items()) %}
+                                                    {% for action in rowItem.actions %}
                                                         {% if loop.index > 1 %}<span class="ons-summary__spacer"></span>{% endif %}
                                                         <a
                                                             href="{{ action.url }}"

package/components/summary/_macro.spec.js

@@ -409,7 +409,7 @@ describe('macro: summary', () => {
 
       it('has a custom icon `iconType`', () => {
         const faker = templateFaker();
-        const iconsSpy = faker.spy('icons');
+        const iconsSpy = faker.spy('icon');
 
         faker.renderComponent('summary', EXAMPLE_SUMMARY_BASIC);
 

package/components/summary/example-summary-grouped-total.njk

@@ -8,9 +8,9 @@
                         "groupTitle": "Summary - Section Title",
                         "rows": [
                             {
-                                "rowTitle": "Total value of acquisitions for transport assets and equipment",
                                 "rowItems": [
                                     {
+                                        "rowTitle": "Total value of acquisitions for transport assets and equipment",
                                         "valueList": [
                                             {
                                                 "text": "£9,000.00"
@@ -27,9 +27,9 @@
                                 ]
                             },
                             {
-                                "rowTitle": "Total value of acquisitions for computers and peripheral devices (hardware)",
                                 "rowItems": [
                                     {
+                                        "rowTitle": "Total value of acquisitions for computers and peripheral devices (hardware)",
                                         "valueList": [
                                             {
                                                 "text": "£225,000.00"
@@ -46,10 +46,10 @@
                                 ]
                             },
                             {
-                                "rowTitle": "Grand total for value of acquisitions",
                                 "total": true,
                                 "rowItems": [
                                     {
+                                        "rowTitle": "Grand total for value of acquisitions",
                                         "valueList": [
                                             {
                                                 "text": "£234,000.00"

package/components/table/_macro.njk

@@ -1,6 +1,6 @@
 {% macro onsTable(params) %}
     {% from "components/button/_macro.njk" import onsButton %}
-    {% from "components/icons/_macro.njk" import onsIcon %}
+    {% from "components/icon/_macro.njk" import onsIcon %}
 
     {% set variants = params.variants if params.variants else '' %}
 
@@ -32,9 +32,9 @@
                 </thead>
                 <tbody class="ons-table__body">
                     {% for tr in params.trs %}
-                    <tr class="ons-table__row{{ " ons-table__row--highlight" if tr.highlight }}" {% if tr.name %} name="{{ tr.name }}"{% endif %} {% if tr.id %} id="{{ tr.id }}"{% endif %}>
+                    <tr class="ons-table__row{{ " ons-table__row--highlight" if tr.highlight }}" {% if tr.id %} id="{{ tr.id }}"{% endif %}>
                         {% for td in tr.tds %}
-                        <td class="ons-table__cell{{ ' ' + td.tdClasses if td.tdClasses }}{{ " ons-table__cell--numeric" if td.numeric }}" {% if td.id %} id="{{ td.id }}"{% endif %} {% if td.name %} name="{{ td.name }}"{% endif %} {% if td.data %} data-th="{{ td.data }}"{% endif %} {% if td.dataSort %} data-sort-value="{{ td.dataSort }}"{% endif %}>
+                        <td class="ons-table__cell{{ ' ' + td.tdClasses if td.tdClasses }}{{ " ons-table__cell--numeric" if td.numeric }}" {% if td.id %} id="{{ td.id }}"{% endif %} {% if td.data %} data-th="{{ td.data }}"{% endif %} {% if td.dataSort %} data-sort-value="{{ td.dataSort }}"{% endif %}>
                             {% if td.form %}
                                 <form action="{{ td.form.action }}" method="{{ td.form.method | default('POST')}}">
                                     {{

package/components/table/_macro.spec.js

@@ -111,7 +111,7 @@ describe('macro: table', () => {
 
     it('does not render "sort-sprite" icon', () => {
       const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
+      const iconsSpy = faker.spy('icon');
 
       faker.renderComponent('table', EXAMPLE_TABLE);
 

package/components/table/example-table-basic.njk

@@ -18,8 +18,7 @@
             {
                 "tds": [
                     {
-                        "value": "Cell A1",
-                        "name": "cell-name"
+                        "value": "Cell A1"
                     },
                     {
                         "value": "Cell B1"

package/components/table-of-contents/_macro.njk

@@ -1,5 +1,5 @@
 {% macro onsTableOfContents(params) %}
-{% from "components/lists/_macro.njk" import onsList %}
+{% from "components/list/_macro.njk" import onsList %}
 {% from "components/skip-to-content/_macro.njk" import onsSkipToContent %}
 
 <aside class="ons-toc-container" role="complementary">

package/components/table-of-contents/_macro.spec.js

@@ -114,7 +114,7 @@ describe('macro: table-of-contents', () => {
 
     it('outputs `lists` component', () => {
       const faker = templateFaker();
-      const listsSpy = faker.spy('lists');
+      const listsSpy = faker.spy('list');
 
       faker.renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_SINGLE);
 
@@ -157,7 +157,7 @@ describe('macro: table-of-contents', () => {
 
     it('outputs `lists` component for each list', () => {
       const faker = templateFaker();
-      const listsSpy = faker.spy('lists');
+      const listsSpy = faker.spy('list');
 
       faker.renderComponent('table-of-contents', EXAMPLE_TABLE_OF_CONTENTS_MULTIPLE);
 

package/components/tabs/_macro.njk

@@ -15,12 +15,12 @@
 
         <ul class="ons-tabs__list">
             {%- for tab in params.tabs -%}
-                <li class="ons-tab__list-item"><a href="#{{ tab.id if tab.id else 'tabId' ~ loop.index }}" class="ons-tab" data-ga="click" data-ga-category="tabs" data-ga-action="Show: {{ tab.title }}" data-ga-label="Show: {{ tab.title }}">{{ tab.title }}</a></li>
+                <li class="ons-tab__list-item"><a href="#{{ tab.id if tab.id else tab.title|trim|replace(' ','-')|lower}}" class="ons-tab" data-ga="click" data-ga-category="tabs" data-ga-action="Show: {{ tab.title }}" data-ga-label="Show: {{ tab.title }}">{{ tab.title }}{% if tab.hiddenSpan %}<span class='ons-u-d-no'>{{tab.hiddenSpan}}</span>{% endif %}</a></li>
             {%- endfor -%}
         </ul>
 
         {% for tab in params.tabs %}
-            <section id="{{ tab.id if tab.id else 'tabId' ~ loop.index }}" class="ons-tabs__panel">
+            <section id="{{ tab.id if tab.id else tab.title|trim|replace(' ','-')|lower }}" class="ons-tabs__panel">
                 {{ tab.content | safe }}
             </section>
         {% endfor %}

package/components/tabs/_macro.spec.js

@@ -12,6 +12,7 @@ const EXAMPLE_TABS = {
       id: 'first-tab',
       title: 'Tab 1',
       content: 'Example content...',
+      hiddenSpan: 'for Example',
     },
     {
       id: 'second-tab',
@@ -87,18 +88,14 @@ describe('macro: tabs', () => {
   it('has default tab id attribute values when identifiers are not provided', () => {
     const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS_WITHOUT_TAB_IDS));
 
-    expect($('.ons-tabs__panel:first').attr('id')).toBe('tabId1');
-    expect($('.ons-tabs__panel:last').attr('id')).toBe('tabId2');
+    expect($('.ons-tabs__panel:first').attr('id')).toBe('tab-1');
+    expect($('.ons-tabs__panel:last').attr('id')).toBe('tab-2');
   });
 
-  it('has expected label text in tab links', () => {
+  it('has expected label text in tab links and visually hidden span in tab 1', () => {
     const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));
 
-    expect(
-      $('.ons-tab:first')
-        .text()
-        .trim(),
-    ).toBe('Tab 1');
+    expect($('.ons-tab:first').html()).toBe('Tab 1<span class="ons-u-d-no">for Example</span>');
     expect(
       $('.ons-tab:last')
         .text()

package/components/tabs/example-tabs.njk

@@ -7,6 +7,7 @@
             {
                 "id": "ukis",
                 "title": 'UKIS',
+                "hiddenSpan": 'for UKIS',
                 "content": '<h2 class="ons-u-d-no@m">UKIS</h2>
                 <h3>Aim of this survey</h3>
                 <p class="ons-u-fs-r">The aim of the UK Innovation Survey (UKIS) is to collect data from businesses about various aspects of their innovation related activities. Using this data we can measure the level, types and trends in innovation.</p>