@ons/design-system 66.0.1 → 67.0.0

package/components/accordion/_macro.spec.js

@@ -57,10 +57,7 @@ describe('macro: accordion', () => {
     it('has provided title text', () => {
       const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
 
-      const titleText = $('.ons-details__title')
-        .first()
-        .text()
-        .trim();
+      const titleText = $('.ons-details__title').first().text().trim();
       expect(titleText).toBe('Title for item 1');
     });
 
@@ -84,10 +81,7 @@ describe('macro: accordion', () => {
     it('has provided content text', () => {
       const $ = cheerio.load(renderComponent('accordion', EXAMPLE_ACCORDION_WITH_TWO_ITEMS));
 
-      const titleText = $('.ons-details__content')
-        .first()
-        .text()
-        .trim();
+      const titleText = $('.ons-details__content').first().text().trim();
       expect(titleText).toBe('Content for item 1');
     });
 

package/components/accordion/accordion.dom.js

@@ -8,9 +8,9 @@ async function initialiseAccordions() {
 
     const Details = (await import('../details/details')).default;
     const Accordion = (await import('./accordion')).default;
-    const detailsEls = detailsComponents.map(element => new Details(element));
+    const detailsEls = detailsComponents.map((element) => new Details(element));
 
-    toggleAllButtons.forEach(button => {
+    toggleAllButtons.forEach((button) => {
       new Accordion(button, detailsEls);
     });
   }

package/components/accordion/accordion.spec.js

@@ -39,10 +39,11 @@ describe('script: accordion', () => {
       }),
     );
 
-    const openElements = await page.$$eval('.ons-js-details', nodes => nodes.filter(node => node.open));
-    expect(openElements[0]).not.toBe(undefined);
-    expect(openElements[1]).not.toBe(undefined);
-    expect(openElements[2]).not.toBe(undefined);
+    const detailsElementStates = await page.$$eval('.ons-js-details', (nodes) =>
+      nodes.map((node) => node.classList.contains('ons-details--open')),
+    );
+
+    expect(detailsElementStates).toEqual([true, true, true]);
   });
 
   it('sets toggle all button label to "Hide all" when open is specified', async () => {
@@ -54,7 +55,7 @@ describe('script: accordion', () => {
       }),
     );
 
-    const buttonText = await page.$eval('button[data-test-trigger]', element => element.innerText);
+    const buttonText = await page.$eval('button[data-test-trigger]', (element) => element.innerText);
     expect(buttonText.trim()).toBe('Close all');
   });
 
@@ -67,7 +68,7 @@ describe('script: accordion', () => {
       }),
     );
 
-    const ariaExpanded = await page.$eval('button[data-test-trigger]', element => element.getAttribute('aria-expanded'));
+    const ariaExpanded = await page.$eval('button[data-test-trigger]', (element) => element.getAttribute('aria-expanded'));
     expect(ariaExpanded).toBe('true');
   });
 
