@ons/design-system 65.0.0 → 65.2.0

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

@@ -23,7 +23,7 @@ layout: ~
 
 {% block main %}
     {% call onsQuestion({
-        "title": "Joe Bloggs is your <em>…</em>",
+        "title": "Joe Bloggs is your <strong>…</strong>",
         "description": "<p>Complete the sentence by selecting the appropriate relationship</p>",
         "readDescriptionFirst": true,
         "legendIsQuestionTitle": true,
@@ -31,9 +31,9 @@ layout: ~
         "submitButton": true
     }) %}
         {{ onsRelationships({
-            "legend": "Joe Bloggs is your <em>…</em>",
+            "legend": "Joe Bloggs is your <strong>…</strong>",
             "legendClasses": "ons-u-vh",
-            "playback": "Joe Bloggs is your <em>…</em>",
+            "playback": "Joe Bloggs is your <strong>…</strong>",
             "name": "relationship",
             "dontWrap": true,
             "radios": [
@@ -44,8 +44,8 @@ layout: ~
                         "text": "Husband or wife"
                     },
                     "attributes": {
-                        "data-title": "Joe Bloggs is your <em>husband or wife</em>",
-                        "data-playback": "Joe Bloggs is your <em>husband or wife</em>"
+                        "data-title": "Joe Bloggs is your <strong>husband or wife</strong>",
+                        "data-playback": "Joe Bloggs is your <strong>husband or wife</strong>"
                     }
                 },
                 {
@@ -55,8 +55,8 @@ layout: ~
                         "text": "Legally registered civil partner"
                     },
                     "attributes": {
-                        "data-title": "Joe Bloggs is your <em>legally registered civil partner</em>",
-                        "data-playback": "Joe Bloggs is your <em>legally registered civil partner</em>"
+                        "data-title": "Joe Bloggs is your <strong>legally registered civil partner</strong>",
+                        "data-playback": "Joe Bloggs is your <strong>legally registered civil partner</strong>"
                     }
                 },
                 {
@@ -66,8 +66,8 @@ layout: ~
                         "text": "Partner"
                     },
                     "attributes": {
-                        "data-title": "Joe Bloggs is your <em>partner</em>",
-                        "data-playback": "Joe Bloggs is your <em>partner</em>"
+                        "data-title": "Joe Bloggs is your <strong>partner</strong>",
+                        "data-playback": "Joe Bloggs is your <strong>partner</strong>"
                     }
                 },
                 {
@@ -77,8 +77,8 @@ layout: ~
                         "text": "Son or daughter"
                     },
                     "attributes": {
-                        "data-title": "Joe Bloggs is your <em>son or daughter</em>",
-                        "data-playback": "Joe Bloggs is your <em>son or daughter</em>"
+                        "data-title": "Joe Bloggs is your <strong>son or daughter</strong>",
+                        "data-playback": "Joe Bloggs is your <strong>son or daughter</strong>"
                     }
                 },
                 {
@@ -88,8 +88,8 @@ layout: ~
                         "text": "Stepchild"
                     },
                     "attributes": {
-                        "data-title": "Joe Bloggs is your <em>stepchild</em>",
-                        "data-playback": "Joe Bloggs is your <em>stepchild</em>"
+                        "data-title": "Joe Bloggs is your <strong>stepchild</strong>",
+                        "data-playback": "Joe Bloggs is your <strong>stepchild</strong>"
                     }
                 },
                 {
@@ -99,8 +99,8 @@ layout: ~
                         "text": "Brother or sister"
                     },
                     "attributes": {
-                        "data-title": "Joe Bloggs is your <em>brother or sister</em>",
-                        "data-playback": "Joe Bloggs is your <em>brother or sister</em>"
+                        "data-title": "Joe Bloggs is your <strong>brother or sister</strong>",
+                        "data-playback": "Joe Bloggs is your <strong>brother or sister</strong>"
                     }
                 },
                 {
@@ -110,8 +110,8 @@ layout: ~
                         "text": "Stepbrother or stepsister"
                     },
                     "attributes": {
-                        "data-title": "Joe Bloggs is your <em>stepbrother or sister</em>",
-                        "data-playback": "Joe Bloggs is your <em>stepbrother or sister</em>"
+                        "data-title": "Joe Bloggs is your <strong>stepbrother or sister</strong>",
+                        "data-playback": "Joe Bloggs is your <strong>stepbrother or sister</strong>"
                     }
                 },
                 {
@@ -121,8 +121,8 @@ layout: ~
                         "text": "Mother or father"
                     },
                     "attributes": {
-                        "data-title": "Joe Bloggs is your <em>mother or father</em>",
-                        "data-playback": "Joe Bloggs is your <em>mother or father</em>"
+                        "data-title": "Joe Bloggs is your <strong>mother or father</strong>",
+                        "data-playback": "Joe Bloggs is your <strong>mother or father</strong>"
                     }
                 },
                 {
@@ -132,8 +132,8 @@ layout: ~
                         "text": "Stepmother or stepfather"
                     },
                     "attributes": {
-                        "data-title": "Joe Bloggs is your <em>stepmother or stepfather</em>",
-                        "data-playback": "Joe Bloggs is your <em>stepmother or stepfather</em>"
+                        "data-title": "Joe Bloggs is your <strong>stepmother or stepfather</strong>",
+                        "data-playback": "Joe Bloggs is your <strong>stepmother or stepfather</strong>"
                     }
                 },
                 {
@@ -143,8 +143,8 @@ layout: ~
                         "text": "Grandchild"
                     },
                     "attributes": {
-                        "data-title": "Joe Bloggs is your <em>grandchild</em>",
-                        "data-playback": "Joe Bloggs is your <em>grandchild</em>"
+                        "data-title": "Joe Bloggs is your <strong>grandchild</strong>",
+                        "data-playback": "Joe Bloggs is your <strong>grandchild</strong>"
                     }
                 },
                 {
@@ -154,8 +154,8 @@ layout: ~
                         "text": "Grandparent"
                     },
                     "attributes": {
-                        "data-title": "Joe Bloggs is your <em>grandparent</em>",
-                        "data-playback": "Joe Bloggs is your <em>grandparent</em>"
+                        "data-title": "Joe Bloggs is your <strong>grandparent</strong>",
+                        "data-playback": "Joe Bloggs is your <strong>grandparent</strong>"
                     }
                 },
                 {
@@ -165,8 +165,8 @@ layout: ~
                         "text": "Other relation"
                     },
                     "attributes": {
-                        "data-title": "Joe Bloggs is your <em>other relation</em>",
-                        "data-playback": "Joe Bloggs is your <em>other relation</em>"
+                        "data-title": "Joe Bloggs is your <strong>other relation</strong>",
+                        "data-playback": "Joe Bloggs is your <strong>other relation</strong>"
                     }
                 },
                 {
@@ -177,8 +177,8 @@ layout: ~
                         "description": "Including foster child"
                     },
                     "attributes": {
-                        "data-title": "Joe Bloggs is <em>unrelated</em> to you",
-                        "data-playback": "Joe Bloggs is <em>unrelated</em> to you"
+                        "data-title": "Joe Bloggs is <strong>unrelated</strong> to you",
+                        "data-playback": "Joe Bloggs is <strong>unrelated</strong> to you"
                     }
                 }
             ]

