@ons/design-system 53.1.1 → 55.0.0

package/components/accordion/_macro.njk

@@ -15,9 +15,9 @@
                 onsButton({
                     "type": "button",
                     "text": params.allButton.open,
-                    "classes": "ons-js-collapsible-all ons-u-mb-s ons-u-d-no",
+                    "classes": "ons-js-accordion-all ons-u-mb-s ons-u-d-no",
                     "variants": ["secondary", "small"],
-                    "innerClasses": "ons-js-collapsible-all-inner",
+                    "innerClasses": "ons-js-accordion-all-inner",
                     "attributes": attributes
                 })
             }}
@@ -36,7 +36,6 @@
                     "content": item.content,
                     "group": params.id,
                     "saveState": params.saveState,
-                    "variants": params.variants,
                     "open": params.open
                 })
             }}

package/components/accordion/_macro.spec.js

@@ -54,18 +54,6 @@ describe('macro: accordion', () => {
   });
 
   describe('item', () => {
-    it('has provided variant style classes', () => {
-      const $ = cheerio.load(
-        renderComponent('accordion', {
-          ...EXAMPLE_ACCORDION_WITH_TWO_ITEMS,
-          variants: ['variant-a', 'variant-b'],
-        }),
-      );
-
-      expect($('.ons-collapsible--variant-a').length).toBe(2);
-      expect($('.ons-collapsible--variant-b').length).toBe(2);
-    });
-
     it('has provided title text', () => {
       const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
 
@@ -103,31 +91,6 @@ describe('macro: accordion', () => {
       expect(titleText).toBe('Content for item 1');
     });
 
-    it('outputs a button with the expected class', () => {
-      const $ = cheerio.load(
-        renderComponent('accordion', {
-          itemsList: [
-            {
-              title: 'Title for item 1',
-              button: {
-                open: 'Open label',
-                close: 'Close label',
-              },
-            },
-            {
-              title: 'Title for item 2',
-              button: {
-                open: 'Open label',
-                close: 'Close label',
-              },
-            },
-          ],
-        }),
-      );
-
-      expect($('button.ons-js-collapsible-button').length).toBe(2);
-    });
-
     it('has additionally provided `attributes`', () => {
       const $ = cheerio.load(
         renderComponent('accordion', {
@@ -199,7 +162,7 @@ describe('macro: accordion', () => {
         }),
       );
 
-      expect($('button.ons-js-collapsible-all').length).toBe(1);
+      expect($('button.ons-js-accordion-all').length).toBe(1);
     });
 
     it('has additionally provided `attributes`', () => {
@@ -217,8 +180,8 @@ describe('macro: accordion', () => {
         }),
       );
 
-      expect($('button.ons-js-collapsible-all').attr('a')).toBe('123');
-      expect($('button.ons-js-collapsible-all').attr('b')).toBe('456');
+      expect($('button.ons-js-accordion-all').attr('a')).toBe('123');
+      expect($('button.ons-js-accordion-all').attr('b')).toBe('456');
     });
   });
 });

package/components/accordion/accordion.dom.js

@@ -0,0 +1,19 @@
+import domready from '../../js/domready';
+
+async function initialiseAccordions() {
+  const toggleAllButtons = [...document.querySelectorAll('.ons-js-accordion-all')];
+
+  if (toggleAllButtons.length) {
+    const collapsibleComponents = [...document.querySelectorAll('.ons-js-collapsible')];
+
+    const Collapsible = (await import('../collapsible/collapsible')).default;
+    const Accordion = (await import('./accordion')).default;
+    const collapsibles = collapsibleComponents.map(element => new Collapsible(element));
+
+    toggleAllButtons.forEach(button => {
+      new Accordion(button, collapsibles);
+    });
+  }
+}
+
+domready(initialiseAccordions);

package/components/{collapsible/collapsible.group.js → accordion/accordion.js}

@@ -1,23 +1,28 @@
-export default class CollapsibleGroup {
+export default class Accordion {
   constructor(button, collapsibles) {
     this.openCollapsibles = 0;
 
     this.button = button;
-    this.buttonInner = button.querySelector('.ons-js-collapsible-all-inner');
+    this.buttonInner = button.querySelector('.ons-js-accordion-all-inner');
     this.group = button.getAttribute('data-group');
     this.collapsibles = collapsibles.filter(collapsible => collapsible.group === this.group);
-
     this.totalCollapsibles = this.collapsibles.length;
-    this.buttonOpen = this.buttonInner.innerHTML.trim();
+    this.buttonOpenEl = this.buttonInner.querySelector('.ons-btn__text');
+    this.buttonOpen = this.buttonOpenEl.innerHTML.trim();
     this.closeButton = button.getAttribute('data-close-all');
+    this.open = this.collapsibles.find(collapsible => collapsible.open === true);
 
     this.collapsibles.forEach(collapsible => {
       collapsible.onOpen = this.onOpen.bind(this);
       collapsible.onClose = this.onClose.bind(this);
     });
 
-    this.button.addEventListener('click', this.handleButtonClick.bind(this));
+    if (this.open) {
+      this.openCollapsibles = this.totalCollapsibles;
+    }
 
+    this.button.addEventListener('click', this.handleButtonClick.bind(this));
+    this.setButton();
     this.button.classList.remove('ons-u-d-no');
   }
 
@@ -49,9 +54,11 @@ export default class CollapsibleGroup {
     if (this.canClose()) {
       this.buttonInner.innerHTML = this.closeButton;
       this.button.setAttribute('data-ga-label', this.buttonOpen);
+      this.button.setAttribute('aria-expanded', 'true');
     } else {
       this.buttonInner.innerHTML = this.buttonOpen;
       this.button.setAttribute('data-ga-label', this.closeButton);
+      this.button.setAttribute('aria-expanded', 'false');
     }
   }
 }

package/components/accordion/accordion.spec.js

@@ -6,26 +6,14 @@ const EXAMPLE_ACCORDION_WITH_THREE_ITEMS = {
     {
       title: 'Title for item 1',
       content: 'Content for item 1',
-      button: {
-        open: 'Open item',
-        close: 'Close item',
-      },
     },
     {
       title: 'Title for item 2',
       content: 'Content for item 2',
-      button: {
-        open: 'Open item',
-        close: 'Close item',
-      },
     },
     {
       title: 'Title for item 3',
       content: 'Content for item 3',
-      button: {
-        open: 'Open item',
-        close: 'Close item',
-      },
     },
   ],
 };
@@ -42,43 +30,68 @@ const EXAMPLE_ACCORDION_WITH_ALL_BUTTON = {
 };
 
 describe('script: accordion', () => {
-  it('begins with all items closed', async () => {
-    await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_THREE_ITEMS));
+  it('begins with all items open when specified', async () => {
+    await setTestPage(
+      '/test',
+      renderComponent('accordion', {
+        ...EXAMPLE_ACCORDION_WITH_THREE_ITEMS,
+        open: true,
+      }),
+    );
 
-    const openItemCount = await page.$$eval('.ons-collapsible--open', elements => elements.length);
-    expect(openItemCount).toBe(0);
+    const openElements = await page.$$eval('.ons-js-collapsible', nodes => nodes.filter(node => node.open));
+    expect(openElements[0]).not.toBe(undefined);
+    expect(openElements[1]).not.toBe(undefined);
+    expect(openElements[2]).not.toBe(undefined);
   });
 
-  it('begins with all items open when specified', async () => {
+  it('sets toggle all button label to "Hide all" when open is specified', async () => {
     await setTestPage(
       '/test',
       renderComponent('accordion', {
-        ...EXAMPLE_ACCORDION_WITH_THREE_ITEMS,
+        ...EXAMPLE_ACCORDION_WITH_ALL_BUTTON,
+        open: true,
+      }),
+    );
+
+    const buttonText = await page.$eval('button[data-test-trigger]', element => element.innerText);
+    expect(buttonText.trim()).toBe('Close all');
+  });
+
+  it('sets toggle all button aria-expanded set to true when open is specified', async () => {
+    await setTestPage(
+      '/test',
+      renderComponent('accordion', {
+        ...EXAMPLE_ACCORDION_WITH_ALL_BUTTON,
         open: true,
       }),
     );
 
-    const openItemCount = await page.$$eval('.ons-collapsible--open', elements => elements.length);
-    expect(openItemCount).toBe(3);
+    const ariaExpanded = await page.$eval('button[data-test-trigger]', element => element.getAttribute('aria-expanded'));
+    expect(ariaExpanded).toBe('true');
   });
 
-  it('opens all items when accordion "Open all" button is clicked', async () => {
+  it('opens all items when accordion `allbutton` is clicked', async () => {
     await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
 
     await page.click('button[data-test-trigger]');
 
-    const openItemCount = await page.$$eval('.ons-collapsible--open', elements => elements.length);
-    expect(openItemCount).toBe(3);
+    const openElements = await page.$$eval('.ons-js-collapsible', nodes => nodes.filter(node => node.open));
+    expect(openElements[0]).not.toBe(undefined);
+    expect(openElements[1]).not.toBe(undefined);
+    expect(openElements[2]).not.toBe(undefined);
   });
 
-  it('closes all items when accordion "Open all" button is clicked twice', async () => {
+  it('closes all items when accordion `allbutton` is clicked twice', async () => {
     await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
 
     await page.click('button[data-test-trigger]');
     await page.click('button[data-test-trigger]');
 
-    const openItemCount = await page.$$eval('.ons-collapsible--open', elements => elements.length);
-    expect(openItemCount).toBe(0);
+    const openElements = await page.$$eval('.ons-js-collapsible', nodes => nodes.filter(node => node.open));
+    expect(openElements[0]).toBe(undefined);
+    expect(openElements[1]).toBe(undefined);
+    expect(openElements[2]).toBe(undefined);
   });
 
   it('starts with the toggle all button labelled as "Open all"', async () => {
@@ -88,47 +101,39 @@ describe('script: accordion', () => {
     expect(buttonText.trim()).toBe('Open all');
   });
 
-  it('sets toggle all button label to "Hide all" when clicked', async () => {
+  it('starts with the toggle all button aria-expanded set to false', async () => {
     await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
 
-    await page.click('button[data-test-trigger]');
-
-    const buttonText = await page.$eval('button[data-test-trigger]', element => element.innerText);
-    expect(buttonText.trim()).toBe('Close all');
+    const ariaExpanded = await page.$eval('button[data-test-trigger]', element => element.getAttribute('aria-expanded'));
+    expect(ariaExpanded).toBe('false');
   });
 
-  it('sets toggle all button label to "Hide all" when all items are shown', async () => {
+  it('sets toggle all button label to "Hide all" when clicked', async () => {
     await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
 
-    await page.click('#example-accordion-1 .ons-collapsible__btn');
-    await page.click('#example-accordion-2 .ons-collapsible__btn');
-    await page.click('#example-accordion-3 .ons-collapsible__btn');
+    await page.click('button[data-test-trigger]');
 
     const buttonText = await page.$eval('button[data-test-trigger]', element => element.innerText);
     expect(buttonText.trim()).toBe('Close all');
   });
 
-  it('opens an item when its open button is clicked', async () => {
-    await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_THREE_ITEMS));
+  it('sets toggle all button aria-expanded set to true when clicked', async () => {
+    await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
 
-    await page.click('#example-accordion-2 .ons-collapsible__btn');
-    await page.click('#example-accordion-3 .ons-collapsible__btn');
+    await page.click('button[data-test-trigger]');
 
-    const openItemCount = await page.$$eval('.ons-collapsible--open', elements => elements.length);
-    expect(openItemCount).toBe(2);
+    const ariaExpanded = await page.$eval('button[data-test-trigger]', element => element.getAttribute('aria-expanded'));
+    expect(ariaExpanded).toBe('true');
   });
 
-  it('closes an item when its open button is clicked twice', async () => {
-    await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_THREE_ITEMS));
-
-    await page.click('#example-accordion-2 .ons-collapsible__btn');
-    await page.click('#example-accordion-3 .ons-collapsible__btn');
-    await page.click('#example-accordion-3 .ons-collapsible__btn');
+  it('sets toggle all button label to "Hide all" when all items are shown', async () => {
+    await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
 
-    const isItem2Open = await page.$eval('#example-accordion-2', element => element.classList.contains('ons-collapsible--open'));
-    expect(isItem2Open).toBe(true);
+    await page.click('#example-accordion-1 .ons-collapsible__heading');
+    await page.click('#example-accordion-2 .ons-collapsible__heading');
+    await page.click('#example-accordion-3 .ons-collapsible__heading');
 
-    const isItem3Open = await page.$eval('#example-accordion-3', element => element.classList.contains('ons-collapsible--open'));
-    expect(isItem3Open).toBe(false);
+    const buttonText = await page.$eval('button[data-test-trigger]', element => element.innerText);
+    expect(buttonText.trim()).toBe('Close all');
   });
 });

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/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"', () => {