@ons/design-system 54.0.1 → 55.0.0

package/components/button/_button.scss

@@ -63,8 +63,11 @@ $button-shadow-size: 3px;
   }
 
   // When focused
-  &:focus & {
+  &:focus,
+  &:focus-visible {
+    // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
     outline: 3px solid transparent;
+    outline-offset: 1px;
   }
 
   &:focus &__inner {
@@ -91,11 +94,6 @@ $button-shadow-size: 3px;
     top: ems($button-shadow-size);
   }
 
-  &:focus,
-  &:focus:hover {
-    outline: none;
-  }
-
   // Small buttons
   &--small,
   &--mobile {
@@ -170,6 +168,8 @@ $button-shadow-size: 3px;
 
   &--link:focus:not(:active):not(&--secondary) &,
   &--link:focus:hover:not(:active):not(&--secondary) & {
+    outline: inherit;
+
     &__inner {
       .ons-svg-icon {
         fill: $color-text;
@@ -480,3 +480,17 @@ $button-shadow-size: 3px;
     }
   }
 }
+
+.ons-btn-group {
+  @extend .ons-u-mb-m;
+
+  align-items: baseline;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  & .ons-btn,
+  & a {
+    margin: 0 1rem 1rem 0;
+  }
+}

package/components/button/_macro.njk

@@ -86,7 +86,7 @@
             {% endif -%}
         </span>
         {% if params.url is defined and params.url and params.newWindow is defined and params.newWindow %}
-            <span class="ons-btn__new-window-description ons-u-vh">({{ params.newWindowDescription | default("opens in a new tab") }})</span>
+            <span class="ons-btn__new-window-description ons-u-vh"> ({{ params.newWindowDescription | default("opens in a new tab") }})</span>
         {% endif %}
         {% if params.buttonContext is defined and params.buttonContext %}
             <span class="ons-btn__context ons-u-vh">{{ params.buttonContext }}</span>

package/components/button/_macro.spec.js

@@ -407,7 +407,7 @@ describe('macro: button', () => {
         }),
       );
 
-      expect($('.ons-btn__new-window-description').text()).toBe('(opens in a new tab)');
+      expect($('.ons-btn__new-window-description').text()).toBe(' (opens in a new tab)');
     });
 
     it('has a custom new window description when `newWindow` is `true` and `newWindowDescription` is provided', () => {
@@ -419,7 +419,7 @@ describe('macro: button', () => {
         }),
       );
 
-      expect($('.ons-btn__new-window-description').text()).toBe('(custom opens in a new window text)');
+      expect($('.ons-btn__new-window-description').text()).toBe(' (custom opens in a new window text)');
     });
 
     it('has the `download` attribute when `buttonStyle` is "download"', () => {

package/components/checkboxes/_checkbox.scss

@@ -9,12 +9,11 @@ $checkbox-padding: 11px;
 
   &__input {
     appearance: none;
-    background: url(#{$static}/img/icons--check.svg) no-repeat center center;
     background-color: $color-input-bg;
-    background-size: 0;
     border: 2px solid $color-input-border;
     border-radius: 0.2rem;
     box-sizing: border-box;
+    cursor: pointer;
     height: $checkbox-input-width;
     left: $checkbox-padding;
     position: absolute;
@@ -22,13 +21,30 @@ $checkbox-padding: 11px;
     width: $checkbox-input-width;
     z-index: 1;
 
+    // Check icon
+    &::after {
+      border: solid $color-input-border;
+      border-radius: 1px;
+      border-top-color: $color-input-bg;
+      border-width: 0 0 3px 3px;
+      box-sizing: border-box;
+      content: '';
+      height: 7px;
+      left: 2px;
+      opacity: 0;
+      position: absolute;
+      top: 4px;
+      transform: rotate(-45deg);
+      width: 14px;
+    }
+
     &:focus,
     &:checked {
       outline: none;
     }
 
-    &:checked {
-      background-size: 14px;
+    &:checked::after {
+      opacity: 1;
     }
 
     &:disabled {
@@ -36,9 +52,24 @@ $checkbox-padding: 11px;
       cursor: not-allowed;
     }
 
-    &:disabled + label {
-      color: $color-grey-35;
+    &:disabled:checked::after {
+      border-color: $color-border-disabled;
+    }
+
+    &:disabled + .ons-checkbox__label,
+    &:disabled:checked + .ons-checkbox__label {
+      color: $color-border-disabled;
       cursor: not-allowed;
+
+      &::before {
+        border: 1px solid $color-border-disabled;
+      }
+    }
+
+    &:disabled:checked + .ons-checkbox__label {
+      &::before {
+        box-shadow: 0 0 0 1px $color-border-disabled;
+      }
     }
   }
 
@@ -47,9 +78,9 @@ $checkbox-padding: 11px;
       padding: 0 0 0 1.85rem;
 
       &::before {
-        background: none;
-        border: none;
-        box-shadow: none;
+        background: none !important;
+        border: none !important;
+        box-shadow: none !important;
       }
 
       & > .ons-checkbox__label--with-description {
@@ -69,6 +100,7 @@ $checkbox-padding: 11px;
           background: none;
           border: none;
           box-shadow: none;
+          outline: none;
         }
       }
 
@@ -153,6 +185,7 @@ $checkbox-padding: 11px;
   &__input:checked + &__label::before {
     background: $color-grey-5;
     box-shadow: 0 0 0 1px $color-input-border;
+    outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
   }
 
   .ons-panel--error .ons-radio__input:checked ~ &__other > .ons-input--text:required:not(:focus) {
@@ -176,7 +209,7 @@ $checkbox-padding: 11px;
   &--toggle & {
     &__input {
       left: 0;
-      top: 0.1rem;
+      top: 0.2rem;
 
       &:focus {
         @extend %ons-input-focus;

package/components/collapsible/_collapsible.scss

@@ -10,7 +10,8 @@ $collapsible-caret-width: 1.5rem;
     pointer-events: initial;
     position: relative;
 
-    &::marker {
+    &::marker,
+    &::-webkit-details-marker {
       display: none;
     }
 

package/components/document-list/document-list.scss

@@ -120,6 +120,8 @@
       background-color: $color-banner-bg;
       border-bottom: none;
       display: block;
+      outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
+      outline-offset: -2px;
       padding: 2rem;
 
       @include mq(m) {

package/components/download-resources/download-resources.js

@@ -1061,9 +1061,28 @@ Math.easeInOutQuad = function(t, b, c, d) {
 
     // Toggle filters visibility on small devices
     function toggleFilters(bool) {
+      let resultsOptions = document.getElementsByClassName('ons-adv-filter__results-options')[0];
+      let resultsList = document.getElementsByClassName('ons-js-adv-filter__gallery')[0];
+      let header = document.getElementsByClassName('ons-header')[0];
+      let breadcrumbs = document.getElementsByClassName('ons-breadcrumb')[0];
+      let footer = document.getElementsByClassName('ons-footer')[0];
+
       Util.toggleClass(filtersPanel, 'ons-adv-filter__panel--is-visible', bool);
       Util.toggleClass(body, 'ons-no-scroll', bool);
       filtersTrigger.setAttribute('aria-expanded', bool);
+      filtersTrigger.setAttribute('aria-hidden', bool);
+      Util.toggleClass(filtersTrigger, 'ons-u-d-no', bool);
+
+      Util.toggleClass(resultsOptions, 'ons-u-d-no', bool);
+      Util.toggleClass(resultsList, 'ons-u-d-no', bool);
+      Util.toggleClass(header, 'ons-u-d-no', bool);
+      Util.toggleClass(breadcrumbs, 'ons-u-d-no', bool);
+      Util.toggleClass(footer, 'ons-u-d-no', bool);
+      resultsOptions.setAttribute('aria-hidden', bool);
+      resultsList.setAttribute('aria-hidden', bool);
+      header.setAttribute('aria-hidden', bool);
+      breadcrumbs.setAttribute('aria-hidden', bool);
+      footer.setAttribute('aria-hidden', bool);
     }
   }
 })();

package/components/download-resources/download-resources.spec.js

@@ -4,6 +4,20 @@ import { setViewport } from '../../tests/helpers/puppeteer';
 import { renderComponent, renderTemplate, setTestPage } from '../../tests/helpers/rendering';
 
 const EXAMPLE_PAGE = `
+  ${renderComponent('header', {})}
+  ${renderComponent('breadcrumbs', {
+    ariaLabel: 'Breadcrumbs',
+    itemsList: [
+      {
+        url: '/',
+        text: 'Home',
+      },
+      {
+        url: '/components',
+        text: 'Components',
+      },
+    ],
+  })}
   <div class="ons-js-adv-filter">
     ${renderComponent('button', {
       type: 'button',
@@ -175,6 +189,7 @@ const EXAMPLE_PAGE = `
       <p>Try selecting different filters to get results.</p>
     </div>
   </div>
+  ${renderComponent('footer', {})}
 `;
 
 const RENDERED_EXAMPLE_PAGE = renderTemplate(EXAMPLE_PAGE);
@@ -505,6 +520,32 @@ describe('script: download-resources', () => {
       expect(displayStyle).not.toBe('none');
     });
 
+    it('hides the underlying page elements when the "Show filters" button is pressed', async () => {
+      await page.click('.ons-js-adv-filter__trigger');
+
+      const isListHiddenClass = await page.$eval('.ons-js-adv-filter__gallery', node => node.classList.contains('ons-u-d-no'));
+      const isListAriaHidden = await page.$eval('.ons-js-adv-filter__gallery', node => node.getAttribute('aria-hidden'));
+      const isOptionsHiddenClass = await page.$eval('.ons-adv-filter__results-options', node => node.classList.contains('ons-u-d-no'));
+      const isOptionsAriaHidden = await page.$eval('.ons-adv-filter__results-options', node => node.getAttribute('aria-hidden'));
+      const isHeaderHiddenClass = await page.$eval('.ons-header', node => node.classList.contains('ons-u-d-no'));
+      const isHeaderAriaHidden = await page.$eval('.ons-header', node => node.getAttribute('aria-hidden'));
+      const isFooterHiddenClass = await page.$eval('.ons-footer', node => node.classList.contains('ons-u-d-no'));
+      const isFooterAriaHidden = await page.$eval('.ons-footer', node => node.getAttribute('aria-hidden'));
+      const isBreadcrumbsHiddenClass = await page.$eval('.ons-breadcrumb', node => node.classList.contains('ons-u-d-no'));
+      const isBreadcrumbsAriaHidden = await page.$eval('.ons-breadcrumb', node => node.getAttribute('aria-hidden'));
+
+      expect(isListHiddenClass).toBe(true);
+      expect(isListAriaHidden).toBe('true');
+      expect(isOptionsHiddenClass).toBe(true);
+      expect(isOptionsAriaHidden).toBe('true');
+      expect(isHeaderHiddenClass).toBe(true);
+      expect(isHeaderAriaHidden).toBe('true');
+      expect(isFooterHiddenClass).toBe(true);
+      expect(isFooterAriaHidden).toBe('true');
+      expect(isBreadcrumbsHiddenClass).toBe(true);
+      expect(isBreadcrumbsAriaHidden).toBe('true');
+    });
+
     it('hides filter elements when the "Show (n results)" button is pressed', async () => {
       await page.click('.ons-js-adv-filter__trigger');
       await page.click('.ons-js-adv-filter__show');
@@ -513,6 +554,33 @@ describe('script: download-resources', () => {
       expect(displayStyle).toBe('none');
     });
 
+    it('shows the underlying page elements when the "Show (n results)" button is pressed', async () => {
+      await page.click('.ons-js-adv-filter__trigger');
+      await page.click('.ons-js-adv-filter__show');
+
+      const isListHiddenClass = await page.$eval('.ons-js-adv-filter__gallery', node => node.classList.contains('ons-u-d-no'));
+      const isListAriaHidden = await page.$eval('.ons-js-adv-filter__gallery', node => node.getAttribute('aria-hidden'));
+      const isOptionsHiddenClass = await page.$eval('.ons-adv-filter__results-options', node => node.classList.contains('ons-u-d-no'));
+      const isOptionsAriaHidden = await page.$eval('.ons-adv-filter__results-options', node => node.getAttribute('aria-hidden'));
+      const isHeaderHiddenClass = await page.$eval('.ons-header', node => node.classList.contains('ons-u-d-no'));
+      const isHeaderAriaHidden = await page.$eval('.ons-header', node => node.getAttribute('aria-hidden'));
+      const isFooterHiddenClass = await page.$eval('.ons-footer', node => node.classList.contains('ons-u-d-no'));
+      const isFooterAriaHidden = await page.$eval('.ons-footer', node => node.getAttribute('aria-hidden'));
+      const isBreadcrumbsHiddenClass = await page.$eval('.ons-breadcrumb', node => node.classList.contains('ons-u-d-no'));
+      const isBreadcrumbsAriaHidden = await page.$eval('.ons-breadcrumb', node => node.getAttribute('aria-hidden'));
+
+      expect(isListHiddenClass).toBe(false);
+      expect(isListAriaHidden).toBe('false');
+      expect(isOptionsHiddenClass).toBe(false);
+      expect(isOptionsAriaHidden).toBe('false');
+      expect(isHeaderHiddenClass).toBe(false);
+      expect(isHeaderAriaHidden).toBe('false');
+      expect(isFooterHiddenClass).toBe(false);
+      expect(isFooterAriaHidden).toBe('false');
+      expect(isBreadcrumbsHiddenClass).toBe(false);
+      expect(isBreadcrumbsAriaHidden).toBe('false');
+    });
+
     it('hides filter elements when the "Close" button is pressed', async () => {
       await page.click('.ons-js-adv-filter__trigger');
       await page.click('.ons-js-adv-filter__close');
@@ -520,6 +588,33 @@ describe('script: download-resources', () => {
       const displayStyle = await page.$eval('.ons-adv-filter__panel', node => getComputedStyle(node).display);
       expect(displayStyle).toBe('none');
     });
+
+    it('shows the underlying page elements when the "Close" button is pressed', async () => {
+      await page.click('.ons-js-adv-filter__trigger');
+      await page.click('.ons-js-adv-filter__close');
+
+      const isListHiddenClass = await page.$eval('.ons-js-adv-filter__gallery', node => node.classList.contains('ons-u-d-no'));
+      const isListAriaHidden = await page.$eval('.ons-js-adv-filter__gallery', node => node.getAttribute('aria-hidden'));
+      const isOptionsHiddenClass = await page.$eval('.ons-adv-filter__results-options', node => node.classList.contains('ons-u-d-no'));
+      const isOptionsAriaHidden = await page.$eval('.ons-adv-filter__results-options', node => node.getAttribute('aria-hidden'));
+      const isHeaderHiddenClass = await page.$eval('.ons-header', node => node.classList.contains('ons-u-d-no'));
+      const isHeaderAriaHidden = await page.$eval('.ons-header', node => node.getAttribute('aria-hidden'));
+      const isFooterHiddenClass = await page.$eval('.ons-footer', node => node.classList.contains('ons-u-d-no'));
+      const isFooterAriaHidden = await page.$eval('.ons-footer', node => node.getAttribute('aria-hidden'));
+      const isBreadcrumbsHiddenClass = await page.$eval('.ons-breadcrumb', node => node.classList.contains('ons-u-d-no'));
+      const isBreadcrumbsAriaHidden = await page.$eval('.ons-breadcrumb', node => node.getAttribute('aria-hidden'));
+
+      expect(isListHiddenClass).toBe(false);
+      expect(isListAriaHidden).toBe('false');
+      expect(isOptionsHiddenClass).toBe(false);
+      expect(isOptionsAriaHidden).toBe('false');
+      expect(isHeaderHiddenClass).toBe(false);
+      expect(isHeaderAriaHidden).toBe('false');
+      expect(isFooterHiddenClass).toBe(false);
+      expect(isFooterAriaHidden).toBe('false');
+      expect(isBreadcrumbsHiddenClass).toBe(false);
+      expect(isBreadcrumbsAriaHidden).toBe('false');
+    });
   });
 });
 

package/components/external-link/_macro.njk

@@ -6,5 +6,5 @@
         </span><span class="ons-external-link__icon">&nbsp;<svg class="ons-svg-icon" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
         <path d="M13.5,9H13a.5.5,0,0,0-.5.5v3h-9v-9h3A.5.5,0,0,0,7,3V2.5A.5.5,0,0,0,6.5,2h-4a.5.5,0,0,0-.5.5v11a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5v-4A.5.5,0,0,0,13.5,9Z" transform="translate(-2 -1.99)"/>
         <path d="M8.83,7.88a.51.51,0,0,0,.71,0l2.31-2.32,1.28,1.28A.51.51,0,0,0,14,6.49v-4a.52.52,0,0,0-.5-.5h-4A.51.51,0,0,0,9,2.52a.58.58,0,0,0,.14.33l1.28,1.28L8.12,6.46a.51.51,0,0,0,0,.71Z" transform="translate(-2 -1.99)"/>
-    </svg></span><span class="ons-external-link__new-window-description ons-u-vh">({{- params.newWindowDescription | default("opens in a new tab") -}})</span></a>
+    </svg></span><span class="ons-external-link__new-window-description ons-u-vh"> ({{- params.newWindowDescription | default("opens in a new tab") -}})</span></a>
 {% endmacro %}

package/components/external-link/_macro.spec.js

@@ -54,7 +54,7 @@ describe('macro: external-link', () => {
   it('has a default new window description', async () => {
     const $ = cheerio.load(renderComponent('external-link', EXAMPLE_EXTERNAL_LINK));
 
-    expect($('.ons-external-link__new-window-description').text()).toBe('(opens in a new tab)');
+    expect($('.ons-external-link__new-window-description').text()).toBe(' (opens in a new tab)');
   });
 
   it('has a custom new window description when `newWindowDescription` is provided', () => {
@@ -65,7 +65,7 @@ describe('macro: external-link', () => {
       }),
     );
 
-    expect($('.ons-external-link__new-window-description').text()).toBe('(custom opens in a new tab text)');
+    expect($('.ons-external-link__new-window-description').text()).toBe(' (custom opens in a new tab text)');
   });
 
   it('has an "external-link" icon', async () => {

package/components/fieldset/_fieldset.scss

@@ -1,11 +1,21 @@
 .ons-fieldset {
   &__legend {
     font-weight: $font-weight-bold;
-    margin: 0 0 0.6rem;
+    margin: 0;
+    &:not(&--with-description) {
+      margin-bottom: 0.55rem;
+    }
+    &-title {
+      display: block;
+      margin: 0;
+      padding: 0 0 1.5rem;
+    }
   }
 
   &__description:not(&__description--title) {
     @extend .ons-label__description;
+
+    margin-bottom: 0.55rem;
   }
 
   &__description--title {

package/components/fieldset/_macro.njk

@@ -1,6 +1,7 @@
 {% from "components/error/_macro.njk" import onsError %}
 
 {% macro onsFieldset(params) %}
+    {% set descriptionID = (params.id ~ "-" if params.id else "") ~ "legend-description" %}
     {% set fieldset -%}
         {% if params.dontWrap is defined and params.dontWrap -%}
             <div class="ons-input-items">
@@ -12,20 +13,20 @@
                 class="ons-fieldset{% if params.classes is defined and params.classes %} {{ params.classes }}{% 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 %}
             >
-                <legend class="ons-fieldset__legend{% if params.legendIsQuestionTitle is defined and params.legendIsQuestionTitle %} ons-u-mb-no{% endif %}{% if params.legendClasses is defined and params.legendClasses %} {{ params.legendClasses }}{% endif %}">
+                <legend{% if params.description %} aria-describedBy="{{ descriptionID }}"{% endif %} class="ons-fieldset__legend{% if params.legendIsQuestionTitle %} ons-u-mb-no{% endif %}{% if params.legendClasses is defined and params.legendClasses %} {{ params.legendClasses }}{% endif %}{% if params.description %} ons-fieldset__legend--with-description{% endif %}">
                     {%- if params.legendIsQuestionTitle -%}
-                        <h1 id="fieldset-legend-title" class="ons-fieldset__legend-title ons-u-mb-m{% if params.legendTitleClasses is defined and params.legendTitleClasses %} {{ params.legendTitleClasses }}{% endif %}">
+                        <h1 id="fieldset-legend-title" class="ons-fieldset__legend-title{% if params.legendTitleClasses is defined and params.legendTitleClasses %} {{ params.legendTitleClasses }}{% endif %}">
                             {{- params.legend | safe -}}
                         </h1>
                     {%- else -%}
-                        <span class="ons-fieldset__legend-title">{{- params.legend | safe -}}</span>
-                    {%- endif -%}
-                    {%- if params.description is defined and params.description -%}
-                        <div class="ons-fieldset__description{% if params.legendIsQuestionTitle %} ons-fieldset__description--title ons-u-mb-m{% endif %}">
-                            {{- params.description | safe -}}
-                        </div>
+                        <span class="ons-fieldset__legend-title ons-u-pb-no">{{- params.legend | safe -}}</span>
                     {%- endif -%}
                 </legend>
+                {%- if params.description -%}
+                    <div id="{{ descriptionID }}" class="ons-fieldset__description{% if params.legendIsQuestionTitle %} ons-fieldset__description--title ons-u-mb-m{% endif %}">
+                        {{- params.description | safe -}}
+                    </div>
+                {%- endif -%}
                 {{- caller() if caller -}}
             </fieldset>
         {%- endif %}

package/components/fieldset/_macro.spec.js

@@ -32,6 +32,13 @@ describe('macro: fieldset', () => {
     expect(title).toBe('Fieldset legend');
   });
 
+  it('has the correct `aria-decribedby` value', () => {
+    const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC));
+
+    const ariaDescByVal = $('.ons-fieldset__legend').attr('aria-describedby');
+    expect(ariaDescByVal).toBe('example-fieldset-legend-description');
+  });
+
   it('has the `description` text', () => {
     const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC));
 
@@ -41,6 +48,26 @@ describe('macro: fieldset', () => {
     expect(title).toBe('A fieldset description');
   });
 
+  it('has the correct `description` `id` when no `fieldset `id` is provided', () => {
+    const $ = cheerio.load(renderComponent('fieldset', { ...EXAMPLE_FIELDSET_BASIC, id: undefined }));
+
+    const id = $('.ons-fieldset__description').attr('id');
+    expect(id).toBe('legend-description');
+  });
+
+  it('has the correct `description` `id` when `fieldset `id` is provided', () => {
+    const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC));
+
+    const id = $('.ons-fieldset__description').attr('id');
+    expect(id).toBe('example-fieldset-legend-description');
+  });
+
+  it('has the correct `legend` class when `description` is provided', () => {
+    const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC));
+
+    expect($('.ons-fieldset__legend').hasClass('ons-fieldset__legend--with-description')).toBe(true);
+  });
+
   it('has additionally provided style classes', () => {
     const $ = cheerio.load(
       renderComponent('fieldset', {
@@ -123,11 +150,6 @@ describe('macro: fieldset', () => {
       expect(results).toHaveNoViolations();
     });
 
-    it('has the correct class', () => {
-      const $ = cheerio.load(renderComponent('fieldset', { ...EXAMPLE_FIELDSET_BASIC, legendIsQuestionTitle: true }));
-      expect($('.ons-fieldset__legend').hasClass('ons-u-mb-no')).toBe(true);
-    });
-
     it('renders the legend in a H1', () => {
       const $ = cheerio.load(renderComponent('fieldset', { ...EXAMPLE_FIELDSET_BASIC, legendIsQuestionTitle: true }));
       const titleTag = $('.ons-fieldset__legend-title')[0].tagName;

package/components/footer/_footer.scss

@@ -17,6 +17,7 @@
 
   &__warning {
     background-color: $color-banner-bg-dark;
+    outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
   }
 
   &__license {

package/components/header/_macro.njk

@@ -72,7 +72,7 @@
                                     {% endif %}
                                     <div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
                                         <nav class="ons-header-service-nav ons-header-service-nav--main {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
-                                            <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
+                                            <ul class="ons-header-service-nav__list">
                                                 {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
                                                     <li class="ons-header-service-nav__item">
                                                         <a
@@ -101,7 +101,6 @@
                                                 "attributes": {
                                                     "aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
                                                     "aria-controls": params.serviceLinks.id,
-                                                    "aria-haspopup": "true",
                                                     "aria-expanded": "false"
                                                 }
                                             }) }}
@@ -114,7 +113,7 @@
                 </div>
                 {% if params.serviceLinks is defined and params.serviceLinks %}
                     <nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
-                        <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
+                        <ul class="ons-header-service-nav__list">
                             {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
                                 <li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
                                     <a
@@ -225,7 +224,6 @@
                                         "attributes": {
                                             "aria-label": "Toggle search" ,
                                             "aria-controls": "ons-site-search",
-                                            "aria-haspopup": "true",
                                             "aria-expanded": "false"
                                         }
                                     }) }}
@@ -245,7 +243,6 @@
                                     "attributes": {
                                         "aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
                                         "aria-controls": params.navigation.id,
-                                        "aria-haspopup": "true",
                                         "aria-expanded": "false"
                                     }
                                 }) }}

