@ons/design-system 54.0.0 → 54.0.1

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

@@ -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 {

package/components/checkboxes/_checkbox.scss

@@ -10,9 +10,9 @@ $checkbox-padding: 11px;
   &__input {
     appearance: none;
     background: url(#{$static}/img/icons--check.svg) no-repeat center center;
-    background-color: $color-white;
+    background-color: $color-input-bg;
     background-size: 0;
-    border: 2px solid $color-input;
+    border: 2px solid $color-input-border;
     border-radius: 0.2rem;
     box-sizing: border-box;
     height: $checkbox-input-width;
@@ -73,7 +73,7 @@ $checkbox-padding: 11px;
       }
 
       &:focus {
-        box-shadow: 0 0 0 3px $color-focus;
+        @extend %ons-input-focus;
       }
     }
 
@@ -101,7 +101,7 @@ $checkbox-padding: 11px;
       }
 
       &:focus {
-        box-shadow: 0 0 0 3px $color-focus;
+        @extend %ons-input-focus;
       }
 
       & + .ons-checkbox__label {
@@ -122,7 +122,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 +152,7 @@ $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;
   }
 
   .ons-panel--error .ons-radio__input:checked ~ &__other > .ons-input--text:required:not(:focus) {
@@ -179,7 +179,7 @@ $checkbox-padding: 11px;
       top: 0.1rem;
 
       &:focus {
-        box-shadow: 0 0 0 3px $color-focus;
+        @extend %ons-input-focus;
       }
     }
 

package/components/input/_input-type.scss

@@ -14,7 +14,14 @@
     z-index: 1;
 
     &:focus {
-      box-shadow: inset 0 0 0 1px $color-input;
+      // Overide default input focus so it can wrap prefix/suffix too
+      box-shadow: none;
+    }
+
+    // Overide default input error style so it can wrap prefix/suffix too
+    &.ons-input--error:not(:focus) {
+      border-right: $input-border-width solid $color-input-border;
+      box-shadow: none;
     }
   }
 
@@ -36,13 +43,15 @@
 
   &__type,
   &__type[title] {
-    border: 1px solid $color-input;
+    border: 1px solid $color-input-border;
   }
 
   &__input:focus + &__type::after {
+    // Style input + prefix/suffix on focus
+    @extend %ons-input-focus;
+
     border-radius: $input-radius;
     bottom: 0;
-    box-shadow: 0 0 0 3px $color-focus;
     content: '';
     display: block;
     left: 0;
@@ -75,3 +84,25 @@
     }
   }
 }
+
+// Errors
+.ons-input--error:not(:focus) {
+  & + .ons-input-type__type,
+  & + .ons-input-type__type[title] {
+    border-color: $color-errors;
+  }
+
+  & + .ons-input-type__type::after {
+    border-radius: $input-radius;
+    bottom: 0;
+
+    // Style input + prefix/suffix for errors
+    box-shadow: 0 0 0 1px $color-errors;
+    content: '';
+    display: block;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}

package/components/input/_input.scss

@@ -1,10 +1,10 @@
 %ons-input-focus {
-  box-shadow: 0 0 0 3px $color-focus, inset 0 0 0 1px $color-input;
+  box-shadow: 0 0 0 $input-border-width $color-input-border, 0 0 0 4px $color-focus;
   outline: none;
 }
 
 .ons-input {
-  border: $input-border-width solid $color-input;
+  border: $input-border-width solid $color-input-border;
   border-radius: $input-radius;
   color: inherit;
   display: block;
@@ -45,8 +45,8 @@
   }
 
   &--error:not(:focus) {
-    border: 1px solid $color-errors;
-    box-shadow: inset 0 0 0 1px $color-errors;
+    border: $input-border-width solid $color-errors;
+    box-shadow: 0 0 0 $input-border-width $color-errors;
   }
 
   &--with-description {
@@ -73,7 +73,7 @@
 
 .ons-input--select {
   appearance: none;
-  background: $color-white url('#{$static}/img/icons--chevron-down.svg') no-repeat center right 10px;
+  background: $color-input-bg url('#{$static}/img/icons--chevron-down.svg') no-repeat center right 10px;
   background-size: 1rem;
   line-height: 1.3rem;
   padding: 0.39rem 2rem 0.39rem $input-padding-horizontal;
@@ -100,10 +100,10 @@
     color: transparent;
   }
   &:valid:not(:placeholder-shown) {
-    background-color: $color-white;
+    background-color: $color-input-bg;
   }
   &:focus {
-    background-color: $color-white;
+    background-color: $color-input-bg;
   }
 }
 
@@ -122,7 +122,7 @@
 .ons-input--ghost {
   border: 2px solid rgba(255, 255, 255, 0.6);
   &:focus {
-    border: 2px solid $color-input;
+    border: 2px solid $color-input-border;
   }
 }
 
@@ -156,3 +156,11 @@
     }
   }
 }
