@ons/design-system 54.0.1 → 55.2.0

package/components/input/_macro.njk

@@ -11,9 +11,9 @@
         {% set type = "text" %}
         {% set pattern = "[0-9]*" %}
         {% set inputmode = "numeric" %}
-    {% elif params.type is defined and params.type %}
+    {% elif params.type %}
         {% set type = params.type %}
-    {% elif params.searchButton is defined and params.searchButton %}
+    {% elif params.searchButton %}
         {% set type = "search" %}
     {% else %}
         {% set type = "text" %}
@@ -26,24 +26,24 @@
         <input
             type="{{ type }}"
             id="{{ params.id }}"
-            class="ons-input ons-input--text ons-input-type__input{% if params.error is defined and params.error %} ons-input--error{% endif %}{% if params.searchButton is defined and params.searchButton %} ons-search__input{% endif %}{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}{% if params.width is defined and params.width %} ons-input{% if params.type is defined and (params.type == 'number' or params.type == 'tel') %}-number{% endif %}--w-{{ params.width }}{% endif %}{{ exclusiveClass }}{{ inputPlaceholder }}"
-            {% if params.prefix is defined and params.prefix and params.prefix.id is defined and params.prefix.id %}aria-labelledby="{{ params.prefix.id }}"{% elif params.suffix is defined and params.suffix and params.suffix.id is defined and params.suffix.id %}aria-labelledby="{{ params.suffix.id }}"{% endif %}
-            {% if params.name is defined and params.name %}name="{{ params.name }}"{% endif %}
-            {% if params.value is defined and params.value %}value="{{ params.value }}"{% endif %}
-            {% if params.accept is defined and params.accept %}accept="{{ params.accept }}"{% endif %}
-            {% if params.min is defined and params.min %}min="{{ params.min }}"{% endif %}
-            {% if params.max is defined and params.max %}max="{{ params.max }}"{% endif %}
-            {% if params.minLength is defined and params.minLength %}minlength="{{ params.minLength }}"{% endif %}
-            {% if params.maxLength is defined and params.maxLength %}maxlength="{{ params.maxLength }}"{% endif %}
-            {% if pattern is defined and pattern %}pattern="{{ pattern }}"{% endif %}
-            {% if inputmode is defined and inputmode %}inputmode="{{ inputmode }}"{% endif %}
-            {% if params.autocomplete is defined and params.autocomplete %}autocomplete="{{ params.autocomplete }}"{% endif %}
-            {% if params.accessiblePlaceholder is defined and params.accessiblePlaceholder %}placeholder="{{ params.label.text }}"{% endif %}
-            {% if params.charCheckLimit is defined and 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 is defined and params.charCheckLimit and params.charCheckLimit.charcheckCountdown is defined and params.charCheckLimit.charcheckCountdown %}data-char-check-countdown="true"{% 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 %}
-            {% if params.label is defined and params.label and params.label.description is defined and params.label.description %}{% if params.label.id is defined and params.label.id %}aria-describedby="{{ params.label.id }}-description-hint"{% else %}aria-describedby="description-hint"{% endif %}{% endif %}
-            {% if params.required is defined and params.required == true %}required="required"{% endif %}
+            class="ons-input ons-input--text ons-input-type__input{% if params.error %} ons-input--error{% endif %}{% if params.searchButton %} ons-search__input{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}{% if params.width %} ons-input{% if params.type == 'number' or params.type == 'tel' %}-number{% endif %}--w-{{ params.width }}{% endif %}{{ exclusiveClass }}{{ inputPlaceholder }}"
+            {% if params.prefix and params.prefix.id %}aria-labelledby="{{ params.prefix.id }}"{% elif params.suffix and params.suffix.id %}aria-labelledby="{{ params.suffix.id }}"{% endif %}
+            {% if params.name %}name="{{ params.name }}"{% endif %}
+            {% if params.value %}value="{{ params.value }}"{% endif %}
+            {% if params.accept %}accept="{{ params.accept }}"{% endif %}
+            {% if params.min %}min="{{ params.min }}"{% endif %}
+            {% if params.max %}max="{{ params.max }}"{% endif %}
+            {% if params.minLength %}minlength="{{ params.minLength }}"{% endif %}
+            {% if params.maxLength %}maxlength="{{ params.maxLength }}"{% endif %}
+            {% if pattern %}pattern="{{ pattern }}"{% endif %}
+            {% 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 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 %}
+            {% if params.required == true %}required="required"{% endif %}
         />
         {% if params.listeners %}
             <script{% if csp_nonce %} nonce="{{ csp_nonce() }}"{% endif %}>
@@ -52,12 +52,12 @@
             {% endfor %}
             </script>
         {% endif %}
-        {% if params.postTextboxLinkText is defined and params.postTextboxLinkText %}
+        {% if params.postTextboxLinkText %}
             <a class="ons-u-fs-s ons-input__post-link" href="{{ params.postTextboxLinkUrl }}">{{ params.postTextboxLinkText }}</a>
         {% endif %}
     {% endset %}
     {% set field %}
