@ons/design-system 53.1.1 → 55.0.0

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>

package/components/input/_input-type.scss

@@ -14,7 +14,16 @@
     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;
+      outline: 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;
+      outline: none;
     }
   }
 
@@ -36,13 +45,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 +86,26 @@
     }
   }
 }
+
+// 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;
+    outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}

package/components/input/_input.scss

@@ -1,10 +1,18 @@
 %ons-input-focus {
-  box-shadow: 0 0 0 3px $color-focus, inset 0 0 0 1px $color-input;
-  outline: none;
+  box-shadow: 0 0 0 $input-border-width $color-input-border, 0 0 0 4px $color-focus;
+
+  // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
+  outline: 3px solid transparent;
+  outline-offset: 1px;
+
+  @media screen and (forced-colors: active) {
+    // To better match the focus states of native controls
+    outline-color: Highlight;
+  }
 }
 
 .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 +53,9 @@
   }
 
   &--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;
+    outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
   }
 
   &--with-description {
@@ -73,7 +82,9 @@
 
 .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("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11.75 7.7'%3E%3Cpath fill='currentColor' d='m1.37.15 4.5 5.1 4.5-5.1a.37.37 0 0 1 .6 0l.7.7a.45.45 0 0 1 0 .5l-5.5 6.2a.37.37 0 0 1-.6 0l-5.5-6.1a.64.64 0 0 1 0-.6l.7-.7a.64.64 0 0 1 .6 0Z'/%3E%3C/svg%3E")
+    no-repeat center right 10px;
   background-size: 1rem;
   line-height: 1.3rem;
   padding: 0.39rem 2rem 0.39rem $input-padding-horizontal;
@@ -100,10 +111,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 +133,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 +167,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 or params.suffix is defined and params.suffix %}aria-labelledby="{{ params.prefix.id if params.prefix }}{{ params.suffix.id if params.suffix }}"{% 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,21 +71,24 @@
         {% 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 %}
-                {% 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 }}
-                    {% set abbr = params.prefix or params.suffix %}
-                    <abbr
-                        {% if abbr.id is defined and abbr.id %}id="{{ abbr.id }}" {% endif %}
-                        class="ons-input-type__type ons-js-input-abbr"
-                         title="{{ abbr.title }}"
-                        >{{ abbr.text or abbr.title }}</abbr>
+                <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>
                 </span>
-            </span>
+            {% endif %}
         {% elif params.searchButton is defined and params.searchButton %}
             <span class="ons-grid--flex ons-search">
                 {% call onsSearch({