+
+// Search type inputs - removes the 'X' clear button from webkit browsers
+input[type='search']::-webkit-search-decoration,
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-results-button,
+input[type='search']::-webkit-search-results-decoration {
+  display: none;
+}

package/components/input/_macro.njk

@@ -27,7 +27,7 @@
             type="{{ type }}"
             id="{{ params.id }}"
             class="ons-input ons-input--text ons-input-type__input{% if params.error is defined and params.error %} ons-input--error{% endif %}{% if params.searchButton is defined and params.searchButton %} ons-search__input{% endif %}{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}{% if params.width is defined and params.width %} ons-input{% if params.type is defined and (params.type == 'number' or params.type == 'tel') %}-number{% endif %}--w-{{ params.width }}{% endif %}{{ exclusiveClass }}{{ inputPlaceholder }}"
-            {% if ((params.prefix is defined and params.prefix) and (params.prefix.id is defined and params.prefix.id)) or ((params.suffix is defined and params.suffix) and (params.suffix.id is defined and params.suffix.id)) %}aria-labelledby="{{ params.prefix.id if params.prefix.id }}{{ params.suffix.id if params.suffix.id }}"{% endif %}
+            {% if params.prefix is defined and params.prefix and params.prefix.id is defined and params.prefix.id %}aria-labelledby="{{ params.prefix.id }}"{% elif params.suffix is defined and params.suffix and params.suffix.id is defined and params.suffix.id %}aria-labelledby="{{ params.suffix.id }}"{% endif %}
             {% if params.name is defined and params.name %}name="{{ params.name }}"{% endif %}
             {% if params.value is defined and params.value %}value="{{ params.value }}"{% endif %}
             {% if params.accept is defined and params.accept %}accept="{{ params.accept }}"{% endif %}
@@ -71,25 +71,23 @@
         {% endif %}
 
         {% if params.prefix is defined and params.prefix or params.suffix is defined and params.suffix %}
-            {% if (params.prefix is defined and params.prefix and params.prefix.id is defined and params.prefix.id) or (params.suffix is defined and params.suffix and params.suffix.id is defined and params.suffix.id) %}
-                {% if (params.prefix.title is defined and params.prefix.title) or (params.suffix.title is defined and params.suffix.title) %}
-                    {% if params.prefix is defined and params.prefix %}
-                        {% set prefixClass = " ons-input-type--prefix" %}
-                    {% endif %}
+            {% if (params.prefix is defined and params.prefix and params.prefix.id is defined and params.prefix.id and params.prefix.title is defined and params.prefix.title) or (params.suffix is defined and params.suffix and params.suffix.id is defined and params.suffix.id and params.suffix.title is defined and params.suffix.title) %}
+                {% if params.prefix is defined and params.prefix %}
+                    {% set prefixClass = " ons-input-type--prefix" %}
+                {% endif %}
 