package/components/relationships/example-relationships.njk

@@ -23,7 +23,7 @@ layout: ~
 
 {% block main %}
     {% call onsQuestion({
-        "title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>…</em>",
+        "title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>…</strong>",
         "description": "<p>Complete the sentence by selecting the appropriate relationship</p>",
         "readDescriptionFirst": true,
         "legendIsQuestionTitle": true,
@@ -31,7 +31,7 @@ layout: ~
         "submitButton": true
     }) %}
         {{ onsRelationships({
-            "playback": "Amanda Bloggs is Joe Bloggs' <em>…</em>",
+            "playback": "Amanda Bloggs is Joe Bloggs' <strong>…</strong>",
             "name": "relationship",
             "dontWrap": true,
             "radios": [
@@ -42,8 +42,8 @@ layout: ~
                         "text": "Husband or wife"
                     },
                     "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>husband or wife</em>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>husband or wife</em>"
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>husband or wife</strong>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>husband or wife</strong>"
                     }
                 },
                 {
@@ -53,8 +53,8 @@ layout: ~
                         "text": "Legally registered civil partner"
                     },
                     "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>legally registered civil partner</em>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>legally registered civil partner</em>"
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>legally registered civil partner</strong>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>legally registered civil partner</strong>"
                     }
                 },
                 {
@@ -64,8 +64,8 @@ layout: ~
                         "text": "Partner"
                     },
                     "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>partner</em>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>partner</em>"
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>partner</strong>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>partner</strong>"
                     }
                 },
                 {
@@ -75,8 +75,8 @@ layout: ~
                         "text": "Son or daughter"
                     },
                     "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>son or daughter</em>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>son or daughter</em>"
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>son or daughter</strong>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>son or daughter</strong>"
                     }
                 },
                 {
@@ -86,8 +86,8 @@ layout: ~
                         "text": "Stepchild"
                     },
                     "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>stepchild</em>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>stepchild</em>"
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>stepchild</strong>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>stepchild</strong>"
                     }
                 },
                 {
@@ -97,8 +97,8 @@ layout: ~
                         "text": "Brother or sister"
                     },
                     "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>brother or sister</em>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>brother or sister</em>"
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>brother or sister</strong>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>brother or sister</strong>"
                     }
                 },
                 {
@@ -108,8 +108,8 @@ layout: ~
                         "text": "Stepbrother or stepsister"
                     },
                     "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>stepbrother or sister</em>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>stepbrother or sister</em>"
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>stepbrother or sister</strong>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>stepbrother or sister</strong>"
                     }
                 },
                 {
@@ -119,8 +119,8 @@ layout: ~
                         "text": "Mother or father"
                     },
                     "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>mother or father</em>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>mother or father</em>"
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>mother or father</strong>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>mother or father</strong>"
                     }
                 },
                 {
@@ -130,8 +130,8 @@ layout: ~
                         "text": "Stepmother or stepfather"
                     },
                     "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>stepmother or stepfather</em>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>stepmother or stepfather</em>"
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>stepmother or stepfather</strong>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>stepmother or stepfather</strong>"
                     }
                 },
                 {
@@ -141,8 +141,8 @@ layout: ~
                         "text": "Grandchild"
                     },
                     "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>grandchild</em>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>grandchild</em>"
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>grandchild</strong>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>grandchild</strong>"
                     }
                 },
                 {
@@ -152,8 +152,8 @@ layout: ~
                         "text": "Grandparent"
                     },
                     "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>grandparents</em>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>grandparents</em>"
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>grandparents</strong>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>grandparents</strong>"
                     }
                 },
                 {
@@ -163,8 +163,8 @@ layout: ~
                         "text": "Other relation"
                     },
                     "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <em>other relation</em>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <em>other relation</em>"
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>other relation</strong>",
+                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>other relation</strong>"
                     }
                 },
                 {
@@ -175,8 +175,8 @@ layout: ~
                         "description": "Including foster child"
                     },
                     "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is <em>unrelated</em> to Joe Bloggs",
