@ons/design-system 54.0.1 → 55.0.0

package/components/input/_input-type.scss

@@ -16,12 +16,14 @@
     &:focus {
       // 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;
     }
   }
 
@@ -101,6 +103,7 @@
     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,6 +1,14 @@
 %ons-input-focus {
   box-shadow: 0 0 0 $input-border-width $color-input-border, 0 0 0 4px $color-focus;
-  outline: none;
+
+  // 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 {
@@ -47,6 +55,7 @@
   &--error:not(:focus) {
     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-input-bg 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;

package/components/label/_label.scss

@@ -19,7 +19,7 @@
   &--placeholder {
     font-size: 1rem;
     font-weight: $font-weight-regular;
-    left: 8px;
+    left: 10px;
     position: absolute;
     top: 6px;
   }

package/components/label/_macro.njk

@@ -1,32 +1,44 @@
 {% macro onsLabel(params) %}
-    {% set field -%}
-        <span
-          {% if params.id is defined and params.id %} id="{{ params.id }}-description-hint"{% else %}id="description-hint"{% endif %}
-          class="ons-label__description {% if params.inputType is defined and params.inputType %}ons-{{ params.inputType }}__label--with-description{% else %} ons-input--with-description{% endif %}">
+    {% if params.id %}
+        {% set descriptionID = params.id ~ "-description-hint" %}  
+    {% else %}
+        {% set descriptionID = "description-hint" %}  
+    {% endif %}
+
+    {% if params.inputType == "checkbox" or params.inputType == "radio" %}
+        {% set isCheckboxOrRadio = true %}
+    {% else %}
+        {% set isCheckboxOrRadio = false %}
+    {% endif %}
+
+    {% set description -%}
+        <span{% if isCheckboxOrRadio == false %} id="{{ descriptionID }}"{% endif %} class="ons-label__description {% if params.inputType %}ons-{{ params.inputType }}__label--with-description{% else %} ons-input--with-description{% endif %}">
               {{- params.description -}}
         </span>
     {%- endset %}
 
     <label
-        class="{% if params.inputType is not defined -%}ons-label{%- endif %}{{- ' ' + params.classes if params.classes else "" -}}{%- if params.description is defined and params.description %} ons-label--with-description{%- endif %} {{- ' ons-label--placeholder' if params.accessiblePlaceholder else "" -}}"
-        {% if params.for is defined and params.for %} for="{{ params.for }}"{% endif %}
-        {% if params.id is defined and params.id %} id="{{ params.id }}"{% 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 %}
+        class="{% if params.inputType is not defined -%}ons-label{%- endif %}{{- ' ' + params.classes if params.classes else "" -}}{%- if params.description %} ons-label--with-description{%- endif %} {{- ' ons-label--placeholder' if params.accessiblePlaceholder else "" -}}"
+        {% if params.description %}aria-describedby="{{ descriptionID }}"{% endif %}
+        {% if params.for %} for="{{ params.for }}"{% endif %}
+        {% if params.id %} id="{{ params.id }}"{% 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 is defined and value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}
     >
 
         {{- params.text | safe -}}
 
-        {%- if params.inputType is defined and params.inputType -%}
-            {% if params.inputType == "checkbox" or params.inputType == "radio" -%}
-                {%- if params.description is defined and params.description -%}
-                    {{- field | safe -}}
-                {%- endif -%}
+        {%- if isCheckboxOrRadio == true -%}
+            {%- if params.description -%}
+                <span class="ons-label__aria-hidden-description" aria-hidden="true">{{- description | safe -}}</span>
             {%- endif -%}
             </label>
+            {% if isCheckboxOrRadio == true and params.description -%}
+                <span class="ons-label__visually-hidden-description ons-u-vh" id="{{ descriptionID }}">{{- params.description -}}</span>
+            {%- endif -%}
         {%- else -%}
             </label>
-            {%- if params.description is defined and params.description -%}
-                {{- field | safe -}}
+            {%- if params.description -%}
+                {{- description | safe -}}
             {%- endif -%}
         {%- endif %}
 {% endmacro %}

package/components/label/_macro.spec.js

@@ -53,6 +53,12 @@ describe('macro: label', () => {
     expect($('.ons-label').attr('for')).toBe('some-input');
   });
 
+  it('has `aria-describedby` and correct value when description is provided', () => {
+    const $ = cheerio.load(renderComponent('label', EXAMPLE_LABEL_WITH_DESCRIPTION));
+
+    expect($('.ons-label').attr('aria-describedby')).toBe('example-label-description-hint');
+  });
+
   it.each([
     ['`inputType` parameter is not provided', EXAMPLE_LABEL, true],
     ['`inputType` parameter is provided', EXAMPLE_LABEL_WITH_INPUT_TYPE, false],
@@ -185,5 +191,30 @@ describe('macro: label', () => {
       expect($('.ons-label__description').hasClass(expectedInputSpecificModifier)).toBe(true);
       expect($('.ons-label__description').hasClass('ons-input--with-description')).toBe(false);
     });
+
+    it.each([['checkbox'], ['radio']])('has the description in an `aria-hidden` element when "%s" `inputType` is provided', inputType => {
+      const $ = cheerio.load(
+        renderComponent('label', {
+          ...EXAMPLE_LABEL_WITH_DESCRIPTION,
+          inputType,
+        }),
+      );
+
+      expect($('.ons-label__aria-hidden-description').attr('aria-hidden')).toBe('true');
+    });
+
+    it.each([['checkbox'], ['radio']])(
+      'has a duplicate description in a visually hidden element when "%s" `inputType` is provided',
+      inputType => {
+        const $ = cheerio.load(
+          renderComponent('label', {
+            ...EXAMPLE_LABEL_WITH_DESCRIPTION,
+            inputType,
+          }),
+        );
+
+        expect($('.ons-label__visually-hidden-description').hasClass('ons-u-vh')).toBe(true);
+      },
+    );
   });
 });

