@ons/design-system 54.0.0 → 55.1.0

package/components/autosuggest/_autosuggest.scss

@@ -11,7 +11,7 @@
   }
 
   &__results {
-    border: 1px solid $color-input;
+    border: 1px solid $color-input-border;
     border-radius: $input-radius;
     display: none;
     margin: 0.5rem 0 0;
@@ -27,7 +27,7 @@
 
   &__results-title {
     background: $color-grey-15;
-    border-bottom: 1px solid $color-input;
+    border-bottom: 1px solid $color-input-border;
     padding: 0.25rem 0.5rem;
   }
 
@@ -48,7 +48,7 @@
     padding: $input-padding-horizontal;
 
     &:not(:last-child) {
-      border-bottom: 1px solid $color-input;
+      border-bottom: 1px solid $color-input-border;
     }
 
     &:not(&--no-results):not(&--more-results):hover,
@@ -87,7 +87,7 @@
     padding-left: 0.5rem;
 
     &:not(:last-child) {
-      border-bottom: 1px solid $color-input;
+      border-bottom: 1px solid $color-input-border;
     }
   }
 

package/components/autosuggest/autosuggest.spec.js

@@ -118,6 +118,16 @@ describe('script: autosuggest', () => {
       expect(ariaActiveDescendant).toBe(selectedOptionId);
     });
 
+    it('sets aria status to a message showing the selected result', async () => {
+      await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
+
+      await page.type('.ons-js-autosuggest-input', 'Eng', { delay: 20 });
+      await page.keyboard.press('ArrowDown');
+
+      const statusMessage = await page.$eval('.ons-js-autosuggest-aria-status', node => node.textContent);
+      expect(statusMessage.trim()).toBe('England');
+    });
+
     it('does not mark other suggestions as being selected', async () => {
       await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
 
@@ -297,7 +307,7 @@ describe('script: autosuggest', () => {
 
       const attributes = await getNodeAttributes(page, '.ons-js-autosuggest-input');
       expect(attributes['aria-activedescendant']).toBeUndefined();
-      expect(attributes['aria-expanded']).toBeUndefined();
+      expect(attributes['aria-expanded']).toBe('false');
     });
   });
 
@@ -502,7 +512,7 @@ describe('script: autosuggest', () => {
         await page.type('.ons-js-autosuggest-input', 'abc', { delay: 20 });
 
         const ariaExpandedValue = await page.$eval('.ons-js-autosuggest-input', node => node.getAttribute('aria-expanded'));
-        expect(ariaExpandedValue).toBe(null);
+        expect(ariaExpandedValue).toBe('false');
       });
     });
   });

package/components/autosuggest/autosuggest.ui.js