-        {% if params.label is defined and params.label and params.label.text is defined and params.label.text %}
+        {% if params.label and params.label.text %}
             {{ onsLabel({
                 "for": params.id,
                 "id": params.label.id,
@@ -70,9 +70,9 @@
             }) }}
         {% endif %}
 
-        {% if params.prefix is defined and params.prefix or params.suffix is defined and params.suffix %}
-            {% if (params.prefix is defined and params.prefix and params.prefix.id is defined and params.prefix.id and params.prefix.title is defined and params.prefix.title) or (params.suffix is defined and params.suffix and params.suffix.id is defined and params.suffix.id and params.suffix.title is defined and params.suffix.title) %}
-                {% if params.prefix is defined and params.prefix %}
+        {% if params.prefix or params.suffix %}
+            {% if (params.prefix and params.prefix.id) or (params.suffix and params.suffix.id) %}
+                {% if params.prefix %}
                     {% set prefixClass = " ons-input-type--prefix" %}
                 {% endif %}
 
@@ -81,15 +81,21 @@
                         {{ input | safe }}
 
                         {% set abbr = params.prefix or params.suffix %}
-                        <abbr
+                        {% if params.prefix.title or params.suffix.title %}
+                            {% set tag = 'abbr' %}
+                        {% else %}
+                            {% set tag = 'span' %}
+                        {% endif %}
+
+                        <{{ tag }}
                             id="{{ abbr.id }}"
                             class="ons-input-type__type ons-js-input-abbr"
-                            title="{{ abbr.title }}"
-                            >{{ abbr.text or abbr.title }}</abbr>
+                            {% if abbr.title %}title="{{ abbr.title }}"{% endif %}
+                            >{{ abbr.text }}</{{ tag }}>
                     </span>
                 </span>
             {% endif %}
