Version 10.0.14+ WCAG skin changes

Vortx has released WCAG (Web Content Accessibility Guidelines) compliant capability with the 10.0.14 version of AspDotNetStorefront. This update changed a lot of base CSS and View files. Some of these base changes require skin changes on the site owner's part in order to keep their current site's look and feel.

Here are the most noticeable changes, and what you can do to fix them. For the CSS changes, you can copy/paste the CSS fix into the bottom of the skin's "custom.css" file in the /Skins/Skin_#/Css folder.

NOTE: The first 4 fixes have already been broadly applied to preFIX sites:

1 - Checkout headers are big (Checkout pencil header icons are big)

Add this CSS to set the checkout header font size back to normal:

.checkout-header {

    font-size: 24px;

}

2 - Duplicate, weird text is showing throughout the site

This text is only supposed to be visible to screen readers. Add this CSS to hide it from other browsers:

.screen-reader-only {

    position: absolute;

    height: 1px;

    width: 1px;

    clip: rect(1px 1px 1px 1px); /*IE 6 and 7*/

    clip: rect(1px,1px,1px,1px);

    clip-path: polygon(0px 0px, 0px 0px, 0px 0px);

    -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);

    overflow: hidden !important;

}

3 - Cart and Wishlist buttons show when they have 0 items

Add this CSS to hide the cart and wishlist buttons until the user has added something to their cart or wishlist:

a.user-link[aria-disabled] {

    display: none;

}

4 - Search textbox has two rows of text, or a new label

Add this CSS to hide the new search textbox label:

.search-box-label {

    display: none;

}