-                        "data-playback": "Amanda Bloggs is <em>unrelated</em> to Joe Bloggs"
+                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs",
+                        "data-playback": "Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs"
                     }
                 }
             ]

package/components/relationships/relationships.spec.js

@@ -2,7 +2,7 @@ import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 
 const EXAMPLE_RELATIONSHIPS = {
   dontWrap: true,
-  playback: "Amanda Bloggs is Joe Bloggs' <em>…</em>",
+  playback: "Amanda Bloggs is Joe Bloggs' <strong>…</strong>",
   name: 'relationship',
   radios: [
     {
@@ -12,8 +12,8 @@ const EXAMPLE_RELATIONSHIPS = {
         text: 'Grandparent',
       },
       attributes: {
-        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is their <em>grandparents</em>',
-        'data-playback': "Amanda Bloggs is Joe Bloggs' <em>grandparents</em>",
+        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is their <strong>grandparents</strong>',
+        'data-playback': "Amanda Bloggs is Joe Bloggs' <strong>grandparents</strong>",
       },
     },
     {
@@ -23,8 +23,8 @@ const EXAMPLE_RELATIONSHIPS = {
         text: 'Other relation',
       },
       attributes: {
-        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is their <em>other relation</em>',
-        'data-playback': "Amanda Bloggs is Joe Bloggs' <em>other relation</em>",
+        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is their <strong>other relation</strong>',
+        'data-playback': "Amanda Bloggs is Joe Bloggs' <strong>other relation</strong>",
       },
     },
     {
@@ -35,8 +35,8 @@ const EXAMPLE_RELATIONSHIPS = {
         description: 'Including foster child',
       },
       attributes: {
-        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is <em>unrelated</em> to Joe Bloggs',
-        'data-playback': 'Amanda Bloggs is <em>unrelated</em> to Joe Bloggs',
+        'data-title': 'Thinking of Joe Bloggs, Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs',
+        'data-playback': 'Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs',
       },
     },
   ],
@@ -49,7 +49,7 @@ describe('script: relationships', () => {
       renderComponent(
         'question',
         {
-          title: 'Thinking of Joe Bloggs, Amanda Bloggs is their <em>…</em>',
+          title: 'Thinking of Joe Bloggs, Amanda Bloggs is their <strong>…</strong>',
           readDescriptionFirst: true,
           legendIsQuestionTitle: true,
           legendTitleClasses: 'ons-js-relationships-legend',
@@ -61,7 +61,7 @@ describe('script: relationships', () => {
 
   describe('when the component initialises', () => {
     it('then the playback paragraph should become visible', async () => {
-      const hasHideClass = await page.$eval('.ons-relationships__playback', node => node.classList.contains('ons-u-d-no'));
+      const hasHideClass = await page.$eval('.ons-relationships__playback', (node) => node.classList.contains('ons-u-d-no'));
       expect(hasHideClass).toBe(false);
     });
   });
@@ -72,13 +72,13 @@ describe('script: relationships', () => {
     });
 
     it('the question title should be changed to reflect the relationship', async () => {
-      const headingText = await page.$eval('h1', element => element.innerHTML);
-      expect(headingText.trim()).toBe('Thinking of Joe Bloggs, Amanda Bloggs is their <em>other relation</em>');
+      const headingText = await page.$eval('h1', (element) => element.innerHTML);
+      expect(headingText.trim()).toBe('Thinking of Joe Bloggs, Amanda Bloggs is their <strong>other relation</strong>');
     });
 
     it('the playback should be changed to reflect the relationship', async () => {
-      const playbackText = await page.$eval('.ons-relationships__playback', element => element.innerHTML);
-      expect(playbackText.trim()).toBe("Amanda Bloggs is Joe Bloggs' <em>other relation</em>");
+      const playbackText = await page.$eval('.ons-relationships__playback', (element) => element.innerHTML);
+      expect(playbackText.trim()).toBe("Amanda Bloggs is Joe Bloggs' <strong>other relation</strong>");
     });
   });
 });

package/components/reply/_macro.njk

@@ -7,8 +7,11 @@
                 "id": params.textarea.id,
                 "name": params.textarea.name,
                 "label": {
-                    "text": params.textarea.label.text
-                }
+                    "text": params.textarea.label.text,
+                    "description": params.textarea.label.description
+                },
+                "charCheckLimit": params.textarea.charCheckLimit,
+                "rows": params.textarea.rows
             })
         }}
         <div class="ons-grid ons-grid--flex ons-grid--gutterless ons-grid--vertical-center ons-grid--no-wrap@s ons-u-mt-m ons-u-mb-m">

