AF 3.11 update for WCAG 2.1 (NOTE: import palette.scss before focus.scss)

.changelog.md

Now incorporated into Assets Frontend v3.14.0

This patch has now been added to the HMRC library so should no longer be used. You should ensure you are running the latest version of AF or migrate to HMRC Frontend.

13 July 2020

• updated faded link colour for banner (eg lang toggle)

11 June 2020

• updated confirmation box colour
• updated skip link

29 Nov 2019

• added radio input border styles (thanks @nubz for the heads-up!)
• added margin to the bottom of error summary links to cope with the increased boder at higher zoom levels (again thanks to @nubz) 14 Oct 2019
• moved ::-ms-value selector to own rule to prevent breaking whole rule for other browsers

8 Oct 2019

• added focus style for input focus with error state
• added override for input error state border colour
• reverted previous changes for AF 4.11 and moved those to a separate gist (see https://gist.github.com/adamliptrot-oc/c35166dce1f3234bfc8f0dbb915f07b8)

3 Oct 2019

• corrected focus style for fields with error styling
• corrected radio label background colour and border
• removed background for html
• removed attribute scoped selectors for form controls

12 Sept 2019

• added focus style for autocomplete

_all.scss

// this file is an example of how you might import the files into your service

// import any service custom css first eg:
// @import 'custom';

// import these files last, in this order
@import 'partials/_palette';
@import 'partials/_focus';

_focus.scss

// =========================
// updated 11 June 2020 13:46 BST
// focus states
// changes made to bring in line with
// https://designnotes.blog.gov.uk/2019/07/29/weve-made-the-gov-uk-design-system-more-accessible/
// to check for updates visit https://gist.github.com/adamliptrot-oc/f77250a6f69fb31fabd935e2002f4964
// =========================

  a:focus,
  .error-summary .error-summary-list a:focus,
  details summary:focus {
    outline: 3px solid transparent;
    color: #0b0c0c;
    background-color: #fd0;
    -webkit-box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
    box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
    text-decoration: none;
  }
  // error summary spacing
  .error-summary-list li {
    margin-bottom: 5px;
  }
  details summary:focus .summary {
    text-decoration: none;
  }
  input:focus,
  textarea:focus,
  select:focus,
  #global-header input:focus {
    outline-color: #fd0;
  }
  .button {
    border: 2px solid transparent;
  }
  .button:focus:not(:active):not(:hover) {
    border-color: #fd0;
    color: #0b0c0c;
    background-color: #fd0;
    -webkit-box-shadow: 0 2px 0 #0b0c0c;
    box-shadow: 0 2px 0 #0b0c0c;
  }
  .button:focus {
    border-color: #fd0;
    outline: 3px solid transparent;
    -webkit-box-shadow: inset 0 0 0 1px #fd0;
    box-shadow: inset 0 0 0 1px #fd0;
  }
  .autocomplete__input:focus,
  .form-control:focus {
    outline: 3px solid #fd0;
    outline-offset: 0;
    -webkit-box-shadow: inset 0 0 0 2px;
    box-shadow: inset 0 0 0 2px;
  }
  .multiple-choice [type=checkbox]:focus+label::before {
    border-width: 3px;
  }

// header and footer (incl. account header)
  .report-error .report-error__toggle:focus,
  #footer a:focus,
  #global-header .header-proposition #proposition-links li a:focus,
  #global-header .header-proposition a.menu:focus,
  #global-header #logo:focus {
    color: #0b0c0c;
  }
  #global-header #logo:focus img {
    filter: invert(1);
  }
  .account-menu__link:focus,
  .is-smaller .account-menu__link--home:focus,
  .is-smaller .account-menu__link--menu:focus,
  .is-smaller .account-menu__link--home.account-menu__link--active:focus,
  .is-smaller .account-menu__link--menu.account-menu__link--active:focus {
    color: #0b0c0c;
    background-color: #fd0;
  }
  @media (min-width: 641px){
    #footer .footer-meta .copyright a {
      background-position: 50% 0;
      float: right;
    }
  }
  #footer .footer-meta .copyright a:focus {
    background-color: #fd0;
  }

  // govuk textarea
  textarea:focus {
    outline: 3px solid #fd0;
    outline-offset: 0;
    -webkit-box-shadow: inset 0 0 0 2px;
    box-shadow: inset 0 0 0 2px;
  }

  // error focus state
  .form-control-error.form-control-error:focus {
    border-color: #0b0c0c;
    -webkit-box-shadow: none;
    box-shadow: none
  }

  // radios
  .multiple-choice input {
    top: -2px;
    left: -2px;
    width: 44px;
    height: 44px;
  }
  .multiple-choice [type="radio"] + label::before {
    width: 40px;
    height: 40px;
    box-sizing: border-box;
  }
  .multiple-choice [type="radio"]:focus + label::before {
    border-width: 4px;
  }
  .multiple-choice [type=radio]+label::after {
    top: 10px;
    left: 10px;
  }

