@ons/design-system 54.0.1 → 55.2.0

package/components/checkboxes/_checkbox.scss

@@ -9,12 +9,11 @@ $checkbox-padding: 11px;
 
   &__input {
     appearance: none;
-    background: url(#{$static}/img/icons--check.svg) no-repeat center center;
     background-color: $color-input-bg;
-    background-size: 0;
     border: 2px solid $color-input-border;
     border-radius: 0.2rem;
     box-sizing: border-box;
+    cursor: pointer;
     height: $checkbox-input-width;
     left: $checkbox-padding;
     position: absolute;
@@ -22,13 +21,30 @@ $checkbox-padding: 11px;
     width: $checkbox-input-width;
     z-index: 1;
 
+    // Check icon
+    &::after {
+      border: solid $color-input-border;
+      border-radius: 1px;
+      border-top-color: $color-input-bg;
+      border-width: 0 0 3px 3px;
+      box-sizing: border-box;
+      content: '';
+      height: 7px;
+      left: 2px;
+      opacity: 0;
+      position: absolute;
+      top: 4px;
+      transform: rotate(-45deg);
+      width: 14px;
+    }
+
     &:focus,
     &:checked {
       outline: none;
     }
 
-    &:checked {
-      background-size: 14px;
+    &:checked::after {
+      opacity: 1;
     }
 
     &:disabled {
@@ -36,9 +52,24 @@ $checkbox-padding: 11px;
       cursor: not-allowed;
     }
 
-    &:disabled + label {
-      color: $color-grey-35;
+    &:disabled:checked::after {
+      border-color: $color-border-disabled;
+    }
+
+    &:disabled + .ons-checkbox__label,
+    &:disabled:checked + .ons-checkbox__label {
+      color: $color-border-disabled;
       cursor: not-allowed;
+
+      &::before {
+        border: 1px solid $color-border-disabled;
+      }
+    }
+
+    &:disabled:checked + .ons-checkbox__label {
+      &::before {
+        box-shadow: 0 0 0 1px $color-border-disabled;
+      }
     }
   }
 
@@ -47,9 +78,9 @@ $checkbox-padding: 11px;
       padding: 0 0 0 1.85rem;
 
       &::before {
-        background: none;
-        border: none;
-        box-shadow: none;
+        background: none !important;
+        border: none !important;
+        box-shadow: none !important;
       }
 
       & > .ons-checkbox__label--with-description {
@@ -69,6 +100,7 @@ $checkbox-padding: 11px;
           background: none;
           border: none;
           box-shadow: none;
+          outline: none;
         }
       }
 
@@ -153,6 +185,7 @@ $checkbox-padding: 11px;
   &__input:checked + &__label::before {
     background: $color-grey-5;
     box-shadow: 0 0 0 1px $color-input-border;
+    outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
   }
 
   .ons-panel--error .ons-radio__input:checked ~ &__other > .ons-input--text:required:not(:focus) {
@@ -176,7 +209,7 @@ $checkbox-padding: 11px;
   &--toggle & {
     &__input {
       left: 0;
-      top: 0.1rem;
+      top: 0.2rem;
 
       &:focus {
         @extend %ons-input-focus;

package/components/checkboxes/_macro.njk

@@ -8,13 +8,13 @@
         <p class="ons-checkboxes__label{{ " " + params.checkboxesLabelClasses if params.checkboxesLabelClasses }}">{{ params.checkboxesLabel }}</p>
         {% set hasOther = false %}
         {% for checkbox in params.checkboxes %}
-            {% if checkbox.other is defined and checkbox.other %}
+            {% if checkbox.other %}
                 {% set hasOther = true %}
             {% endif %}
         {% endfor %}
-        {% if hasOther == false and params.autoSelect is defined and params.autoSelect and params.autoSelect.selectAllText is defined %}
+        {% if hasOther == false and params.autoSelect and params.autoSelect.selectAllText %}
             {% set btnClasses = ['small', 'secondary'] %}
-            {% if params.borderlessParent is defined and params.borderlessParent == false %}
+            {% if params.borderlessParent == false %}
                 {% set btnClasses = ['small', 'secondary', 'ghost-dark'] %}
             {% endif %}
             {{
@@ -33,19 +33,19 @@
             {% for checkbox in params.checkboxes %}
                 {% set childIsChecked = false %}
                 {% set labelHTML = checkbox.label.text %}
-                {% if params.mutuallyExclusive is defined and params.mutuallyExclusive %}
+                {% if params.mutuallyExclusive %}
                     {% set exclusiveClass = ' ons-js-exclusive-group-item' %}
                 {% endif %}
-                {% if params.borderless is defined and params.borderless %}
+                {% if params.borderless %}
                     {% set borderless = " ons-checkbox--no-border" %}
                 {% endif %}
-                {% if checkbox.other is defined and checkbox.other %}
+                {% if checkbox.other %}
                     {% set otherClass = " ons-js-other" %}
-                    {% if checkbox.other.selectAllChildren is defined and checkbox.other.selectAllChildren == true %}
+                    {% if checkbox.other.selectAllChildren == true %}
                         {% set otherClass = otherClass + " ons-js-select-all-children" %}
                     {% endif %}
                     {% for otherCheckbox in checkbox.other.checkboxes %}
-                        {% if otherCheckbox.checked is defined and otherCheckbox.checked %}
+                        {% if otherCheckbox.checked %}
                             {% set childIsChecked = true %}
                         {% endif %}
                     {% endfor %}
@@ -69,7 +69,7 @@
                         "attributes": checkbox.attributes
                     } %}
 
-                    {% if checkbox.other is defined and checkbox.other %}
+                    {% if checkbox.other %}
                         {% set config = config | setAttributes({
                             "other": {
                                 "open": checkbox.other.open | default(false),
@@ -103,7 +103,7 @@
         </div>
     {% endset %}
 
-    {% if params.mutuallyExclusive is defined and params.mutuallyExclusive %}
+    {% if params.mutuallyExclusive %}
         {% call onsMutuallyExclusive({
             "id": params.id,
             "classes": params.classes,

package/components/checkboxes/checkbox-with-fieldset.js

@@ -1,14 +1,15 @@
 export default class CheckboxWithFieldset {
-  constructor(fieldset, inputs) {
+  constructor(fieldset, checkboxes) {
     this.fieldset = fieldset;
-    this.inputs = inputs;
+    this.checkboxes = checkboxes;
+    this.fieldsetParent = fieldset.closest('.ons-checkbox');
+    this.selectAllChildrenInput = this.fieldsetParent.querySelector('.ons-js-select-all-children');
     this.childInputs = [...this.fieldset.querySelectorAll('input')];
-    this.selectAllChildrenInput = this.inputs.find(input => input.classList.contains('ons-js-select-all-children'));
 
     if (this.selectAllChildrenInput) {
       this.selectAllChildrenInput.addEventListener('change', this.checkChildInputsOnSelect.bind(this));
     } else {
-      this.inputs.forEach(input => input.addEventListener('change', this.uncheckChildInputsOnDeselect.bind(this)));
+      this.checkboxes.forEach(checkbox => checkbox.addEventListener('change', this.uncheckChildInputsOnDeselect.bind(this)));
     }
   }
 
@@ -19,7 +20,7 @@ export default class CheckboxWithFieldset {
   }
 
   uncheckChildInputsOnDeselect() {
-    const isOther = this.inputs.find(input => input.classList.contains('ons-js-other'));
+    const isOther = this.checkboxes.find(checkbox => checkbox.classList.contains('ons-js-other'));
     if (isOther && isOther.checked === false) {
       this.childInputs.forEach(input => {
         input.checked = false;

package/components/checkboxes/checkboxes.dom.js

@@ -15,16 +15,13 @@ domready(async () => {
       new CheckCheckbox(checkboxInput, openOther);
     }
 
-    const other = document.querySelector('.ons-js-other');
-    if (other) {
-      const selectAllChildrenInput = other.classList.contains('ons-js-select-all-children');
-      const otherFieldset = other.parentNode.querySelector('.ons-js-other-fieldset');
+    const otherFieldsets = [...document.querySelectorAll('.ons-js-other-fieldset')];
+    if (otherFieldsets) {
+      const CheckboxWithInnerFieldset = (await import('./checkbox-with-fieldset')).default;
 
-      if (otherFieldset) {
-        const CheckboxWithInnerFieldset = (await import('./checkbox-with-fieldset')).default;
-
-        new CheckboxWithInnerFieldset(otherFieldset, checkboxes, selectAllChildrenInput);
-      }
+      otherFieldsets.forEach(otherFieldset => {
+        new CheckboxWithInnerFieldset(otherFieldset, checkboxes);
+      });
     }
 
     const autoSelectButtons = [...document.querySelectorAll('.ons-js-auto-selector')];

package/components/code-highlight/_macro.njk

@@ -1,5 +1,5 @@
 {% macro onsCodeHighlight(params) %}
     <pre class="ons-patternlib-example__pre">{#
-        #}<code class="ons-patternlib-example__code ons-language-{{ params.language if params.language and params.language is defined else 'markup' }}">{{ params.code }}</code>{#
+        #}<code class="ons-patternlib-example__code ons-language-{{ params.language if params.language else 'markup' }}">{{ params.code }}</code>{#
     #}</pre>
 {% endmacro %}

package/components/collapsible/_collapsible.scss

@@ -10,7 +10,8 @@ $collapsible-caret-width: 1.5rem;
     pointer-events: initial;
     position: relative;
 
-    &::marker {
+    &::marker,
+    &::-webkit-details-marker {
       display: none;
     }
 

package/components/collapsible/_macro.njk

@@ -1,15 +1,15 @@
 {% macro onsCollapsible(params) %}
     <details
         id="{{ params.id }}"
-        class="ons-collapsible ons-js-collapsible{% if params.isAccordion is defined and params.isAccordion %} ons-collapsible--accordion{% endif %}{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}"
-        {% if params.group is defined and params.group %} data-group="{{ params.group }}"{% 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 %}
-        {% if params.saveState is defined and params.saveState %} data-save-state="true"{% endif %}
-        {% if params.open is defined and params.open %} data-open="true"{% endif %}
+        class="ons-collapsible ons-js-collapsible{% if params.isAccordion %} ons-collapsible--accordion{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}"
+        {% if params.group %} data-group="{{ params.group }}"{% endif %}
+        {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
+        {% if params.saveState %} data-save-state="true"{% endif %}
+        {% if params.open %} data-open="true"{% endif %}
     >
         <summary
             class="ons-collapsible__heading ons-js-collapsible-heading"
-            {% if params.headingAttributes is defined and params.headingAttributes %}{% for attribute, value in (params.headingAttributes.items() if params.headingAttributes is mapping and params.headingAttributes.items else params.headingAttributes) %}{{ attribute }}{% if value is defined and value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
+            {% 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 %}
         >
                 {% set titleTag = params.titleTag | default("h2") %}
                 <{{ titleTag }} class="ons-collapsible__title">{{ params.title }}</{{ titleTag }}>
@@ -22,7 +22,7 @@
                     }}</span>
         </summary>
         <div id="{{ params.id }}-content" class="ons-collapsible__content ons-js-collapsible-content"
-            {% if params.contentAttributes is defined and params.contentAttributes %}{% for attribute, value in (params.contentAttributes.items() if params.contentAttributes is mapping and params.contentAttributes.items else params.contentAttributes) %}{{ attribute }}{% if value is defined and value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
+            {% 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>

package/components/date-input/_macro.njk

@@ -21,7 +21,7 @@
     {%- endif -%}
 
     {% set fields %}
-        {% if params.day is defined and params.day %}
+        {% if params.day %}
             {{ onsInput({
                 "id": params.id + "-day",
                 "type": "number",
@@ -41,7 +41,7 @@
             }) }}
         {% endif %}
 
-        {% if params.month is defined and params.month %}
+        {% if params.month %}
             {{ onsInput({
                 "id": params.id + "-month",
                 "type": "number",
@@ -61,7 +61,7 @@
             }) }}
         {% endif %}
 
-        {% if params.year is defined and params.year %}
+        {% if params.year %}
             {{ onsInput({
                 "id": params.id + "-year",
                 "type": "number",
@@ -90,7 +90,7 @@
         {% endset %}
     {% endif %}
 
-    {% if params.mutuallyExclusive is defined and params.mutuallyExclusive %}
+    {% if params.mutuallyExclusive %}
         {% call onsMutuallyExclusive({
             "id": params.id,
             "legend": params.legendOrLabel,
@@ -109,7 +109,7 @@
             {{ fields | safe }}
         {% endcall %}
     {% elif numberOfFields == 1 %}
-        {% if params.error is defined and params.error %}
+        {% if params.error %}
             {% call onsError(params.error) %}
                 {{ fields | safe }}
             {% endcall %}

package/components/document-list/_macro.njk

@@ -1,20 +1,20 @@
 {% macro onsDocumentList(params) %}
-    <ul{% if params.id is defined and params.id %} id="{{ params.id }}"{% endif %} class="ons-document-list{{ ' ' + params.classes if params.classes is defined and params.classes else '' }}"{% 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}}="{{value}}"{% endfor %}{% endif %}>
+    <ul{% if params.id %} id="{{ params.id }}"{% endif %} class="ons-document-list{{ ' ' + params.classes if params.classes else '' }}"{% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}>
         {% for document in (params.documents if params.documents is iterable else params.documents.items()) %}
 
-        <li class="ons-document-list__item{{ ' ons-document-list__item--featured' if document.featured is defined and document.featured }}{{ ' ons-document-list__item--full-width' if document.fullWidth is defined and document.fullWidth == true }}{{ ' ' + document.classes if document.classes is defined and document.classes else '' }}"{% if document.attributes is defined and document.attributes %}{% for attribute, value in (document.attributes.items() if document.attributes is mapping and document.attributes.items else document.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}>
+        <li class="ons-document-list__item{{ ' ons-document-list__item--featured' if document.featured }}{{ ' ons-document-list__item--full-width' if document.fullWidth == true }}{{ ' ' + document.classes if document.classes else '' }}"{% if document.attributes %}{% for attribute, value in (document.attributes.items() if document.attributes is mapping and document.attributes.items else document.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}>
 
-            {% if document.fullWidth is defined and document.fullWidth == true %}
+            {% if document.fullWidth == true %}
 
-                <div class="ons-container{{ ' ons-container--wide' if document.wide is defined and document.wide == true }}">
+                <div class="ons-container{{ ' ons-container--wide' if document.wide == true }}">
 
             {% endif %}
 
-                    {% if document.thumbnail is defined or document.thumbnail == true %}
+                    {% if document.thumbnail %}
 
-                        <div class="ons-document-list__item-image{%- if document.metadata.file is defined and document.metadata.file %} ons-document-list__item-image--file{% endif %}" aria-hidden="true">
+                        <div class="ons-document-list__item-image{%- if document.metadata.file %} ons-document-list__item-image--file{% endif %}" aria-hidden="true">
                             <a class="ons-document-list__image-link{{ ' ons-document-list__image-link--placeholder' if not document.thumbnail.smallSrc }}" href="{{ document.url }}" tabindex="-1">
-                                {% if document.thumbnail.smallSrc is defined and document.thumbnail.smallSrc and document.thumbnail.largeSrc is defined and document.thumbnail.largeSrc %}
+                                {% if document.thumbnail.smallSrc and document.thumbnail.largeSrc %}
                                     <img srcset="{{ document.thumbnail.smallSrc }} 1x, {{ document.thumbnail.largeSrc }} 2x" src="{{ document.thumbnail.smallSrc }}" alt="" loading="lazy">
                                 {% endif %}
                             </a>
@@ -24,18 +24,18 @@
 
                     <div class="ons-document-list__item-content">
 
-                        <div class="ons-document-list__item-header{{ ' ons-document-list__item-header--reverse' if document.showMetadataFirst is defined and document.showMetadataFirst == true }}">
+                        <div class="ons-document-list__item-header{{ ' ons-document-list__item-header--reverse' if document.showMetadataFirst == true }}">
 
                             {% set titleTag = params.titleTag | default("h2") %}
 
                             <{{ titleTag }} class="ons-document-list__item-title ons-u-fs-m ons-u-mt-no ons-u-mb-xs">
                                 <a href="{{ document.url }}">{{ document.title }}
-                                {%- if document.metadata is defined and document.metadata and document.metadata.file is defined and document.metadata.file %}
+                                {%- if document.metadata and document.metadata.file %}
                                 <span class="ons-u-vh">
                                     {% set fileMetadataItems = [] %}
-                                    {% if document.metadata.file.fileType is defined and document.metadata.file.fileType %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.fileType + ' document download'), fileMetadataItems) %}{% endif %}
-                                    {% if document.metadata.file.fileSize is defined and document.metadata.file.fileSize %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.fileSize), fileMetadataItems) %}{% endif %}
-                                    {% if document.metadata.file.filePages is defined and document.metadata.file.filePages %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.filePages), fileMetadataItems) %}{% endif %}
+                                    {% if document.metadata.file.fileType %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.fileType + ' document download'), fileMetadataItems) %}{% endif %}
+                                    {% if document.metadata.file.fileSize %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.fileSize), fileMetadataItems) %}{% endif %}
+                                    {% if document.metadata.file.filePages %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.filePages), fileMetadataItems) %}{% endif %}
 
                                     , {{ fileMetadataItems | join(', ') }}
 
@@ -44,45 +44,45 @@
                                 </span></a>
                             </{{ titleTag }}>
 
-                            {%- if document.metadata is defined and document.metadata %}
+                            {%- if document.metadata %}
 
-                                <ul class="ons-document-list__item-metadata{% if document.description is defined and document.description %} ons-u-mb-xs{% else %} ons-u-mb-no{% endif %}">
+                                <ul class="ons-document-list__item-metadata{% if document.description %} ons-u-mb-xs{% else %} ons-u-mb-no{% endif %}">
 
-                                    {%- if document.metadata.date is defined and document.metadata.date %}
+                                    {%- if document.metadata.date %}
                                         <li class="ons-document-list__item-attribute">
                                             {% if document.metadata.date -%}
-                                                {% set prefixClasses = "ons-u-fw-b" if document.metadata.date.showPrefix is defined and document.metadata.date.showPrefix == true else "ons-u-vh" %}
+                                                {% set prefixClasses = "ons-u-fw-b" if document.metadata.date.showPrefix == true else "ons-u-vh" %}
                                                 <span class="{{ prefixClasses }}">{{ document.metadata.date.prefix | default("Published") }}: </span>
                                             {%- endif -%}
-                                            {% if document.metadata.date.iso is defined and document.metadata.date.iso -%}
+                                            {% if document.metadata.date.iso -%}
                                                 <time datetime="{{ document.metadata.date.iso }}">{{ document.metadata.date.short }}</time>
                                             {%- endif %}
                                         </li>
                                     {% endif %}
 
-                                    {%- if document.metadata.type is defined and document.metadata.type and document.metadata.type.text is defined and document.metadata.type.text %}
-                                        <li class="ons-document-list__item-attribute{%- if document.metadata.file is defined and document.metadata.file %} ons-u-mr-no{% endif %}">
-                                            {%- if document.metadata.type.url is defined and document.metadata.type.url %}
+                                    {%- if document.metadata.type and document.metadata.type.text %}
+                                        <li class="ons-document-list__item-attribute{%- if document.metadata.file %} ons-u-mr-no{% endif %}">
+                                            {%- if document.metadata.type.url %}
                                                 <a class="ons-document-list__attribute-link" href="{{ document.metadata.type.url }}">
                                             {% endif %}
-                                                    <span {% if not document.metadata.file and not document.metadata.type.url %}class="ons-u-fw-b"{% endif %}>{{ document.metadata.type.text }}{%- if document.metadata.type.ref is defined and document.metadata.type.ref %}: {% elif document.metadata.file is defined and document.metadata.file %},{% endif %}</span>
-                                            {%- if document.metadata.type.url is defined and document.metadata.type.url %}
+                                                    <span {% if not document.metadata.file and not document.metadata.type.url %}class="ons-u-fw-b"{% endif %}>{{ document.metadata.type.text }}{%- if document.metadata.type.ref %}: {% elif document.metadata.file %},{% endif %}</span>
+                                            {%- if document.metadata.type.url %}
                                                 </a>
                                             {% endif %}
-                                            {%- if document.metadata.type.ref is defined and document.metadata.type.ref %}
+                                            {%- if document.metadata.type.ref %}
                                                 <span>{{ document.metadata.type.ref }}</span>
                                             {% endif %}
                                         </li>
                                     {% endif %}
 
-                                    {%- if document.metadata.file is defined and document.metadata.file and document.metadata.file.fileType is defined and document.metadata.file.fileType %}
+                                    {%- if document.metadata.file and document.metadata.file.fileType %}
 
                                         <li class="ons-document-list__item-attribute" aria-hidden="true">
                                             {% set fileMetadataItems = [] %}
 
-                                            {% if document.metadata.file.fileType is defined and document.metadata.file.fileType %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.fileType), fileMetadataItems) %}{% endif %}
-                                            {% if document.metadata.file.fileSize is defined and document.metadata.file.fileSize %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.fileSize), fileMetadataItems) %}{% endif %}
-                                            {% if document.metadata.file.filePages is defined and document.metadata.file.filePages %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.filePages), fileMetadataItems) %}{% endif %}
+                                            {% if document.metadata.file.fileType %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.fileType), fileMetadataItems) %}{% endif %}
+                                            {% if document.metadata.file.fileSize %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.fileSize), fileMetadataItems) %}{% endif %}
+                                            {% if document.metadata.file.filePages %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.filePages), fileMetadataItems) %}{% endif %}
 
                                             {{ fileMetadataItems | join(', ') }}
                                         </li>
@@ -93,13 +93,13 @@
                             {% endif %}
                         </div>
 
-                        {% if document.description is defined and document.description %}
+                        {% if document.description %}
                             <div class="ons-document-list__item-description">{{ document.description | safe }}</div>
                         {% endif %}
 
                     </div>
 
-            {% if document.fullWidth is defined and document.fullWidth == true %}
+            {% if document.fullWidth == true %}
 
                 </div>
 

package/components/document-list/document-list.scss

@@ -120,6 +120,8 @@
       background-color: $color-banner-bg;
       border-bottom: none;
       display: block;
+      outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
+      outline-offset: -2px;
       padding: 2rem;
 
       @include mq(m) {

package/components/download-resources/download-resources.js

@@ -1061,9 +1061,28 @@ Math.easeInOutQuad = function(t, b, c, d) {
 
     // Toggle filters visibility on small devices
     function toggleFilters(bool) {
+      let resultsOptions = document.getElementsByClassName('ons-adv-filter__results-options')[0];
+      let resultsList = document.getElementsByClassName('ons-js-adv-filter__gallery')[0];
+      let header = document.getElementsByClassName('ons-header')[0];
+      let breadcrumbs = document.getElementsByClassName('ons-breadcrumb')[0];
+      let footer = document.getElementsByClassName('ons-footer')[0];
+
       Util.toggleClass(filtersPanel, 'ons-adv-filter__panel--is-visible', bool);
       Util.toggleClass(body, 'ons-no-scroll', bool);
       filtersTrigger.setAttribute('aria-expanded', bool);
+      filtersTrigger.setAttribute('aria-hidden', bool);
+      Util.toggleClass(filtersTrigger, 'ons-u-d-no', bool);
+
+      Util.toggleClass(resultsOptions, 'ons-u-d-no', bool);
+      Util.toggleClass(resultsList, 'ons-u-d-no', bool);
+      Util.toggleClass(header, 'ons-u-d-no', bool);
+      Util.toggleClass(breadcrumbs, 'ons-u-d-no', bool);
+      Util.toggleClass(footer, 'ons-u-d-no', bool);
+      resultsOptions.setAttribute('aria-hidden', bool);
+      resultsList.setAttribute('aria-hidden', bool);
+      header.setAttribute('aria-hidden', bool);
+      breadcrumbs.setAttribute('aria-hidden', bool);
+      footer.setAttribute('aria-hidden', bool);
     }
   }
 })();

package/components/download-resources/download-resources.spec.js

@@ -4,6 +4,20 @@ import { setViewport } from '../../tests/helpers/puppeteer';
 import { renderComponent, renderTemplate, setTestPage } from '../../tests/helpers/rendering';
 
 const EXAMPLE_PAGE = `
+  ${renderComponent('header', {})}
+  ${renderComponent('breadcrumbs', {
+    ariaLabel: 'Breadcrumbs',
+    itemsList: [
+      {
+        url: '/',
+        text: 'Home',
+      },
+      {
+        url: '/components',
+        text: 'Components',
+      },
+    ],
+  })}
   <div class="ons-js-adv-filter">
     ${renderComponent('button', {
       type: 'button',
@@ -175,6 +189,7 @@ const EXAMPLE_PAGE = `
       <p>Try selecting different filters to get results.</p>
     </div>
   </div>
+  ${renderComponent('footer', {})}
 `;
 
 const RENDERED_EXAMPLE_PAGE = renderTemplate(EXAMPLE_PAGE);
@@ -505,6 +520,32 @@ describe('script: download-resources', () => {
       expect(displayStyle).not.toBe('none');
     });
 
+    it('hides the underlying page elements when the "Show filters" button is pressed', async () => {
+      await page.click('.ons-js-adv-filter__trigger');
+
+      const isListHiddenClass = await page.$eval('.ons-js-adv-filter__gallery', node => node.classList.contains('ons-u-d-no'));
+      const isListAriaHidden = await page.$eval('.ons-js-adv-filter__gallery', node => node.getAttribute('aria-hidden'));
+      const isOptionsHiddenClass = await page.$eval('.ons-adv-filter__results-options', node => node.classList.contains('ons-u-d-no'));
+      const isOptionsAriaHidden = await page.$eval('.ons-adv-filter__results-options', node => node.getAttribute('aria-hidden'));
+      const isHeaderHiddenClass = await page.$eval('.ons-header', node => node.classList.contains('ons-u-d-no'));
+      const isHeaderAriaHidden = await page.$eval('.ons-header', node => node.getAttribute('aria-hidden'));
+      const isFooterHiddenClass = await page.$eval('.ons-footer', node => node.classList.contains('ons-u-d-no'));
+      const isFooterAriaHidden = await page.$eval('.ons-footer', node => node.getAttribute('aria-hidden'));
+      const isBreadcrumbsHiddenClass = await page.$eval('.ons-breadcrumb', node => node.classList.contains('ons-u-d-no'));
+      const isBreadcrumbsAriaHidden = await page.$eval('.ons-breadcrumb', node => node.getAttribute('aria-hidden'));
+
+      expect(isListHiddenClass).toBe(true);
+      expect(isListAriaHidden).toBe('true');
+      expect(isOptionsHiddenClass).toBe(true);
+      expect(isOptionsAriaHidden).toBe('true');
+      expect(isHeaderHiddenClass).toBe(true);
+      expect(isHeaderAriaHidden).toBe('true');
+      expect(isFooterHiddenClass).toBe(true);
+      expect(isFooterAriaHidden).toBe('true');
+      expect(isBreadcrumbsHiddenClass).toBe(true);
+      expect(isBreadcrumbsAriaHidden).toBe('true');
+    });
+
     it('hides filter elements when the "Show (n results)" button is pressed', async () => {
       await page.click('.ons-js-adv-filter__trigger');
       await page.click('.ons-js-adv-filter__show');
@@ -513,6 +554,33 @@ describe('script: download-resources', () => {
       expect(displayStyle).toBe('none');
     });
 
+    it('shows the underlying page elements when the "Show (n results)" button is pressed', async () => {
+      await page.click('.ons-js-adv-filter__trigger');
+      await page.click('.ons-js-adv-filter__show');
+
+      const isListHiddenClass = await page.$eval('.ons-js-adv-filter__gallery', node => node.classList.contains('ons-u-d-no'));
+      const isListAriaHidden = await page.$eval('.ons-js-adv-filter__gallery', node => node.getAttribute('aria-hidden'));
+      const isOptionsHiddenClass = await page.$eval('.ons-adv-filter__results-options', node => node.classList.contains('ons-u-d-no'));
+      const isOptionsAriaHidden = await page.$eval('.ons-adv-filter__results-options', node => node.getAttribute('aria-hidden'));
+      const isHeaderHiddenClass = await page.$eval('.ons-header', node => node.classList.contains('ons-u-d-no'));
+      const isHeaderAriaHidden = await page.$eval('.ons-header', node => node.getAttribute('aria-hidden'));
+      const isFooterHiddenClass = await page.$eval('.ons-footer', node => node.classList.contains('ons-u-d-no'));
+      const isFooterAriaHidden = await page.$eval('.ons-footer', node => node.getAttribute('aria-hidden'));
+      const isBreadcrumbsHiddenClass = await page.$eval('.ons-breadcrumb', node => node.classList.contains('ons-u-d-no'));
+      const isBreadcrumbsAriaHidden = await page.$eval('.ons-breadcrumb', node => node.getAttribute('aria-hidden'));
+
+      expect(isListHiddenClass).toBe(false);
+      expect(isListAriaHidden).toBe('false');
+      expect(isOptionsHiddenClass).toBe(false);
+      expect(isOptionsAriaHidden).toBe('false');
+      expect(isHeaderHiddenClass).toBe(false);
+      expect(isHeaderAriaHidden).toBe('false');
+      expect(isFooterHiddenClass).toBe(false);
+      expect(isFooterAriaHidden).toBe('false');
+      expect(isBreadcrumbsHiddenClass).toBe(false);
+      expect(isBreadcrumbsAriaHidden).toBe('false');
+    });
+
     it('hides filter elements when the "Close" button is pressed', async () => {
       await page.click('.ons-js-adv-filter__trigger');
       await page.click('.ons-js-adv-filter__close');
@@ -520,6 +588,33 @@ describe('script: download-resources', () => {
       const displayStyle = await page.$eval('.ons-adv-filter__panel', node => getComputedStyle(node).display);
       expect(displayStyle).toBe('none');
     });
+
+    it('shows the underlying page elements when the "Close" button is pressed', async () => {
+      await page.click('.ons-js-adv-filter__trigger');
+      await page.click('.ons-js-adv-filter__close');
+
+      const isListHiddenClass = await page.$eval('.ons-js-adv-filter__gallery', node => node.classList.contains('ons-u-d-no'));
+      const isListAriaHidden = await page.$eval('.ons-js-adv-filter__gallery', node => node.getAttribute('aria-hidden'));
+      const isOptionsHiddenClass = await page.$eval('.ons-adv-filter__results-options', node => node.classList.contains('ons-u-d-no'));
+      const isOptionsAriaHidden = await page.$eval('.ons-adv-filter__results-options', node => node.getAttribute('aria-hidden'));
+      const isHeaderHiddenClass = await page.$eval('.ons-header', node => node.classList.contains('ons-u-d-no'));
+      const isHeaderAriaHidden = await page.$eval('.ons-header', node => node.getAttribute('aria-hidden'));
+      const isFooterHiddenClass = await page.$eval('.ons-footer', node => node.classList.contains('ons-u-d-no'));
+      const isFooterAriaHidden = await page.$eval('.ons-footer', node => node.getAttribute('aria-hidden'));
+      const isBreadcrumbsHiddenClass = await page.$eval('.ons-breadcrumb', node => node.classList.contains('ons-u-d-no'));
+      const isBreadcrumbsAriaHidden = await page.$eval('.ons-breadcrumb', node => node.getAttribute('aria-hidden'));
+
+      expect(isListHiddenClass).toBe(false);
+      expect(isListAriaHidden).toBe('false');
+      expect(isOptionsHiddenClass).toBe(false);
+      expect(isOptionsAriaHidden).toBe('false');
+      expect(isHeaderHiddenClass).toBe(false);
+      expect(isHeaderAriaHidden).toBe('false');
+      expect(isFooterHiddenClass).toBe(false);
+      expect(isFooterAriaHidden).toBe('false');
+      expect(isBreadcrumbsHiddenClass).toBe(false);
+      expect(isBreadcrumbsAriaHidden).toBe('false');
+    });
   });
 });