@ons/design-system 65.0.0 → 65.1.0

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/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"
+        }
     })
 }}