// skip link
#skiplink-container {
  text-align: left;
  background: none;
}
#skiplink-container div {
  text-align: left;
  margin: 0;
  max-width: none;
}
#skiplink-container .skiplink {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  font-family: "GDS Transport", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  font-size: 1.6rem;
  text-decoration: underline;
  line-height: 1.14286;
  display: block;
  padding: 10px 15px;
}
@supports (padding: unquote('max(calc(0px))')) {
  #skiplink-container .skiplink {
      padding-right: unquote('max(15px, calc(15px + env(safe-area-inset-right)))');
      padding-left: unquote('max(15px, calc(15px + env(safe-area-inset-left)))');
  }
}
#skiplink-container .skiplink:active,
#skiplink-container .skiplink:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: inherit !important;
  overflow: visible !important;
  clip: auto !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
  white-space: inherit !important;
}

_palette.scss

// =========================
// updated 13 July 2020 11:52 BST
// Palette change
// https://designnotes.blog.gov.uk/2019/07/29/weve-updated-the-gov-uk-colours-and-font/
// to check for updates visit https://gist.github.com/adamliptrot-oc/f77250a6f69fb31fabd935e2002f4964
// =========================

// #DEE0E2 to #f3f2f1
.button--secondary,
.button--secondary:visited,
.button--secondary.disabled:hover,
.button--secondary[disabled="disabled"]:hover,
.button--secondary[disabled]:hover,
.block-label,
.block-label--stacked,
.footer,
.box--shaded,
.side-nav__link:hover,
.dataTable tbody .status--unconfirmed,
.tag,
.tabs-nav .tabs-nav__tab:focus,
.tabs-nav .tabs-nav__tab:hover,
.tabs-nav .tabs-nav__tab:active,
.tabs-nav a.tabs-nav__tab:focus,
.tabs-nav .tabs-nav__tab.link-style:focus,
.tabs-nav .tabs-nav__tab.button--link-style:focus,
.tabs-nav a.tabs-nav__tab:hover,
.tabs-nav .tabs-nav__tab.link-style:hover,
.tabs-nav .tabs-nav__tab.button--link-style:hover,
.tabs-nav a.tabs-nav__tab:active,
.tabs-nav .tabs-nav__tab.link-style:active,
.tabs-nav .tabs-nav__tab.button--link-style:active,
.annual-summaries--group .statement__summary--parent[aria-expanded=true],
.payments .table-label.selected,
.payments .table-label:hover,
html {
  background-color: #f3f2f1;
}
.button--secondary:active {
  -webkit-box-shadow: 0 0 0 #f3f2f1;
  box-shadow: 0 0 0 #f3f2f1
}
.block-label,
.block-label--stacked {
  border-color: #f3f2f1;
}
.dynamically-displayed {
  border-left: 5px solid #f3f2f1;
}
.explore a,
.explore--inside-government a,
.explore--inline a,
.explore .link-style,
.explore--inside-government .link-style,
.explore--inline .link-style,
.explore .button--link-style,
.explore--inside-government .button--link-style,
.explore--inline .button--link-style,
.explore--inline__links {
  color: #f3f2f1;
}
.indent {
  border-left-color: #f3f2f1;
}
.services-dashboard .service-option--links:first-child .service-option--item,
.account-menu__link:hover,
.is-smaller .account-menu__link--back {
  border-bottom-color: #f3f2f1;
}


// #005ea5 to #1d70b8
.heading--underlined,
.section--branded h2,
.table--light-header thead,
.table__header--highlight,
.business-tax .section--branded h2,
.is-smaller .account-menu__link--home.account-menu__link--active:hover,
.account-menu__link--active,
.account-menu__link--active:visited {
  border-bottom-color: #1d70b8;
}
.heading-large--blue,
.button.button--link,
a.back-to-top-link:visited,
.back-to-top-link.link-style:visited,
.back-to-top-link.button--link-style:visited,
.page-nav__link,
.banner-links,
.side-nav--child .side-nav__list--selected .side-nav__link,
.dataTables_paginate a,
.dataTables_paginate .link-style,
.dataTables_paginate .button--link-style,
.accordion__button:visited,
.toggle__button,
.tabs-nav .tabs-nav__tab:visited,
.tabs-nav__tab,
.payments .tab,
.services-dashboard .service-option--links .service-option--link:link,
.link,
.link:active,
details summary,
a,
.link-style,
.button--link-style,
.button--link-style,
.subnav a:visited,
.subnav .link-style:visited,
.subnav .button--link-style:visited,
.is-smaller .subnav__section a:hover,
.is-smaller .subnav__section .link-style:hover,
.is-smaller .subnav__section .button--link-style:hover {
  color: #1d70b8
}
.brand-border--top,
.section--blue-top,
.footer,
.service-info {
  border-top-color: #1d70b8;
}
.button--notification,
.button--notification:visited,
.button--notification.disabled:hover,
.button--notification[disabled="disabled"]:hover,
.button--notification[disabled]:hover,
.alpha-banner .phase-tag,
.beta-banner .phase-tag,
.phase-tag,
.side-nav__list--selected .side-nav__link,
.side-nav__list--selected:hover .side-nav__link,
.highlight-message--dark,
.hero,
.paye-statements .sidebar-links__item.selected,
option:active,
option:checked,
.phase-banner .phase-tag,
.phase-banner-alpha .phase-tag,
.phase-banner-beta .phase-tag,
.phase-tag,
.full-width-banner,
.hmrc-banner .phase-tag {
  background-color: #1d70b8;
}
select:focus::-ms-value {
  background-color: #1d70b8;
}
.button--notification:active {
  -webkit-box-shadow: 0 0 0 #1d70b8;
  box-shadow: 0 0 0 #1d70b8;
}
.attorneyBanner,
.panel-indent--info,
.delegation-banner {
  border-left-color: #1d70b8;
}