package/components/lists/_macro.njk

@@ -62,7 +62,7 @@
                         {%- else -%}
                             <a href="{{ item.url }}" class="ons-list__link{% if item.variants == 'inPageLink' %} ons-js-inpagelink{% endif %}{% if item.classes is defined and item.classes %} {{ item.classes }}{% endif %}"{% if item.target is defined and item.target %} target="{{ item.target }}"{% endif %}{% if item.attributes is defined and item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %} {{ attribute }}{% if value is defined and value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
                                 {%- if item.prefix is defined and item.prefix -%}<span class="ons-u-vh">{{- item.prefix -}}</span>{%- endif -%} {{- itemText | safe -}}
-                                {%- if item.target is defined and item.target == "_blank" -%}<span class="ons-u-vh">{{- item.screenreaderMessage | default("this link will open in a new tab") -}}</span>{%- endif -%}
+                                {%- if item.target is defined and item.target == "_blank" -%}<span class="ons-u-vh"> ({{- item.screenreaderMessage | default("opens in a new tab") -}})</span>{%- endif -%}
                             </a>
                         {%- endif -%}
                     {%- else -%}

package/components/lists/_macro.spec.js

@@ -331,7 +331,7 @@ describe('macro: lists', () => {
           }),
         );
 
-        expect($('.ons-list__link .ons-u-vh').text()).toBe('opens in a new tab');
+        expect($('.ons-list__link .ons-u-vh').text()).toBe(' (opens in a new tab)');
       });
 
       it('renders a default visually hidden screen reader message when target is "_blank"', () => {
@@ -347,7 +347,7 @@ describe('macro: lists', () => {
           }),
         );
 
-        expect($('.ons-list__link .ons-u-vh').text()).toBe('this link will open in a new tab');
+        expect($('.ons-list__link .ons-u-vh').text()).toBe(' (opens in a new tab)');
       });
 
       it('has additionally provided `attributes`', () => {

package/components/message/_message.scss

@@ -3,6 +3,7 @@
 .ons-message {
   border-radius: math.div($grid-gutters, 2);
   margin-bottom: 2rem;
+  outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
 
   &--sent {
     background: $color-info-tint;

package/components/modal/_macro.njk

@@ -7,9 +7,9 @@
         {% 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 %}
     >
         <div class="ons-modal__content">
-            <h1 id="ons-modal-title" class="ons-modal__title">
+            <h2 id="ons-modal-title" class="ons-modal__title">
                 {{ params.title }}
-            </h1>
+            </h2>
             <div class="ons-modal__body">
                 {{ (params.body if params.body is defined and params.body else "") | safe }}{{ caller() if caller }}
             </div>

package/components/modal/_modal.scss

@@ -5,12 +5,19 @@ $backdrop-colour: rgba(0, 0, 0, 0.8);
   border-radius: 0.4rem;
   box-shadow: 0 0 7px 0 #000;
   display: none;
+  left: 0;
   margin-left: 2rem;
   margin-right: 2rem;
-  max-width: 500px;
+  outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
   padding: 2rem;
-  position: relative;
-  width: auto;
+  position: fixed;
+  top: 0;
+
+  @media screen and (min-width: 600px) {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 500px;
+  }
 
   &-ie11 & {
     background: $color-white;
@@ -23,12 +30,6 @@ $backdrop-colour: rgba(0, 0, 0, 0.8);
     transform: translate(0, -50%);
   }
 
-  @media screen and (min-width: 600px) {
-    margin-left: auto;
-    margin-right: auto;
-    width: 100%;
-  }
-
   &::backdrop {
     backdrop-filter: blur(3px);
     background: $backdrop-colour;

package/components/navigation/_macro.njk

@@ -69,7 +69,6 @@
                 "attributes": {
                     "aria-label": "Toggle section navigation",
                     "aria-controls": params.navigation.subNavigation.id,
-                    "aria-haspopup": "true",
                     "aria-expanded": "false"
                 }
             }) }}

package/components/navigation/_macro.spec.js

@@ -211,7 +211,6 @@ describe('macro: navigation', () => {
         attributes: {
           'aria-label': 'Toggle section navigation',
           'aria-controls': 'sub-nav',
-          'aria-haspopup': 'true',
           'aria-expanded': 'false',
         },
       });

package/components/pagination/_pagination.scss

@@ -45,6 +45,7 @@ $pagination-item-width: 2.5rem;
   &__item--current &__link {
     background: $color-text-link-hover;
     color: $color-white;
+    outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show backgrounds
     text-decoration: none;
   }
 

package/components/panel/_macro.njk

@@ -15,7 +15,7 @@
     {% endif %}
 
     {% if params is defined and params.type == "warn-branded" %}
-        {% set containerClass = 'ons-census-warning' %}
+        {% set containerClass = 'ons-branded-warning' %}
     {% endif %}
 
     {% if params is defined and params.type == "announcement" %}
@@ -31,7 +31,7 @@
             <div class="ons-container">
     {% endif %}
 
-        <div {% if params is defined and params and params.type == 'error' and params.title is defined and params.title %}aria-labelledby="error-summary-title" role="alert" tabindex="-1" {% if params.dsExample != true %}autofocus="autofocus" {% endif %}{% endif %}class="ons-panel{{ typeClass }}{{ iconClass }}{{ noTitleClass }}{{ spaciousClass }}{{ classes }}"{% if params is defined and params and params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params is defined and params and params.attributes is mapping and params.attributes.items is defined and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}{% if params is defined and params and params.id is defined and params.id %} id="{{params.id}}"{% endif %}>
+        <div {% if params is defined and params and (params.type == 'error' or params.type == 'success') %}aria-labelledby="alert" role="alert" tabindex="-1" {% if params.dsExample != true %}autofocus="autofocus" {% endif %}{% endif %}class="ons-panel{{ typeClass }}{{ iconClass }}{{ noTitleClass }}{{ spaciousClass }}{{ classes }}"{% if params is defined and params and params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params is defined and params and params.attributes is mapping and params.attributes.items is defined and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}{% if params is defined and params and params.id is defined and params.id %} id="{{params.id}}"{% endif %}>
 
             {% if params is defined and params and params.type == "warn" or params.type == "warn-branded" %}
                 <span class="ons-panel__icon" aria-hidden="true">!</span>
@@ -59,16 +59,15 @@
                     {% endif %}
                     {% set titleTag = params.titleTag | default(defaultTitleTag) %}
                     <div class="ons-panel__header">
-                        <{{ titleTag }} id="error-summary-title" {% if params is defined and params and params.type is defined and params.type %}data-qa="{{ params.type }}-header"{% endif %} class="ons-panel__title ons-u-fs-r--b">{{ params.title | safe }}</{{ titleTag }}>
+                        <{{ titleTag }} id="alert" {% if params is defined and params and params.type is defined and params.type %}data-qa="{{ params.type }}-header"{% endif %} class="ons-panel__title ons-u-fs-r--b">{{ params.title | safe }}</{{ titleTag }}>
                     </div>
                 {% else %}
                     {% if params.type is not defined or params.type == "branded" or params.type == "info" %}
                         <span class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default("Important information: ") }}</span>
                     {% else %}