@@ -322,7 +322,7 @@ export default class AutosuggestUI {
     this.listbox.innerHTML = '';
     this.context.classList.remove(classAutosuggestHasResults);
     this.input.removeAttribute('aria-activedescendant');
-    this.input.removeAttribute('aria-expanded');
+    this.input.setAttribute('aria-expanded', false);
 
     if (!preventAriaStatusUpdate) {
       this.setAriaStatus();
@@ -343,15 +343,12 @@ export default class AutosuggestUI {
       this.listbox.innerHTML = '';
       if (this.results) {
         this.resultOptions = this.results.map((result, index) => {
-          let ariaLabel = result[this.lang];
-          ariaLabel = ariaLabel.split('(<span class="ons-autosuggest-input__group">')[0];
           let innerHTML = this.emboldenMatch(result[this.lang], this.query);
 
           const listElement = document.createElement('li');
           listElement.className = classAutosuggestOption;
           listElement.setAttribute('id', `${this.listboxId}__option--${index}`);
           listElement.setAttribute('role', 'option');
-          listElement.setAttribute('aria-label', ariaLabel);
           if (result.category) {
             innerHTML =
               innerHTML + `<span class="ons-autosuggest-input__category ons-u-lighter ons-u-fs-s ons-u-db">${result.category}</span>`;
@@ -437,13 +434,13 @@ export default class AutosuggestUI {
           option.setAttribute('aria-selected', true);
           this.input.setAttribute('aria-activedescendant', option.getAttribute('id'));
           const groupedResult = option.querySelector('.ons-autosuggest-input__group');
-          const ariaLabel = option.getAttribute('aria-label');
+          const optionText = option.innerHTML.replace('<strong>', '').replace('</strong>', '');
           if (groupedResult) {
             let groupedAriaMsg = this.ariaGroupedResults.replace('{n}', groupedResult.innerHTML);
-            groupedAriaMsg = groupedAriaMsg.replace('{x}', ariaLabel);
+            groupedAriaMsg = groupedAriaMsg.replace('{x}', optionText);
             this.setAriaStatus(groupedAriaMsg);
           } else {
-            this.setAriaStatus(ariaLabel);
+            this.setAriaStatus(optionText);
           }
         } else {
           option.classList.remove(classAutosuggestOptionFocused);

package/components/browser-banner/_macro.njk

@@ -10,7 +10,7 @@
     {% endif %}
 
     <div class="ons-browser-banner">
-        <div class="ons-container{{ ' ons-container--wide' if params.wide is defined and params.wide }}">
+        <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
             <p class="ons-browser-banner__content"><span class="ons-browser-banner__lead">{{ bannerLeadingText }}</span><span class="ons-browser-banner__cta"> {{ bannerCTA | safe }}</span></p>
         </div>
     </div>

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

@@ -49,6 +49,37 @@ describe('macro: browser-banner', () => {
 
     expect($('.ons-container').hasClass('ons-container--wide')).toBe(true);
   });
+
+  it('does not have `container--wide` class when `wide` is not set', () => {
+    const $ = cheerio.load(
+      renderComponent('browser-banner', {
+        ...EXAMPLE_BROWSER_BANNER_DEFAULT,
+      }),
+    );
+
+    expect($('.ons-container').hasClass('ons-container--wide')).toBe(false);
+  });
+
+  it('has `container--full-width` class when `fullWidth` is true', () => {
+    const $ = cheerio.load(
+      renderComponent('browser-banner', {
+        ...EXAMPLE_BROWSER_BANNER_DEFAULT,
+        fullWidth: true,
+      }),
+    );
+
+    expect($('.ons-container').hasClass('ons-container--full-width')).toBe(true);
+  });
+
+  it('does not have `container--full-width` class when `fullWidth` is not set', () => {
+    const $ = cheerio.load(
+      renderComponent('browser-banner', {
+        ...EXAMPLE_BROWSER_BANNER_DEFAULT,
+      }),
+    );
+
+    expect($('.ons-container').hasClass('ons-container--full-width')).toBe(false);
+  });
 });
 
 describe('mode: Welsh language', () => {

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;
@@ -386,13 +386,20 @@ $button-shadow-size: 3px;
   &--ghost-dark:focus &,
   &--dropdown:focus & {
     &__inner {
-      box-shadow: none;
+      border-color: $color-text-link-focus;
+      box-shadow: 0 0 0 1px $color-text-link-focus;
       .ons-svg-icon {
         fill: $color-black;
       }
     }
   }
 
+  &--dropdown:focus & {
+    &__inner {
+      box-shadow: inset 0 -4px 0 0 $color-text-link-focus;
+    }
+  }
+
   &--mobile[aria-expanded='true'],
   &--text-link[aria-expanded='true'] {
     .ons-svg-icon {
@@ -473,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-white;
-    background-size: 0;
-    border: 2px solid $color-input;
+    background-color: $color-input-bg;
+    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,11 +100,12 @@ $checkbox-padding: 11px;
           background: none;
           border: none;
           box-shadow: none;
+          outline: none;
         }
       }
 
       &:focus {
-        box-shadow: 0 0 0 3px $color-focus;
+        @extend %ons-input-focus;
       }
     }
 
@@ -101,7 +133,7 @@ $checkbox-padding: 11px;
       }
 
       &:focus {
-        box-shadow: 0 0 0 3px $color-focus;
+        @extend %ons-input-focus;
       }
 
       & + .ons-checkbox__label {
@@ -122,7 +154,7 @@ $checkbox-padding: 11px;
 
     &::before {
       background: $color-white;
-      border: 1px solid $color-input;
+      border: 1px solid $color-input-border;
       border-radius: 3px;
       bottom: 0;
       content: '';
@@ -152,7 +184,8 @@ $checkbox-padding: 11px;
 
   &__input:checked + &__label::before {
     background: $color-grey-5;
-    box-shadow: 0 0 0 1px $color-input;
+    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,10 +209,10 @@ $checkbox-padding: 11px;
   &--toggle & {
     &__input {
       left: 0;
-      top: 0.1rem;
+      top: 0.2rem;
 
       &:focus {
-        box-shadow: 0 0 0 3px $color-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 {