-                    <span class="ons-input-type{{ prefixClass }}">
-                        <span class="ons-input-type__inner">
-                            {{ input | safe }}
+                <span class="ons-input-type{{ prefixClass }}">
+                    <span class="ons-input-type__inner">
+                        {{ input | safe }}
 
-                            {% set abbr = params.prefix or params.suffix %}
-                            <abbr
-                                id="{{ abbr.id }}" 
-                                class="ons-input-type__type ons-js-input-abbr" 
-                                title="{{ abbr.title }}"
-                                >{{ abbr.text or abbr.title }}</abbr>
-                        </span>
+                        {% set abbr = params.prefix or params.suffix %}
+                        <abbr
+                            id="{{ abbr.id }}"
+                            class="ons-input-type__type ons-js-input-abbr"
+                            title="{{ abbr.title }}"
+                            >{{ abbr.text or abbr.title }}</abbr>
                     </span>
-                {% endif %}
+                </span>
             {% endif %}
         {% elif params.searchButton is defined and params.searchButton %}
             <span class="ons-grid--flex ons-search">

package/components/radios/_radio.scss

@@ -9,7 +9,7 @@
     box-shadow: inset 0 0 0 3px $color-white;
 
     &:checked {
-      background: $color-input;
+      background: $color-input-border;
     }
   }
 
@@ -27,7 +27,7 @@
       }
 
       &:focus {
-        box-shadow: 0 0 0 3px $color-focus, inset 0 0 0 3px $color-white;
+        box-shadow: inset 0 0 0 3px $color-input-bg, 0 0 0 $input-border-width $color-input-border, 0 0 0 4px $color-focus;
       }
     }
   }

package/components/relationships/_relationships.scss