@@ -76,10 +77,11 @@ describe('script: accordion', () => {
 
     await page.click('button[data-test-trigger]');
 
-    const openElements = await page.$$eval('.ons-js-details', nodes => nodes.filter(node => node.open));
-    expect(openElements[0]).not.toBe(undefined);
-    expect(openElements[1]).not.toBe(undefined);
-    expect(openElements[2]).not.toBe(undefined);
+    const detailsElementStates = await page.$$eval('.ons-js-details', (nodes) =>
+      nodes.map((node) => node.classList.contains('ons-details--open')),
+    );
+
+    expect(detailsElementStates).toEqual([true, true, true]);
   });
 
   it('closes all items when accordion `allbutton` is clicked twice', async () => {
@@ -88,23 +90,24 @@ describe('script: accordion', () => {
     await page.click('button[data-test-trigger]');
     await page.click('button[data-test-trigger]');
 
-    const openElements = await page.$$eval('.ons-js-details', nodes => nodes.filter(node => node.open));
-    expect(openElements[0]).toBe(undefined);
-    expect(openElements[1]).toBe(undefined);
-    expect(openElements[2]).toBe(undefined);
+    const detailsElementStates = await page.$$eval('.ons-js-details', (nodes) =>
+      nodes.map((node) => node.classList.contains('ons-details--open')),
+    );
+
+    expect(detailsElementStates).toEqual([false, false, false]);
   });
 
   it('starts with the toggle all button labelled as "Open all"', async () => {
     await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
 
-    const buttonText = await page.$eval('button[data-test-trigger]', element => element.innerText);
+    const buttonText = await page.$eval('button[data-test-trigger]', (element) => element.innerText);
     expect(buttonText.trim()).toBe('Open all');
   });
 
   it('starts with the toggle all button aria-expanded set to false', async () => {
     await setTestPage('/test', renderComponent('accordion', EXAMPLE_ACCORDION_WITH_ALL_BUTTON));
 
-    const ariaExpanded = await page.$eval('button[data-test-trigger]', element => element.getAttribute('aria-expanded'));
+    const ariaExpanded = await page.$eval('button[data-test-trigger]', (element) => element.getAttribute('aria-expanded'));
     expect(ariaExpanded).toBe('false');
   });
 
@@ -113,7 +116,7 @@ describe('script: accordion', () => {
 
     await page.click('button[data-test-trigger]');
 
-    const buttonText = await page.$eval('button[data-test-trigger]', element => element.innerText);
+    const buttonText = await page.$eval('button[data-test-trigger]', (element) => element.innerText);
     expect(buttonText.trim()).toBe('Close all');
   });
 
@@ -122,7 +125,7 @@ describe('script: accordion', () => {
 
     await page.click('button[data-test-trigger]');
 
-    const ariaExpanded = await page.$eval('button[data-test-trigger]', element => element.getAttribute('aria-expanded'));
+    const ariaExpanded = await page.$eval('button[data-test-trigger]', (element) => element.getAttribute('aria-expanded'));
     expect(ariaExpanded).toBe('true');
   });
 
@@ -133,7 +136,7 @@ describe('script: accordion', () => {
     await page.click('#example-accordion-2 .ons-details__heading');
     await page.click('#example-accordion-3 .ons-details__heading');
 
-    const buttonText = await page.$eval('button[data-test-trigger]', element => element.innerText);
+    const buttonText = await page.$eval('button[data-test-trigger]', (element) => element.innerText);
     expect(buttonText.trim()).toBe('Close all');
   });
 });

package/components/accordion/example-accordion-open.njk

@@ -62,7 +62,7 @@
                         "text": "Areas (0)"
                     },
                     "value": "areas"
-                }       
+                }
             ]
         })
     }}
@@ -98,14 +98,14 @@
                         "text": "Disability (67)"
                     },
                     "value": "disability"
-                }       
+                }
             ]
         })
     }}
 {% endset %}
 
 <div class="ons-grid">