// #ffbf47 to #ffdd00
.page-nav__link:focus,
.js-enabled .add-focus,
.modal-dialog__content:focus,
.button:focus,
details summary:focus,
.error-summary:focus {
  outline-color: #ffdd00;
}
.multiple-choice [type=radio]:focus+label::before {
  -webkit-box-shadow: 0 0 0 4px #ffdd00;
  box-shadow: 0 0 0 4px #ffdd00;
}
.multiple-choice [type=checkbox]:focus+label::before {
  -webkit-box-shadow: 0 0 0 3px #ffdd00;
  box-shadow: 0 0 0 3px #ffdd00
}
.account-menu__link:focus,
.is-smaller .account-menu__link--home:focus,
.is-smaller .account-menu__link--menu:focus,
.is-smaller .account-menu__link--home.account-menu__link--active:focus,
.is-smaller .account-menu__link--menu.account-menu__link--active:focus {
  border-bottom-color: #ffdd00;
}


// #00823b to #00703c
button,
.button,
button:visited,
.button:visited,
button.disabled:hover,
button[disabled="disabled"]:hover,
button[disabled]:hover,
.button.disabled:hover,
.button[disabled="disabled"]:hover,
.button[disabled]:hover,
.button--small,
.button--small:visited,
.button--small.disabled:hover,
.button--small[disabled="disabled"]:hover,
.button--small[disabled]:hover,
.toggle__button--active,
.toggle__button--active:hover,
.toggle__button--active:focus,
.button[disabled="disabled"] {
  background-color: #00703c;
}
button:active,
.button:active,
.button--small:active {
  -webkit-box-shadow: 0 0 0 #00703c;
  box-shadow: 0 0 0 #00703c;
}
.list--ticks li::before,
.tick,
.form-hint-list-item--valid {
  color: #00703c;
}

// #b10e1e to #d4351c
.button--alert,
.button--alert:visited,
.button--alert.disabled:hover,
.button--alert[disabled="disabled"]:hover,
.button--alert[disabled]:hover,
.marker-column__marker,
.reminder.urgent a,
.reminder.urgent .link-style,
.reminder.urgent .button--link-style,
.alert-block,
.alert--important,
.tabs-nav .tabs-nav__tab .count,
.flag.flag--urgent,
.highlight-block--red,
.main-nav .count,
.badge {
  background-color: #d4351c;
}
.button--alert:active {
  -webkit-box-shadow: 0 0 0 #d4351c;
  box-shadow: 0 0 0 #d4351c;
}
.email-form-errors .error-notification,
.annual-summaries--group .alert--text,
.sent-in-error,
.business-tax .content__body .flag.flag--urgent,
.error-message,
.error-summary .error-summary-list a,
.error-summary .error-summary-list .link-style,
.error-summary .error-summary-list .button--link-style {
  color: #d4351c;
}
.email-form-errors .error-notification,
.attorneyBanner--client-request-rejected,
.business-tax .content__body .flag.flag--urgent,
.form-group-error {
  border-left-color: #d4351c;
}
.business-tax .alert--failure,
.form-control-error,
textarea.form-control-error,
input.form-control-error[type="text"],
input.form-control-error[type="password"],
.error-summary {
  border-color: #d4351c;
}
// override for AF
.form-control-error.form-control-error.form-control-error {
  border-color: #d4351c;
}

// confirmation panel
.govuk-box-highlight {
  background-color: #00703c;
}

// faded text in banner (eg lang toggle)
.header__menu__proposition-links .faded-text--small {
    color: #A7A7A7
}

I think we are missing the radio border width from _focus.scss though - DAC raised this with our service as a fail on contrast ratio

Also the new focus styles when activated in an error summary link can slightly overlap any links below when zoomed at 300%, found this fix was necessary (as per Design System):

.error-summary-list>li { margin-bottom: 5px; }

Let me know what you think.

Thanks Alistair, good spots. I've updated the gist to fix these.