-                        {% if params.type is defined and params.type == "success" %}
-                            <span class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default("Completed: ") }}</span>
-                        {% elif params.type is defined and params.type == "error" %}
-                            <span class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default("Error: ") }}</span>
+                        {% if params.type is defined and (params.type == "success" or params.type == "error") %}
+                            {% set defaultText = "Completed" if params.type == "success" else "Error" %}
+                            <span id="alert" class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default(defaultText ~ ": ") }}</span>
                         {% endif %}
                     {% endif %}
                 {% endif %}

package/components/panel/_macro.spec.js

@@ -186,50 +186,53 @@ describe('macro: panel', () => {
     });
   });
 
-  describe('mode: error', () => {
+  describe.each([
+    ['error', 'h2'],
+    ['success', 'div'],
+  ])('mode: %s', (panelType, tagEl) => {
     it('has the default id set', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          title: 'Error title',
-          type: 'error',
+          title: 'Title',
+          type: panelType,
         }),
       );
 
-      expect($('#error-summary-title').length).toBe(1);
+      expect($('#alert').length).toBe(1);
     });
 
-    it('has H2 as the default title tag', () => {
+    it('has the correct default title tag', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          title: 'Error title',
-          type: 'error',
+          title: 'Title',
+          type: panelType,
         }),
       );
 
       const titleTag = $('.ons-panel__title')[0].tagName;
