@ons/design-system 55.1.0 → 56.0.0

package/components/input/_macro.spec.js

@@ -41,6 +41,7 @@ const EXAMPLE_WITH_SEARCH = {
     attributes: { a: 42 },
     classes: 'extra-search-button-class',
     iconType: 'search',
+    visuallyHideButtonText: true,
   },
 };
 
@@ -79,6 +80,13 @@ const EXAMPLE_INPUT_WITH_MUTUALLY_EXCLUSIVE_WITH_ERROR = {
 };
 
 describe('macro: input', () => {
+  it('passes jest-axe checks', async () => {
+    const $ = cheerio.load(renderComponent('input', EXAMPLE_INPUT_WITH_LABEL));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
   it('has the provided `id` attribute', () => {
     const $ = cheerio.load(renderComponent('input', EXAMPLE_INPUT_MINIMAL));
 
@@ -374,7 +382,7 @@ describe('macro: input', () => {
   });
 
   describe('prefix and suffix', () => {
-    it('adds `aria-labelledby` attribute when `prefix` is provided', () => {
+    it('passes jest-axe checks', async () => {
       const $ = cheerio.load(
         renderComponent('input', {
           ...EXAMPLE_INPUT_MINIMAL,
@@ -385,10 +393,11 @@ describe('macro: input', () => {
         }),
       );
 
-      expect($('.ons-input').attr('aria-labelledby')).toBe('example-prefix-id');
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
     });
 
-    it('renders prefix element from `prefix.title`', () => {
+    it('adds `aria-labelledby` attribute when `prefix` is provided', () => {
       const $ = cheerio.load(
         renderComponent('input', {
           ...EXAMPLE_INPUT_MINIMAL,
@@ -399,13 +408,7 @@ describe('macro: input', () => {
         }),
       );
 
-      expect($('.ons-input-type--prefix .ons-js-input-abbr').attr('id')).toBe('example-prefix-id');
-      expect($('.ons-input-type--prefix .ons-js-input-abbr').attr('title')).toBe('Example prefix title');
-      expect(
-        $('.ons-input-type--prefix .ons-js-input-abbr')
-          .text()
-          .trim(),
-      ).toBe('Example prefix title');
+      expect($('.ons-input').attr('aria-labelledby')).toBe('example-prefix-id');
     });
 
     it('renders prefix element from `prefix.text`', () => {
@@ -443,20 +446,6 @@ describe('macro: input', () => {
       expect($('.ons-input-type--prefix').length).toBe(0);
     });
 
-    it('does not render prefix element when `prefix.title` not set', () => {
-      const $ = cheerio.load(
-        renderComponent('input', {
-          ...EXAMPLE_INPUT_MINIMAL,
-          prefix: {
-            text: 'Example prefix text',
-            id: 'example-prefix-id',
-          },
-        }),
-      );
-
-      expect($('.ons-input-type--prefix').length).toBe(0);
-    });
-
     it('adds `aria-labelledby` attribute when `suffix` is provided', () => {
       const $ = cheerio.load(
         renderComponent('input', {
@@ -471,13 +460,14 @@ describe('macro: input', () => {
       expect($('.ons-input').attr('aria-labelledby')).toBe('example-suffix-id');
     });
 
-    it('renders suffix element from `suffix.title`', () => {
+    it('renders suffix element from `suffix.text`', () => {
       const $ = cheerio.load(
         renderComponent('input', {
           ...EXAMPLE_INPUT_MINIMAL,
           suffix: {
             id: 'example-suffix-id',
             title: 'Example suffix title',
+            text: 'Example suffix text',
           },
         }),
       );
@@ -488,57 +478,51 @@ describe('macro: input', () => {
         $('.ons-js-input-abbr')
           .text()
           .trim(),
-      ).toBe('Example suffix title');
+      ).toBe('Example suffix text');
     });
 
-    it('renders suffix element from `suffix.text`', () => {
+    it('does not render suffix element when `suffix.id` not set', () => {
       const $ = cheerio.load(
         renderComponent('input', {
           ...EXAMPLE_INPUT_MINIMAL,
           suffix: {
-            id: 'example-suffix-id',
             title: 'Example suffix title',
             text: 'Example suffix text',
           },
         }),
       );
 
-      expect($('.ons-js-input-abbr').attr('id')).toBe('example-suffix-id');
-      expect($('.ons-js-input-abbr').attr('title')).toBe('Example suffix title');
-      expect(
-        $('.ons-js-input-abbr')
-          .text()
-          .trim(),
-      ).toBe('Example suffix text');
+      expect($('.ons-input').length).toBe(0);
     });
-  });
 
-  it('does not render suffix element when `suffix.id` not set', () => {
-    const $ = cheerio.load(
-      renderComponent('input', {
-        ...EXAMPLE_INPUT_MINIMAL,
-        suffix: {
-          title: 'Example suffix title',
-          text: 'Example suffix text',
-        },
-      }),
-    );
+    it('renders an `abbr` tag when `title` set', () => {
+      const $ = cheerio.load(
+        renderComponent('input', {
+          ...EXAMPLE_INPUT_MINIMAL,
+          suffix: {
+            text: 'Example suffix text',
+            title: 'Example suffix title',
+            id: 'example-suffix-id',
+          },
+        }),
+      );
 
-    expect($('.ons-input').length).toBe(0);
-  });
+      expect($('.ons-input + abbr').length).toBe(1);
+    });
 
-  it('does not render suffix element when `suffix.title` not set', () => {
-    const $ = cheerio.load(
-      renderComponent('input', {
-        ...EXAMPLE_INPUT_MINIMAL,
-        suffix: {
-          text: 'Example suffix text',
-          id: 'example-suffix-id',
-        },
-      }),
-    );
+    it('renders a `span` tag when `title` not set', () => {
+      const $ = cheerio.load(
+        renderComponent('input', {
+          ...EXAMPLE_INPUT_MINIMAL,
+          suffix: {
+            text: 'Example suffix text',
+            id: 'example-suffix-id',
+          },
+        }),
+      );
 
-    expect($('.ons-input').length).toBe(0);
+      expect($('.ons-input + span').length).toBe(1);
+    });
   });
 
   describe('search', () => {
@@ -557,6 +541,7 @@ describe('macro: input', () => {
           attributes: { a: 42 },
           classes: 'extra-search-button-class',
           iconType: 'search',
+          visuallyHideButtonText: true,
         },
       });
     });
@@ -577,6 +562,21 @@ describe('macro: input', () => {
   });
 
   describe('with character limit', () => {
+    it('passes jest-axe checks', async () => {
+      const $ = cheerio.load(
+        renderComponent('input', {
+          ...EXAMPLE_INPUT_WITH_CHARACTER_LIMIT,
+          label: {
+            id: 'example-input-label',
+            text: 'Example input label',
+          },
+        }),
+      );
+
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
     it('has the provided minimum length', () => {
       const $ = cheerio.load(renderComponent('input', EXAMPLE_INPUT_WITH_CHARACTER_LIMIT));
 
@@ -673,6 +673,13 @@ describe('macro: input', () => {
   });
 
   describe('mutually exclusive', () => {
+    it('passes jest-axe checks', async () => {
+      const $ = cheerio.load(renderComponent('input', EXAMPLE_INPUT_WITH_MUTUALLY_EXCLUSIVE_WITH_ERROR));
+
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
     it('has the `ons-js-exclusive-group-item` class', () => {
       const $ = cheerio.load(renderComponent('input', EXAMPLE_INPUT_WITH_MUTUALLY_EXCLUSIVE_WITH_ERROR));
 

package/components/label/_macro.njk

@@ -22,7 +22,7 @@
         {% if params.description %}aria-describedby="{{ descriptionID }}"{% endif %}
         {% if params.for %} for="{{ params.for }}"{% endif %}
         {% if params.id %} id="{{ params.id }}"{% 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 is defined and value %}="{{ value }}"{% endif %}{% endfor %}{% 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 %}
     >
 
         {{- params.text | safe -}}

package/components/language-selector/_macro.njk

@@ -5,7 +5,7 @@
     <ul class="ons-language-links{% if languageNumber and languageNumber != 2 %} ons-u-d-no@xxs@m{% endif %}">
         {% for language in alternativeLanguages %}
             <li class="ons-language-links__item">
-                <a href="{{ language.url }}" lang="{{ language.ISOCode }}" {% if language.attributes is defined and language.attributes %}{% for attribute, value in (language.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}>{% if language.abbrText %}<span class="ons-u-d-no@s">{{ language.abbrText }}</span><span class="ons-u-d-no@xxs@s">{{ language.text }}</span>{% else %}{{ language.text }}{% endif %}</a>
+                <a href="{{ language.url }}" lang="{{ language.ISOCode }}" {% if language.attributes %}{% for attribute, value in (language.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}>{% if language.abbrText %}<span class="ons-u-d-no@s">{{ language.abbrText }}</span><span class="ons-u-d-no@xxs@s">{{ language.text }}</span>{% else %}{{ language.text }}{% endif %}</a>
             </li>
         {% endfor %}
     </ul>

package/components/lists/_macro.njk

@@ -2,44 +2,44 @@
     {% set variants = params.variants if params.variants else '' %}
     {% set listLength = params.itemsList | length %}
 
-    {% if params.itemsList[0] is defined and params.itemsList[0].prefix %}
+    {% if params.itemsList[0].prefix %}
         {% set otherClasses = 'ons-list--bare ons-list--prefix' %}
-    {% elif params.itemsList[0] is defined and params.itemsList[0].suffix %}
+    {% elif params.itemsList[0].suffix %}
         {% set otherClasses = 'ons-list--bare ons-list--suffix' %}
-    {% elif params.itemsList[0] is defined and params.iconPosition is defined and params.iconPosition %}
+    {% elif params.iconPosition %}
         {% set otherClasses = 'ons-list--bare ons-list--icons' %}
         {% set iconType = params.iconType if params.iconType else '' %}
     {% else %}
         {% set otherClasses = '' %}
     {% endif %}
 
-    {% if params.element is defined and params.element and listLength > 1 %}
+    {% if params.element and listLength > 1 %}
         {% set listEl = params.element | lower %}
-    {% elif (params.element is defined and params.element == 'ol') and listLength < 2 %}
+    {% elif (params.element == 'ol') and listLength < 2 %}
         {% set listEl = 'p' %}
     {% else %}
         {% set listEl = 'ul' %}
     {% endif %}
-        <{{listEl}} {% if params.id is defined and params.id %}id="{{ params.id }}"{% endif %} class="ons-list{% if listEl == 'p' %} ons-list--p{% endif %}{% if params.classes is defined and params.classes %} {{ params.classes -}}{% endif %}{% if params.variants is defined and params.variants %}{% if params.variants is not string %}{% for variant in params.variants %} ons-list--{{ variant }}{% endfor %}{% else %} ons-list--{{ params.variants }}{% endif %}{% endif %}{% if otherClasses %} {{ otherClasses -}}{% endif %}"{% if params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{ attribute }}{% if value is defined and value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
+        <{{listEl}} {% if params.id %}id="{{ params.id }}"{% endif %} class="ons-list{% if listEl == 'p' %} ons-list--p{% endif %}{% if params.classes %} {{ params.classes -}}{% endif %}{% if params.variants %}{% if params.variants is not string %}{% for variant in params.variants %} ons-list--{{ variant }}{% endfor %}{% else %} ons-list--{{ params.variants }}{% endif %}{% endif %}{% if otherClasses %} {{ otherClasses -}}{% 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 item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) -%}
                 {% if listLength > 1 or listEl == 'ul' %}
-                <li class="ons-list__item{% if item.listClasses is defined and item.listClasses %} {{ item.listClasses }}{% endif %}"{% if item.current is defined and item.current %} aria-current="true"{% endif %}>
+                <li class="ons-list__item{% if item.listClasses %} {{ item.listClasses }}{% endif %}"{% if item.current %} aria-current="true"{% endif %}>
                 {% endif %}
                     {% set itemText = item.text %}
-                    {% set itemIconType = item.iconType if item.iconType is defined and item.iconType else iconType %}
+                    {% set itemIconType = item.iconType if item.iconType else iconType %}
 
                     {# For Craft support we also support title and navigation title #}
-                    {% if item.navigationTitle is defined and item.navigationTitle %}
+                    {% if item.navigationTitle %}
                         {% set itemText = item.navigationTitle %}
-                    {% elif item.title is defined and item.title %}
+                    {% elif item.title %}
                         {% set itemText = item.title %}
                     {% endif %}
 
-                    {%- if item.prefix is defined and item.prefix or (params.iconPosition is defined and params.iconPosition == 'before') -%}
+                    {%- if item.prefix or (params.iconPosition == 'before') -%}
                         <span class="ons-list__prefix"{% if listEl != 'ol' %} aria-hidden="true"{% endif %}>
-                            {%- if item.prefix is defined and item.prefix -%}
+                            {%- if item.prefix -%}
                                 {{- item.prefix -}}.
-                            {% elif params.iconPosition is defined and params.iconPosition == 'before' %}
+                            {% elif params.iconPosition == 'before' %}
                                 {% from "components/icons/_macro.njk" import onsIcon %}
                                 {{
                                     onsIcon({
@@ -50,8 +50,8 @@
                             {%- endif -%}
                         </span>
                     {%- endif -%}
-                    {%- if item.url is defined and item.url and item.current != true -%}
-                        {%- if item.external is defined and item.external -%}
+                    {%- if item.url and item.current != true -%}
+                        {%- if item.external -%}
                             {% from "components/external-link/_macro.njk" import onsExternalLink %}
                             {{
                                 onsExternalLink({
@@ -60,21 +60,21 @@
                                 })
                             }}
                         {%- else -%}
-                            <a href="{{ item.url }}" class="ons-list__link{% if item.variants == 'inPageLink' %} ons-js-inpagelink{% endif %}{% if item.classes is defined and item.classes %} {{ item.classes }}{% endif %}"{% if item.target is defined and item.target %} target="{{ item.target }}"{% endif %}{% if item.attributes is defined and item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %} {{ attribute }}{% if value is defined and value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
-                                {%- if item.prefix is defined and item.prefix -%}<span class="ons-u-vh">{{- item.prefix -}}</span>{%- endif -%} {{- itemText | safe -}}
-                                {%- if item.target is defined and item.target == "_blank" -%}<span class="ons-u-vh"> ({{- item.screenreaderMessage | default("opens in a new tab") -}})</span>{%- endif -%}
+                            <a href="{{ item.url }}" class="ons-list__link{% if item.variants == 'inPageLink' %} ons-js-inpagelink{% endif %}{% if item.classes %} {{ item.classes }}{% endif %}"{% if item.target %} target="{{ item.target }}"{% endif %}{% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %} {{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
+                                {%- if item.prefix -%}<span class="ons-u-vh">{{- item.prefix -}}</span>{%- endif -%} {{- itemText | safe -}}
+                                {%- if item.target == "_blank" -%}<span class="ons-u-vh"> ({{- item.screenreaderMessage | default("opens in a new tab") -}})</span>{%- endif -%}
                             </a>
                         {%- endif -%}
                     {%- else -%}
                         {{- itemText | safe -}}
                     {%- endif -%}
-                    {%- if item.suffix is defined and item.suffix or (params.iconPosition is defined and params.iconPosition == 'after') -%}
+                    {%- if item.suffix or (params.iconPosition == 'after') -%}
                         <span class="ons-list__suffix"{% if listEl != 'ol' %} aria-hidden="true"{% endif %}>
-                        {%- if item.suffix is defined and item.suffix -%}
+                        {%- if item.suffix -%}
                             {{- item.suffix -}}
-                        {%- elif (item.index is defined and item.index and listEl != 'ol') or (item.index is defined and item.index and listEl == 'ol' and 'bare' in variants) -%}
+                        {%- elif (item.index and listEl != 'ol') or (item.index and listEl == 'ol' and 'bare' in variants) -%}
                             {{- loop.index -}}
-                        {% elif params.iconPosition is defined and params.iconPosition == 'after' %}
+                        {% elif params.iconPosition == 'after' %}
                             {% from "components/icons/_macro.njk" import onsIcon %}
                             {{
                                 onsIcon({

package/components/message/_macro.njk

@@ -1,21 +1,21 @@
 {%- macro onsMessage(params) -%}
   <div class="ons-message ons-message--{{ params.type }}">
     <div class="ons-message__head">
-      <dl class="ons-message__metadata" {% if params.id is defined and params.id %} id="{{ params.id }}"{% endif %} {% if params.name is defined and params.name %} name="{{ params.name }}"{% endif %}>
+      <dl class="ons-message__metadata" {% if params.id %} id="{{ params.id }}"{% endif %} {% if params.name %} name="{{ params.name }}"{% endif %}>
         <div class="ons-message__sender">
           <dt class="ons-message__term ons-u-fw-b">{{ params.fromLabel }}:</dt>
-          <dd class="ons-message__value ons-u-fw-b" {% if params.fromId is defined and params.fromId %} id="{{ params.fromId }}"{% endif %} {% if params.fromName is defined and params.fromName %} name="{{ params.fromName }}"{% endif %}>{{ params.fromValue }}</dd>
+          <dd class="ons-message__value ons-u-fw-b" {% if params.fromId %} id="{{ params.fromId }}"{% endif %} {% if params.fromName %} name="{{ params.fromName }}"{% endif %}>{{ params.fromValue }}</dd>
         </div>
         <div class="ons-message__timestamp">
           <dt class="ons-message__term ons-u-fs-s">{{ params.sentLabel }}:</dt>
-          <dd class="ons-message__value ons-u-fs-s" {% if params.sentId is defined and params.sentId %} id="{{ params.sentId }}"{% endif %} {% if params.sentName is defined and params.sentName %} name="{{ params.sentName }}"{% endif %}>{{ params.sentValue }}</dd>
+          <dd class="ons-message__value ons-u-fs-s" {% if params.sentId %} id="{{ params.sentId }}"{% endif %} {% if params.sentName %} name="{{ params.sentName }}"{% endif %}>{{ params.sentValue }}</dd>
         </div>
       </dl>
-      {% if params.unreadLink is defined and params.unreadLink %}
-          <a class="ons-message__unread-link" {% if params.unreadLinkId is defined and params.unreadLinkId %}id="{{ params.unreadLinkId }}"{% endif %} href="{{ params.unreadLink }}">{{ params.unreadLinkText }}</a>
+      {% if params.unreadLink %}
+          <a class="ons-message__unread-link" {% if params.unreadLinkId %}id="{{ params.unreadLinkId }}"{% endif %} href="{{ params.unreadLink }}">{{ params.unreadLinkText }}</a>
       {% endif %}
     </div>
-    <div class="ons-message__body" {% if params.messageID is defined and params.messageID %} id="{{ params.messageID }}"{% endif %} {% if params.messageName is defined and params.messageName %} name="{{ params.messageName }}"{% endif %}>
+    <div class="ons-message__body" {% if params.messageID %} id="{{ params.messageID }}"{% endif %} {% if params.messageName %} name="{{ params.messageName }}"{% endif %}>
       {{ caller() }}
     </div>
   </div>

package/components/message-list/_macro.njk

@@ -4,7 +4,7 @@
     <li class="ons-message-item" aria-labelledby="{{ message.id }}">
       <h3 class="ons-message-item__subject" id="{{ message.id }}">
         <a href="{{ message.url }}" class="ons-u-fs-r--b">{{ message.subject }}</a>
-        {% if message.unread is defined and message.unread %}<span class="ons-message-item__unread ons-u-fs-s">({{ params.unreadText }})</span>{% endif %}
+        {% if message.unread %}<span class="ons-message-item__unread ons-u-fs-s">({{ params.unreadText }})</span>{% endif %}
       </h3>
       <dl class="ons-message-item__metadata" aria-label="{{ params.ariaLabelMetaData | default("Message metadata") }}">
         <dt class="ons-message-item__metadata-term ons-message-item__metadata-term--from ons-u-vh">{{ params.fromLabel }}:</dt>

package/components/metadata/_macro.njk

@@ -1,12 +1,12 @@
 {% macro onsMetadata(params) %}
-  <dl class="ons-metadata ons-metadata__list ons-grid ons-grid--gutterless ons-u-cf{{ (' ' + params.classes) if params.classes is defined and params.classes }}"{% if params.id is defined and params.id %} id="{{ params.id }}" {% endif %}{% if params.metadataLabel is defined and params.metadataLabel %} title="{{ params.metadataLabel }}" aria-label="{{ params.metadataLabel }}"{% endif %}>
+  <dl class="ons-metadata ons-metadata__list ons-grid ons-grid--gutterless ons-u-cf{{ (' ' + params.classes) if params.classes }}"{% if params.id %} id="{{ params.id }}" {% endif %}{% if params.metadataLabel %} title="{{ params.metadataLabel }}" aria-label="{{ params.metadataLabel }}"{% endif %}>
     {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) %}
       {% if item.term | length %}
           <dt class="ons-metadata__term ons-grid__col ons-col-{{ params.termCol }}@m">{{ item.term }}</dt>
       {% endif %}
         {% for description in item.descriptions %}
           {% if description.description | length %}
-            <dd {% if description.id is defined and description.id %}id="{{ description.id }}" {% endif %}class="ons-metadata__value ons-grid__col ons-col-{{ params.descriptionCol }}@m">{{ description.description }}</dd>
+            <dd {% if description.id %}id="{{ description.id }}" {% endif %}class="ons-metadata__value ons-grid__col ons-col-{{ params.descriptionCol }}@m">{{ description.description }}</dd>
           {% endif %}
         {% endfor %}
     {% endfor %}

package/components/modal/_macro.njk

@@ -1,19 +1,19 @@
 {% macro onsModal(params) %}
     {% set modalId = params.id | default('dialog') %}
-    <dialog class="ons-modal ons-js-modal {{ params.classes if params.classes is defined and params.classes else '' }}"
+    <dialog class="ons-modal ons-js-modal {{ params.classes if params.classes else '' }}"
         id="{{ modalId }}"
         role="dialog"
         aria-labelledby="ons-modal-title"
-        {% if params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}
+        {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}
     >
         <div class="ons-modal__content">
             <h2 id="ons-modal-title" class="ons-modal__title">
                 {{ params.title }}
             </h2>
             <div class="ons-modal__body">
-                {{ (params.body if params.body is defined and params.body else "") | safe }}{{ caller() if caller }}
+                {{ (params.body if params.body else "") | safe }}{{ caller() if caller }}
             </div>
-            {% if params.btnText is defined and params.btnText %}
+            {% if params.btnText %}
                 {% from "components/button/_macro.njk" import onsButton %}
                 {{ onsButton({
                     "text": params.btnText,

package/components/mutually-exclusive/_macro.njk

@@ -21,7 +21,7 @@
     }) %}
         <div class="ons-js-mutually-exclusive ons-mutually-exclusive">
             {{ content | safe }}
-            {% if params.autosuggestResults is defined and params.autosuggestResults %}
+            {% if params.autosuggestResults %}
                 {{ params.autosuggestResults | safe }}
             {% endif %}
             {% if exclusiveOptionsLength == 1 %}

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

@@ -106,8 +106,10 @@ export default class MutuallyExclusive {
     let labelText;
 
     if (label) {
-      if (label.classList.contains(inputAbbrClass)) {
+      if (label.classList.contains(inputAbbrClass) && label.querySelector('abbr')) {
         labelText = label.getAttribute('title');
+      } else if (label.classList.contains(inputAbbrClass) && label.querySelector('span')) {
+        labelText = label.querySelector('span').innerText;
       } else if (label.classList.contains(inputLegendClass) && label.querySelector('h1')) {
         labelText = label.querySelector('h1').innerText;
       } else {

package/components/navigation/_macro.njk

@@ -3,7 +3,7 @@
     {% from "components/autosuggest/_macro.njk" import onsAutosuggest %}
     <div class="ons-navigation-wrapper{% if params.variants == 'neutral' %} ons-navigation-wrapper--neutral{% endif %}">
         <div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.fullWidth or params.navigation.fullWidth }}{{ ' ons-container--wide' if params.wide or params.navigation.wide }}">
-            {% if params.navigation.siteSearchAutosuggest is defined and params.navigation.siteSearchAutosuggest and isPatternLib is defined and isPatternLib %}
+            {% if params.navigation.siteSearchAutosuggest and isPatternLib %}
                 <div class="ons-navigation-search ons-js-navigation-search">
                     {% set autosuggestClasses = "ons-input-search ons-input-search--icon" %}
                     {% set autosuggestLabelClasses = "ons-u-pl-m" %}
@@ -42,30 +42,31 @@
                 <ul class="ons-navigation__list">
                     {% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
                         <li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.currentPath) or (item.url != (params.navigation.siteBasePath | default('/')) and item.url in params.navigation.currentPath) }}">
-                            <a class="ons-navigation__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}{% if item.ariaLabel is defined and item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %}>{{ item.title }}</a>
+                            <a class="ons-navigation__link" href="{{ item.url }}" {% if item.id %}id="{{ item.id }}" {% endif %}{% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %}>{{ item.title }}</a>
                         </li>
                     {% endfor %}
                 </ul>
             </nav>
         </div>
     </div>
-    {% if params.navigation.subNavigation is defined and params.navigation.subNavigation %}
-        <nav class="ons-navigation ons-navigation--sub ons-u-d-no@xxs@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes is defined and params.navigation.subNavigation.classes }}" id="{{ params.navigation.subNavigation.id }}" aria-label="{{ params.navigation.subNavigation.ariaLabel | default("Section menu") }}" data-analytics="header-section-navigation">
+    {% if params.navigation.subNavigation %}
+        <nav class="ons-navigation ons-navigation--sub ons-u-d-no@xxs@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes }}" id="{{ params.navigation.subNavigation.id }}" aria-label="{{ params.navigation.subNavigation.ariaLabel | default("Section menu") }}" data-analytics="header-section-navigation">
             <div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.navigation.fullWidth }}{{ ' ons-container--wide' if params.navigation.wide }}">
                 <ul class="ons-navigation__list ons-navigation__list">
                     {% for item in (params.navigation.subNavigation.itemsList if params.navigation.subNavigation.itemsList is iterable else params.navigation.subNavigation.itemsList.items()) %}
                         <li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.subNavigation.currentPath) or (item.url != (params.navigation.subNavigation.siteBasePath | default('/')) and item.url in params.navigation.subNavigation.currentPath) }}">
-                            <a class="ons-navigation__link ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel is defined and item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
+                            <a class="ons-navigation__link ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
                         </li>
                     {% endfor %}
                 </ul>
             </div>
         </nav>
-        <div class="ons-u-d-no@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes is defined and params.navigation.subNavigation.classes }}">
+        <div class="ons-u-d-no@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes }}">
             {{ onsButton({
                 "text": params.navigation.currentPageTitle,
-                "classes": "ons-u-d-no ons-js-sub-navigation-button ons-btn--dropdown",
-                "buttonStyle": "mobile",
+                "classes": "ons-u-d-no ons-js-sub-navigation-button",
+                "type": "button",
+                "variants": ["mobile", "dropdown"],
                 "attributes": {
                     "aria-label": "Toggle section navigation",
                     "aria-controls": params.navigation.subNavigation.id,
@@ -80,14 +81,14 @@
                         </li>
                         {% for item in (params.navigation.subNavigation.itemsList if params.navigation.subNavigation.itemsList is iterable else params.navigation.subNavigation.itemsList.items()) %}
                             <li class="ons-navigation__item {{ ' ons-navigation__item--active' if (item.url == params.navigation.subNavigation.currentPath) or (item.url != (params.navigation.subNavigation.siteBasePath | default('/')) and item.url in params.navigation.subNavigation.currentPath) }}">
-                                <a class="ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel is defined and item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id is defined and item.id %}id="{{ item.id }}--mobile" {% endif %}>{{ item.title }}</a>
+                                <a class="ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id %}id="{{ item.id }}--mobile" {% endif %}>{{ item.title }}</a>
                                 {% if item.sections %}
                                     {% for section in item.sections %}
                                         {% if section.sectionTitle %}<h3 class="ons-navigation__list-header">{{ section.sectionTitle }}</h3>{% endif %}
                                         <ul class="ons-navigation__list ons-navigation__list--child ons-list--dashed ons-u-ml-s ons-u-mt-xs">
                                             {% for child in section.children %}
                                                 <li class="ons-navigation__item ons-list__item {{ ' ons-navigation__item--active' if (child.url == params.navigation.subNavigation.currentPath) or (child.url != (params.navigation.subNavigation.sitsiteBasePatheBasePath | default('/')) and child.url in params.navigation.subNavigation.currentPath) }}">
-                                                    <a class="ons-navigation__link ons-navigation__link--section" href="{{ child.url }}" {% if child.ariaLabel is defined and child.ariaLabel %}aria-label="{{ child.ariaLabel }}" {% endif %} {% if child.id is defined and child.id %}id="{{ child.id }}" {% endif %}>{{ child.title }}</a>
+                                                    <a class="ons-navigation__link ons-navigation__link--section" href="{{ child.url }}" {% if child.ariaLabel %}aria-label="{{ child.ariaLabel }}" {% endif %} {% if child.id %}id="{{ child.id }}" {% endif %}>{{ child.title }}</a>
                                                 </li>
                                             {% endfor %}
                                         </ul>

package/components/navigation/_macro.spec.js

@@ -206,8 +206,9 @@ describe('macro: navigation', () => {
 
       expect(buttonSpy.occurrences).toContainEqual({
         text: 'Main nav item 2',
-        classes: 'ons-u-d-no ons-js-sub-navigation-button ons-btn--dropdown',
-        buttonStyle: 'mobile',
+        classes: 'ons-u-d-no ons-js-sub-navigation-button',
+        variants: ['mobile', 'dropdown'],
+        type: 'button',
         attributes: {
           'aria-label': 'Toggle section navigation',
           'aria-controls': 'sub-nav',

package/components/pagination/_macro.njk

@@ -1,7 +1,7 @@
 {% macro onsPagination(params) %}
   {% set currentPageIndex = "" %}
   {% for page in params.pages %}
-      {% if page.current is defined and page.current %}
+      {% if page.current %}
           {% set currentPageIndex = loop.index %}
       {% endif %}
   {% endfor %}
@@ -25,7 +25,7 @@
   {% endif %}
 
 
-  <nav class="ons-pagination {{ params.classes }}{% if params.hideRangeIndicator is defined and params.hideRangeIndicator %} ons-pagination--no-indicator{% endif %}" aria-label="Pagination ({{ position }})">
+  <nav class="ons-pagination {{ params.classes }}{% if params.hideRangeIndicator %} ons-pagination--no-indicator{% endif %}" aria-label="Pagination ({{ position }})">
       <div class="ons-pagination__position">{{ position }}</div>
       <ul class="ons-pagination__items">
           {% if currentPageIndex != 1 %}
@@ -45,7 +45,7 @@
           {% endif %}
           {% for page in params.pages %}
               {% if loop.index >= middlePagesStart and loop.index <= middlePagesEnd %}
-                  <li class="ons-pagination__item{% if page.current is defined and page.current == true %} ons-pagination__item--current{% endif %}">
+                  <li class="ons-pagination__item{% if page.current == true %} ons-pagination__item--current{% endif %}">
                       <a href="{{ page.url }}" class="ons-pagination__link"
                           {%- if page.current -%}
                               aria-current="true" aria-label="Current page ({{ position }})"