@@ -1,7 +1,7 @@
 .ons-relationships {
   &__playback {
-    border-bottom: 1px solid $color-input;
-    border-top: 1px solid $color-input;
+    border-bottom: 1px solid $color-input-border;
+    border-top: 1px solid $color-input-border;
     margin: 2rem 0 0;
     padding: 1rem 0;
 

package/components/table/_table.scss

@@ -107,8 +107,8 @@
       overflow-x: scroll;
       width: 100%;
       &:focus {
-        outline: 3px solid $color-focus;
-        outline-offset: 3px;
+        box-shadow: 0 0 0 3px $color-page-light, 0 0 0 5px $color-text-link-focus, 0 0 0 8px $color-focus;
+        outline: none;
       }
       .ons-table__header,
       .ons-table__cell {
@@ -119,6 +119,7 @@
       .ons-table__right-shadow,
       .ons-table__left-shadow {
         height: 100%;
+        padding: 2px;
         position: absolute;
         top: 0;
         width: 5px;

package/components/tabs/_tabs.scss

@@ -1,17 +1,33 @@
 .ons-tabs {
   margin-bottom: 1rem;
-}
 
-// Tabs - list
-.ons-tabs__list {
-  border-bottom: 0;
-  margin: 0 0 1rem;
-  overflow: visible;
-  padding: 0;
+  &__title {
+    @extend .ons-u-fs-r--b;
+  }
 
-  &--row {
-    border-bottom: 1px solid $color-borders;
-    margin: 0;
+  // Anchor links list
+  &__list {
+    border-bottom: 0;
+    margin: 0 0 1rem;
+    overflow: visible;
+    padding: 0;
+
+    // Tabs
+    &--row {
+      margin: 0;
+      position: relative;
+
+      &::after {
+        background: $color-borders;
+        bottom: 0;
+        box-shadow: 0 1px 0 0 $color-page-light;
+        content: '';
+        height: 1px;
+        left: 0;
+        position: absolute;
+        width: 100%;
+      }
+    }
   }
 }
 
@@ -32,7 +48,7 @@
   border-radius: 3px 3px 0 0;
   color: $color-text;
   display: inline-block;
-  height: 2.5rem;
+  height: 2.55rem;
   line-height: 2.3rem;
   margin: 0 0.1rem 0 0;
   overflow: visible;
@@ -47,47 +63,52 @@
     text-decoration: underline solid $color-text 2px;
   }
 
+  &:focus {
+    background-color: $color-focus;
+    border-bottom: 1px solid $color-borders;
+    box-shadow: inset 0 0 0 9px $color-button-secondary,
+      inset 17px 0 0 0 $color-button-secondary,
+      inset -17px 0 0 0 $color-button-secondary,
+      inset 0 -13px 0 0 $color-text-link-focus;
+    color: $color-text-link-focus;
+    outline: none;
+    text-decoration: underline solid $color-text 2px;
+  }
+
+  // Tab when selected
   &[aria-selected='true'] {
-    background-color: $color-white;
+    background-color: $color-page-light;
+    border-bottom: none;
     border-color: $color-borders;
-    // Tab when selected
     border-radius: 3px 3px 0 0;
-    font-weight: 700;
     text-decoration: none;
+    z-index: 1;
 
-    &::after {
-      background: $color-white;
-      bottom: -2px;
-      box-shadow: none;
-      content: '';
-      height: 0.09rem;
-      left: 0;
-      // hides the lower border of the active tab.
-      position: absolute;
-      right: 0;
-      z-index: 3;
+    &:focus {
+      background-color: $color-focus;
+      border-bottom: 1px solid $color-page-light;
+      box-shadow: inset 0 0 0 9px $color-page-light,
+        inset 17px 0 0 0 $color-page-light,
+        inset -17px 0 0 0 $color-page-light,
+        inset 0 -13px 0 0 $color-text-link-focus;
+      text-decoration: none;
     }
   }
-
-  &:focus {
-    background-color: $color-focus;
-    color: $color-text-link-focus;
-    outline: none;
-  }
 }
 
 // Tabs - Panels
 .ons-tabs__panel {
-  margin-bottom: 1rem;
+  padding-bottom: 1rem;
   padding-top: 1rem;
   position: relative;
-  z-index: 10;
 
   &--hidden {
     display: none;
   }
 
   &:focus {
-    outline: 4px solid $color-focus;
+    box-shadow: 0 0 0 3px $color-page-light, 0 0 0 5px $color-text-link-focus, 0 0 0 8px $color-focus;
+    outline: none;
+    z-index: 1;
   }
 }

package/components/tabs/tabs.js

@@ -30,8 +30,6 @@ export default class Tabs {
     this.jsTabItemAsRowClass = 'ons-tab__list-item--row';
     this.jsTabAsListClass = 'ons-tab--row';
 
-    this.tabsTitle.classList.add('ons-u-vh');
-
     if (matchMediaUtil.hasMatchMedia()) {
       this.setupViewportChecks();
     } else {
@@ -61,6 +59,8 @@ export default class Tabs {
     this.tabList[0].setAttribute('role', 'tablist');
     this.tabList[0].classList.add(this.jsTabListAsRowClass);
 
+    this.tabsTitle.classList.add('ons-u-vh');
+
     this.tabPanels.forEach(panel => {
       panel.setAttribute('tabindex', '0');
     });
@@ -90,6 +90,8 @@ export default class Tabs {
     this.tabList[0].removeAttribute('role');
     this.tabList[0].classList.remove(this.jsTabListAsRowClass);
 
+    this.tabsTitle.classList.remove('ons-u-vh');
+
     this.tabPanels.forEach(panel => {
       panel.removeAttribute('tabindex', '0');
     });

package/components/upload/_upload.scss

@@ -1,6 +1,6 @@
 .ons-input--upload {
   background: $color-white;
-  border: 1px solid $color-input;
+  border: 1px solid $color-input-border;
   border-radius: $input-radius;
   font-size: 1rem;
   padding: 0;
@@ -9,7 +9,7 @@
     background: $color-button-secondary;
     border: 0;
     border-bottom-right-radius: 0;
-    border-right: 1px solid $color-input;
+    border-right: 1px solid $color-input-border;
     border-top-right-radius: 0;
     color: $color-text;
     font-size: 1rem;