-      expect(titleTag).toBe('h2');
+      expect(titleTag).toBe(tagEl);
     });
 
     it('has aria-labelledby attribute set with default value', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          title: 'Error title',
-          type: 'error',
+          title: 'Title',
+          type: panelType,
         }),
       );
 
-      expect($('.ons-panel').attr('aria-labelledby')).toBe('error-summary-title');
+      expect($('.ons-panel').attr('aria-labelledby')).toBe('alert');
     });
 
     it('has the role attribute set to alert', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          title: 'Error title',
-          type: 'error',
+          title: 'Title',
+          type: panelType,
         }),
       );
 
@@ -240,8 +243,8 @@ describe('macro: panel', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          title: 'Error title',
-          type: 'error',
+          title: 'Title',
+          type: panelType,
         }),
       );
 
@@ -252,8 +255,8 @@ describe('macro: panel', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          title: 'Error title',
-          type: 'error',
+          title: 'Title',
+          type: panelType,
         }),
       );
 
@@ -264,8 +267,8 @@ describe('macro: panel', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          title: 'Error title',
-          type: 'error',
+          title: 'Title',
+          type: panelType,
           dsExample: true,
         }),
       );
@@ -352,7 +355,7 @@ describe('macro: panel', () => {
         }),
       );
 
-      expect($('.ons-census-warning').length).toBe(1);
+      expect($('.ons-branded-warning').length).toBe(1);
       expect($('.ons-container').length).toBe(1);
     });
 

package/components/panel/_panel.scss

@@ -3,6 +3,7 @@
     &--#{$name} {
       background: $color-bg;
       border-color: $color;
+      outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
     }
 
     &--#{$name} & {
@@ -13,7 +14,7 @@
   }
 }
 
-.ons-census-warning {
+.ons-branded-warning {
   background: $color-branded-tertiary;
 }
 
@@ -21,6 +22,11 @@
   background-color: $color-black;
 }
 
+.ons-branded-warning,
+.ons-announcement {
+  outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
+}
+
 .ons-panel {
   border-radius: 0;
   position: relative;
@@ -37,12 +43,11 @@
   &:focus {
     box-shadow: none;
     outline: 4px solid $color-focus !important;
-    outline-offset: 0;
   }
 
   &__header {
     border-radius: 0;
-    color: $color-white;
+    color: $color-text-inverse;
     margin: 0;
     padding: 0.75rem 1rem;
   }
@@ -111,6 +116,7 @@
   &--warn {
     border: 0 !important;
     margin-bottom: 1rem;
+    outline: none !important;
     padding: 0;
 
     &--footer {
@@ -125,6 +131,7 @@
     border: 0 !important;
     color: $color-white;
     margin-bottom: 0;
+    outline: none !important;
     padding: 1rem 0 !important;
     a {
       color: inherit;
@@ -137,7 +144,7 @@
 
   &--announcement {
     a:focus {
-      box-shadow: 0 -2px #fd0, 0 4px #fd0 !important; // Override focus style because the black border is not visible on a black background
+      box-shadow: 0 -2px $color-focus, 0 4px $color-text-inverse-link !important; // Override focus style because the black border is not visible on a black background
     }
   }
 
@@ -178,6 +185,7 @@
       line-height: 2rem;
       min-height: 2rem;
       min-width: 2rem;
+      outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
       text-align: center;
     }
   }
@@ -245,6 +253,6 @@
 @include panel-type(success, $color-success, $color-success-tint);
 @include panel-type(info, $color-info, $color-info-tint);
 @include panel-type(branded, $color-branded, $color-branded-tint);
-@include panel-type(warn, $color-white, $color-white);
+@include panel-type(warn, transparent, transparent);
 @include panel-type(warn-branded, $color-branded-tertiary, $color-branded-tertiary);
 @include panel-type(announcement, $color-black, $color-black);

package/components/phase-banner/_phase-banner.scss

@@ -8,6 +8,7 @@
     font-size: 0.85rem;
     line-height: 1em;
     margin: 0 0.5rem 0 0;
+    outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
     padding: 0.4rem;
     text-transform: uppercase;
   }

package/components/radios/_radio.scss

@@ -6,15 +6,22 @@
 
     background: $color-grey-5;
     border-radius: 50%;
-    box-shadow: inset 0 0 0 3px $color-white;
+    box-shadow: inset 0 0 0 3px $color-input-bg;
 
-    &:checked {
-      background: $color-input-border;
+    &::after {
+      border-color: $color-input-border;
+      border-radius: 50%;
+      border-width: 6px;
+      height: 0;
+      left: 3px;
+      top: 3px;
+      width: 0;
     }
   }
 
   &.ons-radio--no-border {
     @extend .ons-checkbox--no-border;
+
     & > .ons-radio__input {
       @extend .ons-radio__input;
       &:focus,
@@ -23,6 +30,7 @@
           background: none;
           border: none;
           box-shadow: none;
+          outline: none;
         }
       }
 
@@ -30,6 +38,10 @@
         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;
       }
     }