-    <div class="ons-grid__col ons-col-3@xs">
+    <div class="ons-grid__col ons-col-4@m">
         {{
             onsAccordion({
                 "id": "accordion",

package/components/autosuggest/_macro.spec.js

@@ -264,11 +264,7 @@ describe('macro: autosuggest', () => {
     it('renders div with the provided title text', () => {
       const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
 
-      expect(
-        $('.ons-autosuggest__results-title')
-          .text()
-          .trim(),
-      ).toBe('Suggestions');
+      expect($('.ons-autosuggest__results-title').text().trim()).toBe('Suggestions');
     });
 
     it('renders list with a generated identifier', () => {
@@ -298,11 +294,7 @@ describe('macro: autosuggest', () => {
     it('renders instructions text', () => {
       const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
 
-      expect(
-        $('.ons-autosuggest__instructions')
-          .text()
-          .trim(),
-      ).toBe('Use up and down keys to navigate.');
+      expect($('.ons-autosuggest__instructions').text().trim()).toBe('Use up and down keys to navigate.');
     });
   });
 });

package/components/button/_button.scss

@@ -78,13 +78,15 @@ $button-shadow-size: 3px;
     }
   }
 
-  &:focus:hover:not(:active) &__inner {
+  &:focus:hover:not(:active, .active) &__inner {
     background: var(--ons-color-focus-dark);
   }
 
   // When down
   &:active &,
-  &:active:focus & {
+  &:active:focus &,
+  &.active &,
+  &.active:focus & {
     &__inner {
       background: var(--ons-color-button);
       box-shadow: none;
@@ -96,7 +98,8 @@ $button-shadow-size: 3px;
     }
   }
 
-  &:active {
+  &:active,
+  &.active {
     top: ems($button-shadow-size);
   }
 
@@ -132,7 +135,9 @@ $button-shadow-size: 3px;
 
   &--secondary &,
   &--secondary:active &,
-  &--secondary:active:focus & {
+  &--secondary.active &,
+  &--secondary:active:focus &,
+  &--secondary.active:focus & {
     &__inner {
       background: var(--ons-color-button-secondary);
       color: var(--ons-color-text);
@@ -169,8 +174,8 @@ $button-shadow-size: 3px;
     text-decoration: none;
   }
 
-  &--link:focus:not(:active, &--secondary) &,
-  &--link:focus:hover:not(:active, &--secondary) & {
+  &--link:focus:not(:active, .active, &--secondary) &,
+  &--link:focus:hover:not(:active, .active, &--secondary) & {
     outline: inherit;
 
     &__inner {
@@ -238,8 +243,8 @@ $button-shadow-size: 3px;
   }
 
   &--text-link:focus &,
-  &--text-link.active:focus &,
-  &--text-link:active:focus & {
+  &--text-link:active:focus &,
+  &--text-link.active:focus & {
     &__inner {
       background-color: var(--ons-color-focus);
       box-shadow: 0 -2px var(--ons-color-focus),
@@ -288,7 +293,9 @@ $button-shadow-size: 3px;
   }
 
   &--ghost:active:focus,
-  &--ghost-dark:active:focus {
+  &--ghost.active:focus
+  &--ghost-dark:active:focus
+  &--ghost-dark.active:focus {
     box-shadow: none;
     outline: 3px solid transparent;
   }
@@ -403,7 +410,8 @@ $button-shadow-size: 3px;
     }
   }
 
-  &--loader.ons-is-loading:active & {
+  &--loader.ons-is-loading:active &, 
+  &--loader.ons-is-loading.active & {
     &__inner {
       box-shadow: 0 ems($button-shadow-size) 0 var(--ons-color-button-shadow);
     }
@@ -448,7 +456,8 @@ $button-shadow-size: 3px;
     cursor: not-allowed;
   }
 
-  &--disabled:active & {
+  &--disabled:active &,
+  &--disabled.active & {
     &__inner {
       box-shadow: 0 ems($button-shadow-size) 0 var(--ons-color-button-shadow);
     }
@@ -496,7 +505,9 @@ $button-shadow-size: 3px;
   }
 
   &--dropdown:active &,
-  &--dropdown:active:focus & {
+  &--dropdown.active &,
+  &--dropdown:active:focus &,
+  &--dropdown.active:focus & {
     &__inner {
       background: var(--ons-color-branded-secondary);
       color: var(--ons-color-white);

package/components/button/button.js

@@ -18,7 +18,8 @@ export default class SubmitButton {
         this.button.addEventListener('click', this.timerButton.bind(this));
       }
     } else if (this.submitType == 'link') {
-      this.button.addEventListener('keydown', this.linkButton.bind(this));
+      this.button.addEventListener('keydown', this.linkButtonDown.bind(this));
+      this.button.addEventListener('keyup', this.linkButtonUp.bind(this));
     }
   }
 
@@ -48,10 +49,18 @@ export default class SubmitButton {
     );
   }
 
-  linkButton(e) {
-    if (e.keyCode == 32) {
+  linkButtonDown(e){
+    if (e.keyCode == 32 || e.keyCode == 13){
+      this.button.classList.add("active");
+    }
+  }
+  
+  linkButtonUp(e){
+    if (e.keyCode == 32 || e.keyCode == 13) {
+      this.button.classList.remove("active"); 
       e.preventDefault();
       this.button.click();
     }
   }
+
 }

package/components/card/_card.scss

@@ -11,7 +11,7 @@
     & > .ons-card__title {
       margin-bottom: 0;
     }
-  } 
+  }
 
   &__link:hover {
     text-decoration-thickness: 3px;

package/components/checkboxes/_macro.njk

@@ -7,7 +7,7 @@
     {% set fields %}
     {% if params.checkboxesLabel is defined %}
         <p class="ons-checkboxes__label{{ " " + params.checkboxesLabelClasses if params.checkboxesLabelClasses }}">{{ params.checkboxesLabel }}</p>
-    {% endif %}    
+    {% endif %}
         {% set hasOther = false %}
         {% for checkbox in params.checkboxes %}
             {% if checkbox.other %}

package/components/checkboxes/example-checkboxes-with-revealed-checkboxes-expanded.njk

@@ -82,7 +82,7 @@
                         "text": "Areas (0)"
                     },
                     "value": "areas"
-                }       
+                }
             ]
         })
     }}

package/components/checkboxes/example-checkboxes-with-revealed-checkboxes.njk

@@ -80,7 +80,7 @@
                         "text": "Areas (0)"
                     },
                     "value": "areas"
-                }       
+                }
             ]
         })
     }}

