@ons/design-system 62.2.2 → 62.2.4

package/components/autosuggest/_macro.njk

@@ -41,7 +41,7 @@
                 <ul class="ons-autosuggest-input__listbox ons-js-autosuggest-listbox" title="{{ params.resultsTitle }}" role="listbox" id="{{ params.id }}-listbox" tabindex="-1"></ul>
             </div>
             <div class="ons-autosuggest-input__instructions ons-u-vh ons-js-autosuggest-instructions" id="{{ params.id }}-instructions" tabindex="-1">{{ params.instructions }}</div>
-            <div class="ons-autosuggest-input__status ons-u-vh ons-js-autosuggest-aria-status" aria-live="assertive" role="status" tabindex="-1"></div>
+            <div class="ons-autosuggest-input__status ons-u-vh ons-js-autosuggest-aria-status" aria-live="assertive" aria-atomic="true" role="status" tabindex="-1"></div>
         {% endset %}
 
         {{ onsInput({

package/components/autosuggest/_macro.spec.js

@@ -216,6 +216,12 @@ describe('macro: autosuggest', () => {
       expect($('.ons-autosuggest-input__instructions').attr('id')).toBe('country-of-birth-instructions');
     });
 
+    it('adds aria-atomic=true value to status container', () => {
+      const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
+
+      expect($('.ons-autosuggest-input__status').attr('aria-atomic')).toBe('true');
+    });
+
     it('renders instructions text', () => {
       const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
 

package/components/radios/_radio.scss

@@ -9,13 +9,15 @@
     box-shadow: inset 0 0 0 3px var(--ons-color-input-bg);
 
     &::after {
-      border-color: var(--ons-color-input-border);
+      background-color: var(--ons-color-input-border);
       border-radius: 50%;
-      border-width: 6px;
-      height: 0;
-      left: 3px;
-      top: 3px;
-      width: 0;
+      border-width: 0;
+      height: 12px;
+      left: 50%;
+      margin-left: -6px;
+      margin-top: -6px;
+      top: 50%;
+      width: 12px;
     }
   }
 

package/components/search/_macro.njk

@@ -20,7 +20,7 @@
                 "html": buttonLabel,
                 "id": params.searchButton.id,
                 "variants": 'small',
-                "classes": 'ons-search__btn ons-u-mt-xs@xxs@s' + (" " + params.searchButton.classes if params.searchButton.classes else ""),
+                "classes": 'ons-search__btn' + (" " + params.searchButton.classes if params.searchButton.classes else ""),
                 "attributes": params.searchButton.attributes,
                 "iconType": params.searchButton.iconType,
                 "iconPosition": 'only' if params.searchButton.visuallyHideButtonText == true else 'before'

package/components/search/_macro.spec.js

@@ -35,7 +35,7 @@ describe('macro: search', () => {
       type: 'button',
       html: 'Search for address',
       variants: 'small',
-      classes: 'ons-search__btn ons-u-mt-xs@xxs@s extra-search-button-class',
+      classes: 'ons-search__btn extra-search-button-class',
       attributes: EXAMPLE_SEARCH.searchButton.attributes,
       iconType: 'search',
       iconPosition: 'before',
@@ -61,7 +61,7 @@ describe('macro: search', () => {
       type: 'button',
       html: '<span class="ons-u-vh">Search for address</span>',
       variants: 'small',
-      classes: 'ons-search__btn ons-u-mt-xs@xxs@s',
+      classes: 'ons-search__btn',
       iconPosition: 'only',
       iconType: 'search',
     });

package/components/search/_search.scss

@@ -1,16 +1,9 @@
 .ons-search-component {
   display: flex;
   flex-flow: row wrap;
+  gap: 0.5rem;
 
   @include mq(s) {
     flex-flow: row nowrap !important;
   }
-  .ons-search__btn {
-    margin-top: -3px;
-  }
-  .ons-search__btn {
-    @include mq(s) {
-      margin-left: 0.5rem;
-    }
-  }
 }

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/_table.scss

@@ -112,7 +112,7 @@
     }
     &__content {
       overflow: visible;
-      overflow-x: scroll;
+      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);

package/components/tabs/_macro.njk

@@ -15,7 +15,7 @@
 
         <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 '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 }}{% if tab.hiddenSpan %}<span class='ons-u-d-no'>{{tab.hiddenSpan}}</span>{% endif %}</a></li>
             {%- endfor -%}
         </ul>
 

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',
@@ -91,14 +92,10 @@ describe('macro: tabs', () => {
     expect($('.ons-tabs__panel:last').attr('id')).toBe('tabId2');
   });
 
-  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>

package/components/timeout-modal/example-timeout-modal.njk

@@ -1,5 +1,6 @@
 {% from "components/timeout-modal/_macro.njk" import onsTimeoutModal %}
 
+<div style="min-height:20rem;">
 {{ onsTimeoutModal({
     "showModalTimeInSeconds": 60,
     "redirectUrl": "#!",
@@ -14,3 +15,4 @@
     "secondsTextPlural": "seconds",
     "endWithFullStop": true
 }) }}
+</div>