package/components/reply/_macro.spec.js

@@ -10,7 +10,14 @@ const EXAMPLE_TEXTAREA = {
   name: 'reply',
   label: {
     text: 'Reply',
+    description: 'Reply description',
   },
+  charCheckLimit: {
+      limit: 300,
+      charCountSingular: '{x} more character needed',
+      charCountPlural: '{x} more characters needed',
+  },
+  rows: 5,
 };
 
 const EXAMPLE_BUTTON = {
@@ -40,7 +47,6 @@ describe('macro: reply', () => {
     const textareaSpy = faker.spy('textarea');
 
     cheerio.load(faker.renderComponent('reply', EXAMPLE_REPLY));
-
     expect(textareaSpy.occurrences[0]).toEqual(EXAMPLE_TEXTAREA);
   });
 

package/components/section-navigation/_macro.njk

@@ -1,5 +1,6 @@
 {% macro onsSectionNavigation(params) %}
-  <nav class="ons-section-nav{% if params.variants == 'vertical' %} ons-section-nav--vertical{% endif %} {% if params.classes %} {{ params.classes }} {% endif %}"{% if params.id %} id="{{ params.id }}"{% endif %} aria-label="{{ params.ariaLabel | default("Section menu") }}">
+  <nav class="ons-section-nav{% if params.variants == 'vertical' %} ons-section-nav--vertical{% endif %} {% if params.classes %} {{ params.classes }} {% endif %}"{% if params.id %} id="{{ params.id }}"{% endif %} aria-labelledby="{{ params.hiddenTitleId | default("section-menu-nav-title")}}">
+  <h2 class="ons-u-vh" id="{{ params.hiddenTitleId | default("section-menu-nav-title") }}">{{ params.hiddenTitle | default("Pages in this section") }}</h2>
     {% if params.sections %}
       {% for section in params.sections %}
         <div class="ons-section-nav__sub">

package/components/section-navigation/_macro.spec.js

@@ -135,21 +135,10 @@ describe('macro: section-navigation', () => {
     expect($('.ons-section-nav').hasClass('custom-class')).toBe(true);
   });
 
-  it('has the provided `ariaLabel` parameter', () => {
-    const $ = cheerio.load(
-      renderComponent('section-navigation', {
-        ...EXAMPLE_SECTION_NAVIGATION,
-        ariaLabel: 'Section navigation menu',
-      }),
-    );
-
-    expect($('.ons-section-nav').attr('aria-label')).toBe('Section navigation menu');
-  });
-
-  it('assumes a default `ariaLabel` of "Section menu"', () => {
+  it('assumes a default `hiddenTitleId` of "Section menu"', () => {
     const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION));
 
-    expect($('.ons-section-nav').attr('aria-label')).toBe('Section menu');
+    expect($('.ons-section-nav').attr('aria-labelledby')).toBe('section-menu-nav-title');
   });
 
   describe('navigation items', () => {

package/components/table/_table.scss

@@ -115,7 +115,9 @@
       overflow-x: auto;
       width: 100%;
       &:focus {
-        box-shadow: 0 0 0 3px var(--ons-color-page-light), 0 0 0 5px var(--ons-color-text-link-focus), 0 0 0 8px var(--ons-color-focus);
+        box-shadow: 0 0 0 3px var(--ons-color-page-light),
+          0 0 0 5px var(--ons-color-text-link-focus),
+          0 0 0 8px var(--ons-color-focus);
         outline: 3px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
         outline-offset: 1px;
       }
@@ -141,13 +143,15 @@
       .ons-table__right-shadow {
         right: 0;
         &.ons-visible {
-          box-shadow: inset -1px 0 0 0 #bfc1c3, inset -5px 0 0 0 rgba(191, 193, 195, 0.4);
+          box-shadow: inset -1px 0 0 0 #bfc1c3,
+            inset -5px 0 0 0 rgb(191 193 195 / 40%);
         }
       }
       .ons-table__left-shadow {
         left: 0;
         &.ons-visible {
-          box-shadow: inset 1px 0 0 0 #bfc1c3, inset -5px 0 0 0 rgba(191, 193, 195, 0.4);
+          box-shadow: inset 1px 0 0 0 #bfc1c3,
+            inset -5px 0 0 0 rgb(191 193 195 / 40%);
         }
       }
     }

package/components/tabs/_macro.njk

@@ -13,11 +13,11 @@
         {% set titleTag = params.titleTag | default("h2") %}
         <{{ titleTag }} class="ons-tabs__title ons-u-fs-r--b ons-u-mt-no">{{ params.title }}</{{ titleTag }}>
         <div>
-        <ul class="ons-tabs__list">
-            {%- for tab in params.tabs -%}
-                <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>
+            <ul class="ons-tabs__list">
+                {%- for tab in params.tabs -%}
+                    <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-vh'>{{tab.hiddenSpan}}</span>{% endif %}</a></li>
+                {%- endfor -%}
+            </ul>
         </div>
         {% for tab in params.tabs %}
             <section id="{{ tab.id if tab.id else tab.title|trim|replace(' ','-')|lower }}" class="ons-tabs__panel">

package/components/tabs/_macro.spec.js

@@ -112,7 +112,7 @@ describe('macro: tabs', () => {
   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').html()).toBe('Tab 1<span class="ons-u-d-no">for Example</span>');
+    expect($('.ons-tab:first').html()).toBe('Tab 1<span class="ons-u-vh">for Example</span>');
     expect(
       $('.ons-tab:last')
         .text()

package/components/tabs/example-tabs-details.njk

@@ -30,6 +30,7 @@
                 {
                     "id": "video-description",
                     "title": 'Description',
+                    "hiddenSpan": 'for Census 2021 promotional TV advert video',
                     "content": '<div class="example-video-block__details">
                         <h3 class="ons-u-d-no@s">Description</h3>
                         <p>The census provides a snapshot of everyone in England & Wales. We help local councils get the funding they need.</p>
@@ -39,6 +40,7 @@
                 {
                     "id": "video-transcript",
                     "title": 'Transcript',
+                    "hiddenSpan": 'for Census 2021 promotional TV advert video',
                     "content": '<div class="example-video-block__details">
                         <h3 class="ons-u-d-no@s">Transcript</h3>
                         <p>I count.</p>
@@ -50,6 +52,7 @@
                 {
                     "id": "video-embed",
                     "title": 'Embed',
+                    "hiddenSpan": 'code for Census 2021 promotional TV advert video',
                     "content": '<h3 class="ons-u-d-no@s">Embed</h3>
                         <pre class="language-html"><code>' ~ '<iframe width="560" height="315" src="https://www.youtube.com/embed/_EGJlvkgbPo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>' | e ~ '</code></pre>'
                 }

package/components/tabs/example-tabs.njk

@@ -8,7 +8,6 @@
                 "id": "ukis",
                 "title": 'UKIS',
                 "showTitle": true,
-                "hiddenSpan": 'for UKIS',
                 "content": '<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>
                 <h3>How we’ll use this data</h3>

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

@@ -8,9 +8,9 @@
             "text": "Please provide some feedback",
             "description": "For example, describe any difficulties you experienced in the use of this service"
         },
-            "error": {
-                "id": "feedback-error",
-                "text": "Enter your feedback"
-            }
+        "error": {
+            "id": "feedback-error",
+            "text": "Enter your feedback"
+        }
     })
 }}