package/components/cookies-banner/_macro.njk

@@ -28,7 +28,7 @@
         {% set acceptedText = 'You have accepted all additional cookies.' %}
         {% set rejectedText = 'You have rejected all additional cookies.' %}
         {% set confirmationButtonText = 'Hide' %}
-        {% set contextSuffix = 'this message' %}
+        {% set contextSuffix = 'cookie message' %}
         {% set beforeLinkPreferencesURL = 'You can' %}
         {% set afterLinkPreferencesURL = 'change your cookie preferences</a> at any time.' %}
         {% set beforeLinkStatementText = '<p>Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.</p><p>We would like to set' %}

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

@@ -215,7 +215,7 @@ describe('macro: cookies-banner', () => {
 
         faker.renderComponent('cookies-banner', {});
 
-        expect(buttonSpy.occurrences[2].buttonContext).toBe('this message');
+        expect(buttonSpy.occurrences[2].buttonContext).toBe('cookie message');
       });
 
       it('has `container--wide` class when `wide` is true', () => {

package/components/details/_details.scss

@@ -1,75 +1,81 @@
 $details-caret-width: 1.5rem;
 
 .ons-details {
-  &__heading {
-    color: var(--ons-color-text-link);
-    cursor: pointer;
-    display: inline-block;
-    outline: none;
-    padding: 0 0 0 $details-caret-width;
-    pointer-events: initial;
-    position: relative;
-
-    &::marker,
-    &::-webkit-details-marker {
-      display: none;
-    }
-
-    &:focus {
-      .ons-details__title {
-        @extend %a-focus;
-        // extend details focus background behind caret
-        margin-left: -$details-caret-width;
-        padding-left: $details-caret-width;
-      }
-      .ons-details__icon .ons-icon {
-        fill: var(--ons-color-text-link-focus);
+  &--initialised & {
+    &__heading {
+      color: var(--ons-color-text-link);
+      cursor: pointer;
+      display: inline-block;
+      outline: none;
+      padding: 0 0 0 $details-caret-width;
+      pointer-events: initial;
+      position: relative;
+
+      &::marker,
+      &::-webkit-details-marker {
+        display: none;
       }
-    }
 
-    &:hover:not(:focus) {
-      color: var(--ons-color-text-link-hover);
-      .ons-details__icon {
-        fill: var(--ons-color-text-link-hover);
+      &:focus {
+        .ons-details__title {
+          @extend %a-focus;
+          // extend details focus background behind caret
+          margin-left: -$details-caret-width;
+          padding-left: $details-caret-width;
+        }
+        .ons-details__icon .ons-icon {
+          fill: var(--ons-color-text-link-focus);
+        }
       }
-      .ons-details__title {
-        text-decoration: underline solid var(--ons-color-text-link-hover) 2px;
+
+      &:hover:not(:focus) {
+        color: var(--ons-color-text-link-hover);
+        .ons-details__icon {
+          fill: var(--ons-color-text-link-hover);
+        }
+        .ons-details__title {
+          text-decoration: underline solid var(--ons-color-text-link-hover) 2px;
+        }
       }
     }
-  }
 
-  &__icon {
-    display: inline-block;
-    fill: var(--ons-color-text-link);
-    height: $details-caret-width;
-    left: -0.15rem;
-    position: absolute;
-    top: -0.2rem;
-    width: $details-caret-width;
-  }
+    &__icon {
+      display: inline-block;
+      fill: var(--ons-color-text-link);
+      height: $details-caret-width;
+      left: -0.15rem;
+      position: absolute;
+      top: -0.2rem;
+      width: $details-caret-width;
+    }
 
-  &__title {
-    display: inline-block;
-    font-size: 1rem;
-    font-weight: $font-weight-bold;
-    margin-bottom: 0;
-    text-underline-position: under;
-    transform: translateY(-1px);
-  }
+    &__content {
+      display: none;
+    }
 
-  &__content {
-    border-left: 4px solid var(--ons-color-borders-indent);
-    display: block;
-    margin: 1rem 0 0;
-    padding: 0 0 0 1.3em;
+    &__title {
+      display: inline-block;
+      font-size: 1rem;
+      font-weight: $font-weight-bold;
+      margin-bottom: 0;
+      text-underline-position: under;
+      transform: translateY(-1px);
+    }
   }
 
-  &[open] & {
+  &--open & {
     &__icon {
       left: -0.1rem;
       top: 0.2rem;
       transform: rotate(90deg);
     }
+
+    &__content {
+      border-left: 4px solid var(--ons-color-borders-indent);
+      display: block;
+      margin: 1rem 0 0;
+      padding: 0 0 0 1.3em;
+    }
   }
 
   &--accordion & {
@@ -110,12 +116,15 @@ $details-caret-width: 1.5rem;
       padding: 0;
     }
   }
-}
 
-.ons-details--accordion {
-  &[open] {
+  &--accordion.ons-details--open {
     .ons-details__icon {
+      position: absolute;
       top: 1.2rem;
     }
   }
+
+  &__icon {
+    display: none;
+  }
 }

package/components/details/_macro.njk

@@ -1,5 +1,5 @@
 {% macro onsDetails(params) %}
-    <details
+    <div
         id="{{ params.id }}"
         class="ons-details ons-js-details{% if params.isAccordion %} ons-details--accordion{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}"
         {% if params.group %} data-group="{{ params.group }}"{% endif %}
@@ -7,7 +7,7 @@
         {% if params.saveState %} data-save-state="true"{% endif %}
         {% if params.open %} data-open="true"{% endif %}
     >
-        <summary
+        <div
             class="ons-details__heading ons-js-details-heading"
             {% if params.headingAttributes %}{% for attribute, value in (params.headingAttributes.items() if params.headingAttributes is mapping and params.headingAttributes.items else params.headingAttributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
         >
@@ -20,11 +20,11 @@
                             "iconType": "chevron"
                         })
                     }}</span>
-        </summary>
+        </div>
         <div id="{{ params.id }}-content" class="ons-details__content ons-js-details-content"
             {% if params.contentAttributes %}{% for attribute, value in (params.contentAttributes.items() if params.contentAttributes is mapping and params.contentAttributes.items else params.contentAttributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
         >
             {{ params.content | safe }}{{ caller() if caller }}
         </div>
-    </details>
+    </div>
 {% endmacro %}

package/components/details/_macro.spec.js

@@ -40,10 +40,7 @@ describe('macro: details', () => {
   it('has provided title text', () => {
     const $ = cheerio.load(renderComponent('details', EXAMPLE_DETAILS_BASIC));
 
-    const titleText = $('.ons-details__title')
-      .first()
-      .text()
-      .trim();
+    const titleText = $('.ons-details__title').first().text().trim();
     expect(titleText).toBe('Title for details');
   });
 
@@ -62,9 +59,7 @@ describe('macro: details', () => {
   it('has provided content text', () => {
     const $ = cheerio.load(renderComponent('details', EXAMPLE_DETAILS_BASIC));
 
-    const titleText = $('.ons-details__content')
-      .text()
-      .trim();
+    const titleText = $('.ons-details__content').text().trim();
     expect(titleText).toEqual(expect.stringContaining('Content for details'));
   });
 
@@ -143,9 +138,7 @@ describe('macro: details', () => {
   it('calls with content', () => {
     const $ = cheerio.load(renderComponent('details', { EXAMPLE_DETAILS_BASIC }, 'Example content...'));
 
-    const content = $('.ons-details__content')
-      .text()
-      .trim();
+    const content = $('.ons-details__content').text().trim();
     expect(content).toEqual(expect.stringContaining('Example content...'));
   });
 });

package/components/details/details.dom.js

@@ -6,7 +6,7 @@ async function initialiseDetailsEls() {
 
   if (detailsComponents.length && !accordionComponents.length) {
     const Details = (await import('./details')).default;
-    detailsComponents.map(element => new Details(element));
+    detailsComponents.map((element) => new Details(element));
   }
 }
 

package/components/details/details.js

@@ -7,17 +7,25 @@ export default class Details {
     // Elements
     this.details = detailsElement;
     this.detailsHeader = this.details.querySelector('.ons-js-details-heading');
+    this.content = this.details.querySelector('.ons-js-details-content');
 
     // Initialise
     const detailsId = detailsElement.getAttribute('id');
 
+    this.details.setAttribute('role', 'group');
+    this.detailsHeader.setAttribute('role', 'link');
+    this.detailsHeader.setAttribute('aria-controls', detailsId);
+    this.detailsHeader.setAttribute('tabindex', 0);
+
     if (localStorage.getItem(detailsId) || this.open) {
       this.setOpen(true);
-      this.details['setAttribute']('open', '');
+    } else {
+      this.setOpen(false);
     }
 
     this.detailsHeader.addEventListener('click', this.toggle.bind(this));
     this.detailsHeader.addEventListener('keydown', this.keyboardInteraction.bind(this));
+    this.details.classList.add('ons-details--initialised');
   }
 
   toggle(event) {
@@ -28,10 +36,14 @@ export default class Details {
   setOpen(open) {
     if (open !== this.isOpen) {
       const action = open ? 'Open' : 'Close';
+      const cls = open ? 'add' : 'remove';
       const openAttribute = open ? 'set' : 'remove';
 
       this.isOpen = open;
       this.details[`${openAttribute}Attribute`]('open', '');
+      this.details.classList[cls]('ons-details--open');
+      this.detailsHeader.setAttribute('aria-expanded', open);
+      this.content.setAttribute('aria-hidden', !open);
       this.detailsHeader.setAttribute('data-ga-action', `${action} panel`);
 
       if (this.onOpen && this.onClose) {