@ons/design-system 63.0.0 → 64.0.0

package/components/char-check-limit/_macro.njk

@@ -6,7 +6,7 @@
         </span>
     {% endif %}
     <span
-        id="{{ params.id }}-remaining"
+        id="{{ params.id }}"
         class="ons-input__limit ons-u-fs-s--b ons-u-d-no ons-u-mt-xs"
         data-charcount-singular="{{ params.charCountSingular }}"
         data-charcount-plural="{{ params.charCountPlural }}"

package/components/char-check-limit/_macro.spec.js

@@ -40,7 +40,7 @@ describe('macro: char-check-limit', () => {
   it('has the provided `id` attribute', () => {
     const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT));
 
-    expect($('.ons-input__limit').attr('id')).toBe('example-char-check-limit-remaining');
+    expect($('.ons-input__limit').attr('id')).toBe('example-char-check-limit');
   });
 
   it('has the provided data attributes', () => {

package/components/char-check-limit/character-check.spec.js

@@ -59,12 +59,12 @@ describe('script: character-check', () => {
 
     describe('Given that the char check helper has initialised correctly', () => {
       it('the char check readout should be invisible', async () => {
-        const hasClass = await page.$eval('#search-field-check-remaining', element => element.classList.contains('ons-u-d-no'));
+        const hasClass = await page.$eval('#search-field-check', element => element.classList.contains('ons-u-d-no'));
         expect(hasClass).toBe(true);
       });
 
       it('then the character limit readout should reflect the number of characters remaining', async () => {
-        const innerHtml = await page.$eval('#search-field-check-remaining', element => element.innerHTML);
+        const innerHtml = await page.$eval('#search-field-check', element => element.innerHTML);
         expect(innerHtml.trim()).toBe('You have 11 characters remaining');
       });
     });
@@ -76,17 +76,17 @@ describe('script: character-check', () => {
         });
 
         it('then the characters remaining readout reflect the number of characters remaining', async () => {
-          const innerHtml = await page.$eval('#search-field-check-remaining', element => element.innerHTML);
+          const innerHtml = await page.$eval('#search-field-check', element => element.innerHTML);
           expect(innerHtml.trim()).toBe('You have 10 characters remaining');
         });
 
         it('the char check readout should be visible', async () => {
-          const hasClass = await page.$eval('#search-field-check-remaining', element => element.classList.contains('ons-u-d-no'));
+          const hasClass = await page.$eval('#search-field-check', element => element.classList.contains('ons-u-d-no'));
           expect(hasClass).toBe(false);
         });
 
         it('then aria-live should be set to polite', async () => {
-          const ariaLiveAttribute = await page.$eval('#search-field-check-remaining', element => element.getAttribute('aria-live'));
+          const ariaLiveAttribute = await page.$eval('#search-field-check', element => element.getAttribute('aria-live'));
           expect(ariaLiveAttribute).toBe('polite');
         });
       });
@@ -97,7 +97,7 @@ describe('script: character-check', () => {
         });
 
         it('the char check readout should be invisible', async () => {
-          const hasClass = await page.$eval('#search-field-check-remaining', element => element.classList.contains('ons-u-d-no'));
+          const hasClass = await page.$eval('#search-field-check', element => element.classList.contains('ons-u-d-no'));
           expect(hasClass).toBe(true);
         });
       });
@@ -108,7 +108,7 @@ describe('script: character-check', () => {
         });
 
         it('then the characters remaining readout reflect the number of characters remaining', async () => {
-          const innerHtml = await page.$eval('#search-field-check-remaining', element => element.innerHTML);
+          const innerHtml = await page.$eval('#search-field-check', element => element.innerHTML);
           expect(innerHtml.trim()).toBe('You have 1 character remaining');
         });
       });