+
+    .ons-radio__label--with-description {
+      padding: 0;
+    }
   }
 
   &__label {

package/components/reply/_macro.njk

@@ -12,7 +12,7 @@
             })
         }}
         <div class="ons-grid ons-grid--flex ons-grid--gutterless ons-grid--vertical-center ons-grid--no-wrap@s ons-u-mt-m ons-u-mb-m">
-            <div class="ons-grid__col">
+            <div class="ons-grid__col ons-u-mr-m ons-u-mb-s">
                 {{
                     onsButton({
                         "id": params.button.id,
@@ -22,7 +22,7 @@
                     })
                 }}
             </div>
-            <div class="ons-grid__col ons-u-ml-m">
+            <div class="ons-grid__col ons-u-mb-s">
                 <a class="ons-reply__link" href="{{ params.closeLinkUrl }}">{{ params.closeLinkText }}</a>
             </div>
         </div>

package/components/skip-to-content/_skip.scss

@@ -21,7 +21,8 @@
     height: auto;
     margin: inherit;
     max-height: 20em;
-    outline: none;
+    outline: 3px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
+    outline-offset: -4px;
     overflow: visible;
     padding: 1rem;
     position: static;

package/components/table/_macro.njk

@@ -16,12 +16,13 @@
                     <tr class="ons-table__row">
                         {% for th in params.ths %}
                         <th scope="col" class="ons-table__header{{ ' ' + th.thClasses if th.thClasses is defined and th.thClasses }}{{ " ons-table__header--numeric" if th.numeric is defined and th.numeric }}"{% if 'sortable' in variants %} aria-sort="{{- th.ariaSort | default('none') -}}"{% endif %}>
-                            <span {% if 'sortable' in variants %}class="ons-u-vh"{% endif %}>{{- th.value -}}</span>
+                            <span>{{- th.value -}}</span>
                             {% if 'sortable' in variants %}
                                 {{
                                     onsIcon({
                                         "iconType": "sort-sprite",
-                                        "id": th.value
+                                        "id": th.value,
+                                        "classes": 'ons-u-d-no'
                                     })
                                 }}
                             {% endif %}

package/components/table/_macro.spec.js

@@ -480,33 +480,6 @@ describe('macro: table', () => {
 
       expect($('.ons-table').attr('data-aria-desc')).toBe('descending');
     });
-
-    it('adds visually hidden class to column headers', () => {
-      const $ = cheerio.load(renderComponent('table', params));
-
-      const hasClass = mapAll($('.ons-table__header > span'), node => node.hasClass('ons-u-vh'));
-      expect(hasClass).toEqual([true, true, true]);
-    });
-
-    it('renders "sort-sprite" icon for each column header', () => {
-      const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
-
-      faker.renderComponent('table', params);
-
-      expect(iconsSpy.occurrences[0]).toEqual({
-        iconType: 'sort-sprite',
-        id: 'Column 1',
-      });
-      expect(iconsSpy.occurrences[1]).toEqual({
-        iconType: 'sort-sprite',
-        id: 'Column 2',
-      });
-      expect(iconsSpy.occurrences[2]).toEqual({
-        iconType: 'sort-sprite',
-        id: 'Column 3',
-      });
-    });
   });
 
   describe('table caption', () => {