-        {% elif params.searchButton is defined and params.searchButton %}
+        {% elif params.searchButton %}
             <span class="ons-grid--flex ons-search">
                 {% call onsSearch({
                     "accessiblePlaceholder": params.accessiblePlaceholder,
@@ -110,7 +116,7 @@
         {% endif %}
     {% endset %}
 
-    {% if params.charCheckLimit is defined and params.charCheckLimit and params.charCheckLimit.limit is defined and params.charCheckLimit.limit %}
+    {% if params.charCheckLimit and params.charCheckLimit.limit %}
         {% set charCheckField %}
             {% call onsCharLimit({
                 "id": params.id ~ "-check",
@@ -126,7 +132,7 @@
         {% endset %}
     {% endif %}
 
-    {% if params.mutuallyExclusive is defined and params.mutuallyExclusive %}
+    {% if params.mutuallyExclusive %}
         {% call onsMutuallyExclusive({
             "id": params.fieldId,
             "legend": params.legend,
@@ -142,7 +148,7 @@
             "error": params.error,
             "autosuggestResults": params.autosuggestResults
         }) %}
-            {% if charCheckField is defined and charCheckField %}
+            {% if charCheckField %}
                 {{ charCheckField | safe }}
             {% else %}
                 {{ field | safe }}
@@ -156,9 +162,9 @@
             "classes": params.fieldClasses,
             "dontWrap": params.dontWrap,
             "error": params.error,
-            "inline": params.label.inline if params.label is defined and params.label else ''
+            "inline": params.label.inline if params.label else ''
         }) %}
-            {% if charCheckField is defined and charCheckField %}
+            {% if charCheckField %}
                 {{ charCheckField | safe }}
             {% else %}
                 {{ field | safe }}

package/components/input/_macro.spec.js

@@ -79,6 +79,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 +381,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 +392,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 +407,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 +445,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 +459,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 +477,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', () => {
@@ -577,6 +560,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 +671,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/_label.scss

@@ -19,7 +19,7 @@
   &--placeholder {
     font-size: 1rem;
     font-weight: $font-weight-regular;
-    left: 8px;
+    left: 10px;
     position: absolute;
     top: 6px;
   }

package/components/label/_macro.njk

@@ -1,32 +1,44 @@
 {% macro onsLabel(params) %}
-    {% set field -%}
-        <span
-          {% if params.id is defined and params.id %} id="{{ params.id }}-description-hint"{% else %}id="description-hint"{% endif %}
-          class="ons-label__description {% if params.inputType is defined and params.inputType %}ons-{{ params.inputType }}__label--with-description{% else %} ons-input--with-description{% endif %}">
+    {% if params.id %}
+        {% set descriptionID = params.id ~ "-description-hint" %}  
+    {% else %}
+        {% set descriptionID = "description-hint" %}  
+    {% endif %}
+
+    {% if params.inputType == "checkbox" or params.inputType == "radio" %}
+        {% set isCheckboxOrRadio = true %}
+    {% else %}
+        {% set isCheckboxOrRadio = false %}
+    {% endif %}
+
+    {% set description -%}
+        <span{% if isCheckboxOrRadio == false %} id="{{ descriptionID }}"{% endif %} class="ons-label__description {% if params.inputType %}ons-{{ params.inputType }}__label--with-description{% else %} ons-input--with-description{% endif %}">
               {{- params.description -}}
         </span>
     {%- endset %}
 
     <label
-        class="{% if params.inputType is not defined -%}ons-label{%- endif %}{{- ' ' + params.classes if params.classes else "" -}}{%- if params.description is defined and params.description %} ons-label--with-description{%- endif %} {{- ' ons-label--placeholder' if params.accessiblePlaceholder else "" -}}"
-        {% if params.for is defined and params.for %} for="{{ params.for }}"{% endif %}
-        {% if params.id is defined and params.id %} id="{{ params.id }}"{% 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 %}
+        class="{% if params.inputType is not defined -%}ons-label{%- endif %}{{- ' ' + params.classes if params.classes else "" -}}{%- if params.description %} ons-label--with-description{%- endif %} {{- ' ons-label--placeholder' if params.accessiblePlaceholder else "" -}}"
+        {% 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 %}="{{ value }}"{% endif %}{% endfor %}{% endif %}
     >
 
         {{- params.text | safe -}}
 
-        {%- if params.inputType is defined and params.inputType -%}
-            {% if params.inputType == "checkbox" or params.inputType == "radio" -%}
-                {%- if params.description is defined and params.description -%}
-                    {{- field | safe -}}
-                {%- endif -%}
+        {%- if isCheckboxOrRadio == true -%}
+            {%- if params.description -%}
+                <span class="ons-label__aria-hidden-description" aria-hidden="true">{{- description | safe -}}</span>
             {%- endif -%}
             </label>
+            {% if isCheckboxOrRadio == true and params.description -%}
+                <span class="ons-label__visually-hidden-description ons-u-vh" id="{{ descriptionID }}">{{- params.description -}}</span>
+            {%- endif -%}
         {%- else -%}
             </label>
-            {%- if params.description is defined and params.description -%}
-                {{- field | safe -}}
+            {%- if params.description -%}
+                {{- description | safe -}}
             {%- endif -%}
         {%- endif %}
 {% endmacro %}

package/components/label/_macro.spec.js

@@ -53,6 +53,12 @@ describe('macro: label', () => {
     expect($('.ons-label').attr('for')).toBe('some-input');
   });
 
+  it('has `aria-describedby` and correct value when description is provided', () => {
+    const $ = cheerio.load(renderComponent('label', EXAMPLE_LABEL_WITH_DESCRIPTION));
+
+    expect($('.ons-label').attr('aria-describedby')).toBe('example-label-description-hint');
+  });
+
   it.each([
     ['`inputType` parameter is not provided', EXAMPLE_LABEL, true],
     ['`inputType` parameter is provided', EXAMPLE_LABEL_WITH_INPUT_TYPE, false],
@@ -185,5 +191,30 @@ describe('macro: label', () => {
       expect($('.ons-label__description').hasClass(expectedInputSpecificModifier)).toBe(true);
       expect($('.ons-label__description').hasClass('ons-input--with-description')).toBe(false);
     });
+
+    it.each([['checkbox'], ['radio']])('has the description in an `aria-hidden` element when "%s" `inputType` is provided', inputType => {
+      const $ = cheerio.load(
+        renderComponent('label', {
+          ...EXAMPLE_LABEL_WITH_DESCRIPTION,
+          inputType,
+        }),
+      );
+
+      expect($('.ons-label__aria-hidden-description').attr('aria-hidden')).toBe('true');
+    });
+
+    it.each([['checkbox'], ['radio']])(
+      'has a duplicate description in a visually hidden element when "%s" `inputType` is provided',
+      inputType => {
+        const $ = cheerio.load(
+          renderComponent('label', {
+            ...EXAMPLE_LABEL_WITH_DESCRIPTION,
+            inputType,
+          }),
+        );
+
+        expect($('.ons-label__visually-hidden-description').hasClass('ons-u-vh')).toBe(true);
+      },
+    );
   });
 });

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("this link will open 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/lists/_macro.spec.js

@@ -331,7 +331,7 @@ describe('macro: lists', () => {
           }),
         );
 
-        expect($('.ons-list__link .ons-u-vh').text()).toBe('opens in a new tab');
+        expect($('.ons-list__link .ons-u-vh').text()).toBe(' (opens in a new tab)');
       });
 
       it('renders a default visually hidden screen reader message when target is "_blank"', () => {
@@ -347,7 +347,7 @@ describe('macro: lists', () => {
           }),
         );
 
-        expect($('.ons-list__link .ons-u-vh').text()).toBe('this link will open in a new tab');
+        expect($('.ons-list__link .ons-u-vh').text()).toBe(' (opens in a new tab)');
       });
 
       it('has additionally provided `attributes`', () => {

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>