@@ -120,24 +120,24 @@ describe('script: character-check', () => {
       });
 
       it('the char check readout should be visible', async () => {
-        const hasClass = await page.$eval('#search-field-check-remaining', element => element.classList.contains('ons-u-d-no'));
+        const hasClass = await page.$eval('#search-field-check', element => element.classList.contains('ons-u-d-no'));
         expect(hasClass).toBe(false);
       });
 
       it('then the characters remaining readout reflect the number of characters exceeded', async () => {
-        const innerHtml = await page.$eval('#search-field-check-remaining', element => element.innerHTML);
+        const innerHtml = await page.$eval('#search-field-check', element => element.innerHTML);
         expect(innerHtml.trim()).toBe('1 number too many');
       });
 
       it('then aria-live should be set to assertive', async () => {
-        const ariaLiveAttribute = await page.$eval('#search-field-check-remaining', element => element.getAttribute('aria-live'));
+        const ariaLiveAttribute = await page.$eval('#search-field-check', element => element.getAttribute('aria-live'));
         expect(ariaLiveAttribute).toBe('assertive');
       });
 
       it('then the input and readout should be given limit reached classes', async () => {
         const hasClassOnSearchInput = await page.$eval('#search-field', element => element.classList.contains('ons-input--limit-reached'));
         expect(hasClassOnSearchInput).toBe(true);
-        const hasClassOnLimitReadout = await page.$eval('#search-field-check-remaining', element =>
+        const hasClassOnLimitReadout = await page.$eval('#search-field-check', element =>
           element.classList.contains('ons-input__limit--reached'),
         );
         expect(hasClassOnLimitReadout).toBe(true);
@@ -150,24 +150,24 @@ describe('script: character-check', () => {
       });
 
       it('the char check readout should be visible', async () => {
-        const hasClass = await page.$eval('#search-field-check-remaining', element => element.classList.contains('ons-u-d-no'));
+        const hasClass = await page.$eval('#search-field-check', element => element.classList.contains('ons-u-d-no'));
         expect(hasClass).toBe(false);
       });
 
       it('then the characters remaining readout reflect the number of characters exceeded', async () => {
-        const innerHtml = await page.$eval('#search-field-check-remaining', element => element.innerHTML);
+        const innerHtml = await page.$eval('#search-field-check', element => element.innerHTML);
         expect(innerHtml.trim()).toBe('2 numbers too many');
       });
 
       it('then aria-live should be set to assertive', async () => {
-        const ariaLiveAttribute = await page.$eval('#search-field-check-remaining', element => element.getAttribute('aria-live'));
+        const ariaLiveAttribute = await page.$eval('#search-field-check', element => element.getAttribute('aria-live'));
         expect(ariaLiveAttribute).toBe('assertive');
       });
 
       it('then the input and readout should be given limit reached classes', async () => {
         const hasClassOnSearchInput = await page.$eval('#search-field', element => element.classList.contains('ons-input--limit-reached'));
         expect(hasClassOnSearchInput).toBe(true);
-        const hasClassOnLimitReadout = await page.$eval('#search-field-check-remaining', element =>
+        const hasClassOnLimitReadout = await page.$eval('#search-field-check', element =>
           element.classList.contains('ons-input__limit--reached'),
         );
         expect(hasClassOnLimitReadout).toBe(true);
@@ -188,7 +188,7 @@ describe('script: character-check', () => {
       });
 
       it('then aria-live attribute should removed', async () => {
-        const hasAriaLiveAttribute = await page.$eval('#feedback-lim-remaining', element => element.hasAttribute('aria-live'));
+        const hasAriaLiveAttribute = await page.$eval('#feedback-lim', element => element.hasAttribute('aria-live'));
         expect(hasAriaLiveAttribute).toBe(false);
       });
     });

package/components/checkboxes/_macro.njk

@@ -5,7 +5,9 @@
     {% from "components/button/_macro.njk" import onsButton %}
 
     {% set fields %}
+    {% if params.checkboxesLabel is defined %}
         <p class="ons-checkboxes__label{{ " " + params.checkboxesLabelClasses if params.checkboxesLabelClasses }}">{{ params.checkboxesLabel }}</p>
+    {% endif %}    
         {% set hasOther = false %}
         {% for checkbox in params.checkboxes %}
             {% if checkbox.other %}
@@ -15,7 +17,7 @@
         {% if hasOther == false and params.autoSelect and params.autoSelect.selectAllText %}
             {% set btnClasses = ['small', 'secondary'] %}
             {% if params.borderlessParent == false %}
-                {% set btnClasses = ['small', 'secondary', 'ghost-dark'] %}
+                {% set btnClasses = ['small', 'secondary', 'ghost', 'ghost-dark'] %}
             {% endif %}
             {{
                 onsButton({

package/components/checkboxes/example-checkboxes-with-descriptions.njk

@@ -8,6 +8,7 @@
 }) %}
     {{
         onsCheckboxes({
+            "checkboxesLabel": "Select all that apply",
             "dontWrap": true,
             "name": "central-heating",
             "checkboxes": [

package/components/cookies-banner/_macro.njk

@@ -26,7 +26,7 @@
         {% set rejectedText =  'You have rejected all additional cookies.' %}
         {% set preferencesText =  'You can <a href="' + settingsLinkURL + '">change your cookie preferences</a> at any time.' %}
         {% set confirmationButtonText = 'Hide' %}
-        {% set confirmationButtonTextAria = 'this message' %}
+        {% set contextSuffix = 'this message' %}
     {% endif %}
 
     <div class="ons-cookies-banner" role="region" aria-label="{{ params.ariaLabel | default(ariaLabel)}}">
@@ -78,7 +78,7 @@
                     onsButton({
                         "type": 'button',
                         "text": params.confirmationButtonText | default(confirmationButtonText),
-                        "buttonContext": params.confirmationButtonTextAria | default(confirmationButtonTextAria),
+                        "buttonContext": params.contextSuffix | default(contextSuffix),
                         "classes": 'ons-btn--secondary ons-btn--small ons-js-hide-button'
                     })
                 }}

package/components/cookies-banner/_macro.spec.js

@@ -16,7 +16,7 @@ const EXAMPLE_COOKIES_BANNER_PARAMS = {
   rejectButtonText: 'Reject additional cookies override',
   preferencesText: 'Text override',
   confirmationButtonText: 'Hide override',
-  confirmationButtonTextAria: 'the cookie message override',
+  contextSuffix: 'the cookie message override',
 };
 
 describe('macro: cookies-banner', () => {
@@ -112,7 +112,7 @@ describe('macro: cookies-banner', () => {
         expect(buttonSpy.occurrences[2].text).toBe('Hide override');
       });
 
-      it('has the correct `confirmationButtonTextAria` for `buttonContext`', () => {
+      it('has the correct `contextSuffix` for `buttonContext`', () => {
         const faker = templateFaker();
         const buttonSpy = faker.spy('button');
 

package/components/input/_input.scss

@@ -137,6 +137,12 @@
   }
 }
 
+.ons-input_search-button {
+  display: flex;
+  flex-flow: row nowrap !important;
+  gap: 0.5rem;
+}
+
 .ons-input-search {
   @extend .ons-input--block;
   @extend .ons-input--ghost;

package/components/input/_macro.njk

@@ -1,9 +1,9 @@
 {% macro onsInput(params) %}
     {% from "components/mutually-exclusive/_macro.njk" import onsMutuallyExclusive %}
     {% from "components/char-check-limit/_macro.njk" import onsCharLimit %}
-    {% from "components/search/_macro.njk" import onsSearch %}
     {% from "components/field/_macro.njk" import onsField %}
     {% from "components/label/_macro.njk" import onsLabel %}
+    {% from "components/button/_macro.njk" import onsButton %}
 
     {% if params.type == "number" %}
         {# Type must be "text" or Firefox and Safari will set a blank value to the server if non numeric characters are entered -
@@ -40,7 +40,7 @@
             {% if inputmode %}inputmode="{{ inputmode }}"{% endif %}
             {% if params.autocomplete %}autocomplete="{{ params.autocomplete }}"{% endif %}
             {% if params.accessiblePlaceholder %}placeholder="{{ params.label.text }}"{% endif %}
-            {% if params.charCheckLimit %}data-char-check-ref="{{ params.id }}-check-remaining" data-char-check-num="{{ params.charCheckLimit.limit }}" aria-describedby="{{ params.id }}-check-remaining"{% endif %}
+            {% if params.charCheckLimit %}data-char-check-ref="{{ params.id }}-check" data-char-check-num="{{ params.charCheckLimit.limit }}" aria-describedby="{{ params.id }}-check"{% endif %}
             {% if params.charCheckLimit and params.charCheckLimit.charcheckCountdown %}data-char-check-countdown="true"{% endif %}
             {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
             {% if params.label and params.label.description %}{% if params.label.id %}aria-describedby="{{ params.label.id }}-description-hint"{% else %}aria-describedby="description-hint"{% endif %}{% endif %}
@@ -100,21 +100,28 @@
                 </span>
             {% endif %}
         {% elif params.searchButton %}
-            <span class="ons-grid--flex ons-search">
-                {% call onsSearch({
-                    "accessiblePlaceholder": params.accessiblePlaceholder,
-                    "searchButton": {
+            <span class="ons-grid--flex ons-input_search-button">
+                {{ input | safe }}
+                {%- set buttonLabel -%}
+                    {%- if params.searchButton.visuallyHideButtonText == true -%}
+                        <span class="ons-u-vh">{{ params.searchButton.text }}</span>
+                    {%- else -%}
+                        {{ params.searchButton.text }}
+                    {%- endif -%}
+                {%- endset -%}
+                {{
+                    onsButton({
                         "type": params.searchButton.type,
+                        "html": buttonLabel,
                         "text": params.searchButton.text,
-                        "visuallyHideButtonText": params.searchButton.visuallyHideButtonText,
                         "id": params.searchButton.id,
+                        "variants": 'small',
+                        "classes": 'ons-search__btn' + (" " + params.searchButton.classes if params.searchButton.classes else ""),
                         "attributes": params.searchButton.attributes,
-                        "classes": params.searchButton.classes,
-                        "iconType": params.searchButton.iconType
-                    }
-                }) %}
-                    {{ input | safe }}
-                {% endcall %}
+                        "iconType": params.searchButton.iconType,
+                        "iconPosition": 'only' if params.searchButton.visuallyHideButtonText == true else 'before'
+                    })
+                }}
             </span>
         {% else %}
             {{ input | safe }}

package/components/input/_macro.spec.js

@@ -535,26 +535,6 @@ describe('macro: input', () => {
   });
 
   describe('search', () => {
-    it('renders `search` component', () => {
-      const faker = templateFaker();
-      const searchSpy = faker.spy('search');
-
-      faker.renderComponent('input', EXAMPLE_WITH_SEARCH);
-
-      expect(searchSpy.occurrences[0]).toEqual({
-        accessiblePlaceholder: true,
-        searchButton: {
-          type: 'button',
-          text: 'Search for address',
-          id: 'search-for-address',
-          attributes: { a: 42 },
-          classes: 'extra-search-button-class',
-          iconType: 'search',
-          visuallyHideButtonText: true,
-        },
-      });
-    });
-
     it.each('outputs `type` attribute of "search"', () => {
       const $ = cheerio.load(renderComponent('input', EXAMPLE_WITH_SEARCH));
 
@@ -621,7 +601,7 @@ describe('macro: input', () => {
     it('has data attribute which references the character limit component', () => {
       const $ = cheerio.load(renderComponent('input', EXAMPLE_INPUT_WITH_CHARACTER_LIMIT));
 
-      expect($('.ons-input').attr('data-char-check-ref')).toBe('example-id-check-remaining');
+      expect($('.ons-input').attr('data-char-check-ref')).toBe('example-id-check');
     });
 
     it('has data attribute which defines limit for character check', () => {
@@ -633,7 +613,7 @@ describe('macro: input', () => {
     it('has `aria-describedby` attribute which references the character limit component', () => {
       const $ = cheerio.load(renderComponent('input', EXAMPLE_INPUT_WITH_CHARACTER_LIMIT));
 
-      expect($('.ons-input').attr('aria-describedby')).toBe('example-id-check-remaining');
+      expect($('.ons-input').attr('aria-describedby')).toBe('example-id-check');
     });
 
     it('renders character limit component', () => {

package/components/{search/example-search-with-character-check.njk → input/example-input-search-with-character-check.njk}

@@ -1,5 +1,4 @@
 {% from "components/input/_macro.njk" import onsInput %}
-
 {{
     onsInput({
         "id": 'search-field',
@@ -20,4 +19,4 @@
             "charCountOverLimitPlural": "{x} characters too many"
         }
     })
-}}
+}}

package/components/{search/example-search-with-placeholder.njk → input/example-input-search-with-placeholder.njk}

@@ -1,5 +1,4 @@
 {% from "components/input/_macro.njk" import onsInput %}
-
 {{
     onsInput({
         "id": 'search-field',
@@ -13,4 +12,4 @@
             "iconType": 'search'
         }
     })
-}}
+}}

package/components/{search/example-search.njk → input/example-input-search.njk}

@@ -1,5 +1,4 @@
 {% from "components/input/_macro.njk" import onsInput %}
-
 {{
     onsInput({
         "id": 'search-field',
@@ -13,4 +12,4 @@
             "iconType": 'search'
         }
     })
-}}
+}}

package/components/mutually-exclusive/mutually-exclusive.textarea.spec.js

@@ -63,7 +63,7 @@ describe('script: mutually-exclusive', () => {
         });
 
         it('then the characters remaining readout should be reset', async () => {
-          const limitText = await page.$eval('#feedback-lim-remaining', node => node.textContent);
+          const limitText = await page.$eval('#feedback-lim', node => node.textContent);
           expect(limitText).toBe('You have 200 characters remaining');
         });
 

package/components/select/_macro.njk

@@ -22,7 +22,6 @@
             id="{{ params.id }}"
             name="{{ params.name }}"
             class="ons-input ons-input--select{% if params.classes %} {{ params.classes }}{% endif %}{% if params.error %} ons-input--error{% endif %}"
-            {% if params.value %}value="{{ params.value}}" {% endif %}
             {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
         >
             {% for option in params.options %}
@@ -30,7 +29,7 @@
                 {% if option.id %}id="{{ option.id }}" {% endif %}
                 {% if option.selected %}selected {% endif %}
                 {% if option.disabled %}disabled {% endif %}
-                {% if params.attributes %}{% for attribute, value in option.attributes %}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
+                {% if option.attributes %}{% for attribute, value in option.attributes %}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
             >
                 {{- option.text -}}
             </option>

package/components/summary/_macro.njk

@@ -96,9 +96,8 @@
                                                         <a
                                                             href="{{ action.url }}"
                                                             class="ons-summary__button"
-                                                            {% if action.ariaLabel %} aria-label="{{ action.ariaLabel }}"{% endif %}
                                                             {% if action.attributes %}{% for attribute, value in (action.attributes.items() if action.attributes is mapping and action.attributes.items else action.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
-                                                        >{{ action.text }}</a>
+                                                        >{{ action.text }}<span class="ons-u-vh">answer for {{ row.rowTitle }}</span></a>
                                                     {% endfor %}
                                                 </dd>
                                             {% endif %}

package/components/summary/_macro.spec.js

@@ -49,7 +49,6 @@ const EXAMPLE_SUMMARY_ROWS = {
           actions: [
             {
               text: 'Action 1',
-              ariaLabel: 'action aria label 1',
               attributes: {
                 a: 'abc',
                 b: 'def',
@@ -58,7 +57,6 @@ const EXAMPLE_SUMMARY_ROWS = {
             },
             {
               text: 'Action 2',
-              ariaLabel: 'action aria label 2',
               url: '#2',
             },
           ],
@@ -149,12 +147,10 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
           actions: [
             {
               text: 'Change',
-              ariaLabel: 'Change list item',
               url: '#0',
             },
             {
               text: 'Remove',
-              ariaLabel: 'Remove list item',
               url: '#0',
             },
           ],
@@ -169,7 +165,6 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
           actions: [
             {
               text: 'Change',
-              ariaLabel: 'Remove list item',
               url: '#0',
             },
           ],
@@ -184,7 +179,6 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
           actions: [
             {
               text: 'Change',
-              ariaLabel: 'Change list item',
               url: '#0',
             },
           ],
@@ -203,12 +197,10 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
           actions: [
             {
               text: 'Change',
-              ariaLabel: 'Change answer',
               url: '#0',
             },
             {
               text: 'Remove',
-              ariaLabel: 'Change list item',
               url: '#0',
             },
           ],
@@ -223,7 +215,6 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
           actions: [
             {
               text: 'Change',
-              ariaLabel: 'Change list item',
               url: '#0',
             },
           ],
@@ -238,7 +229,6 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
           actions: [
             {
               text: 'Change',
-              ariaLabel: 'Change list item',
               url: '#0',
             },
           ],
@@ -487,25 +477,20 @@ describe('macro: summary', () => {
 
         expect(
           $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child').text(),
-        ).toBe('Action 1');
+        ).toBe('Action 1answer for row title 2');
         expect(
           $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:last-child').text(),
-        ).toBe('Action 2');
+        ).toBe('Action 2answer for row title 2');
       });
 
-      it('has the `aria-label` provided', () => {
+      it('has the correct visually hidden <span> text', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
         expect(
-          $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child').attr(
-            'aria-label',
-          ),
-        ).toBe('action aria label 1');
-        expect(
-          $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:last-child').attr(
-            'aria-label',
-          ),
-        ).toBe('action aria label 2');
+          $(
+            '.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child .ons-u-vh',
+          ).text(),
+        ).toBe('answer for row title 2');
       });
 
       it('has custom `attributes`', () => {

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

@@ -19,7 +19,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]
@@ -38,7 +37,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]

package/components/summary/example-summary-grouped-with-errors.njk

@@ -19,7 +19,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]
@@ -40,7 +39,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]
@@ -60,7 +58,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]
@@ -80,7 +77,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]