package/components/header/_macro.spec.js

@@ -13,7 +13,6 @@ const EXAMPLE_HEADER_BASIC = {
 const EXAMPLE_SERVICE_LINKS_CONFIG = {
   id: 'service-links',
   ariaLabel: 'Services menu',
-  ariaListLabel: 'Menu',
   classes: 'custom-class',
   toggleServicesButton: {
     text: 'Menu',
@@ -378,12 +377,6 @@ describe('macro: header', () => {
       expect($('.ons-header-service-nav--main').attr('aria-label')).toBe('Services menu');
     });
 
-    it('has the provided `aria-label` for the list', () => {
-      const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_SINGLE));
-
-      expect($('.ons-header-service-nav--main .ons-header-service-nav__list').attr('aria-label')).toBe('Menu');
-    });
-
     it('has the link text for each list item', () => {
       const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE));
 
@@ -410,12 +403,6 @@ describe('macro: header', () => {
       expect($('.ons-header-service-nav--mobile').attr('aria-label')).toBe('Services menu');
     });
 
-    it('has the provided `aria-label` for the list for mobile', () => {
-      const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_SINGLE));
-
-      expect($('.ons-header-service-nav--mobile .ons-header-service-nav__list').attr('aria-label')).toBe('Menu');
-    });
-
     it('has the link text for each list item for mobile', () => {
       const $ = cheerio.load(renderComponent('header', EXAMPLE_HEADER_SERVICE_LINKS_MULTIPLE));
 
@@ -445,7 +432,6 @@ describe('macro: header', () => {
         attributes: {
           'aria-label': 'Toggle services menu',
           'aria-controls': 'service-links',
-          'aria-haspopup': 'true',
           'aria-expanded': 'false',
         },
       });
@@ -558,7 +544,6 @@ describe('macro: header', () => {
         attributes: {
           'aria-label': 'Toggle main menu',
           'aria-controls': 'main-nav',
-          'aria-haspopup': 'true',
           'aria-expanded': 'false',
         },
       });
@@ -601,7 +586,6 @@ describe('macro: header', () => {
         attributes: {
           'aria-label': 'Toggle search',
           'aria-controls': 'ons-site-search',
-          'aria-haspopup': 'true',
           'aria-expanded': 'false',
         },
       });

package/components/hero/_macro.njk

@@ -25,7 +25,7 @@
 
             <header>
                 {% if params.preTitleImage is defined and params.preTitleImage %}
-                    {% set preTitleImageWithModifier = params.preTitleImage.name|replace(r/(\.[^\.]+)$/, "--" + skinName + "$1") %}
+                    {% set preTitleImageWithModifier = params.preTitleImage.name ~ "--" ~ skinName ~ ".svg" %}
                     <img class="ons-hero__pre-title" src="{{ params.placeholderURL }}/img/{{ preTitleImageWithModifier }}" alt="{{ params.preTitleImage.alt }}">
                 {% endif %}
                 {% if params.title is defined and params.title %}

package/components/hero/_macro.spec.js

@@ -36,7 +36,7 @@ const EXAMPLE_HERO_WITH_BUTTON = {
 const EXAMPLE_HERO_WITH_PRETITLE_IMAGE = {
   ...EXAMPLE_HERO_MINIMAL,
   preTitleImage: {
-    name: 'example.svg',
+    name: 'example',
     alt: 'svg alt text',
   },
 };

package/components/icons/_macro.njk

@@ -62,7 +62,7 @@
             <path d="M11.86 10.23 8.62 6.99a4.63 4.63 0 1 0-6.34 1.64 4.55 4.55 0 0 0 2.36.64 4.65 4.65 0 0 0 2.33-.65l3.24 3.23a.46.46 0 0 0 .65 0l1-1a.48.48 0 0 0 0-.62Zm-5-3.32a3.28 3.28 0 0 1-2.31.93 3.22 3.22 0 1 1 2.35-.93Z"/>
         </svg>
     {% elif params.iconType == "sort-sprite" %}
-        <svg id="sort-sprite{% if params.id is defined and params.id %}-{{ params.id | lower }}{% endif %}" class="ons-svg-icon {{ iconClasses }}" viewBox="0 0 12 19" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
+        <svg id="sort-sprite{% if params.id is defined and params.id %}-{{ params.id | lower }}{% endif %}" class="ons-svg-icon{{ iconClasses }}" viewBox="0 0 12 19" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
             <path class="ons-topTriangle"  d="M6 0l6 7.2H0L6 0zm0 18.6l6-7.2H0l6 7.2zm0 3.6l6 7.2H0l6-7.2z"/>
             <path class="ons-bottomTriangle" d="M6 18.6l6-7.2H0l6 7.2zm0 3.6l6 7.2H0l6-7.2z"/>
         </svg>