NickColley

{"userAgent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3344.0 Safari/537.36","lighthouseVersion":"2.8.0","generatedTime":"2018-02-10T12:58:39.832Z","initialUrl":"http://localhost:3000/","url":"http://localhost:3000/","runWarnings":[],"audits":{"first-meaningful-paint":{"score":35,"displayValue":"4,900 ms","rawValue":4897.4,"extendedInfo":{"value":{"timestamps":{"navStart":216298093445,"fCP":216302848512,"fMP":216302990818,"onLoad":216303458064,"endOfTrace":216343103987},"timings":{"navStart":0,"fCP":4755.067,"fMP":4897.373,"onLoad":5364.619,"endOfTrace":45010.542},"fmpFellBack":false}},"scoringMode":"numeric","name":"first-meaningful-paint","description":"First meaningful paint","helpText":"First meaningful paint measures when the primary content of a page is visible. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint)."},"speed-index-metric":{"score":56,"displayValue":"4,939","rawValue":4939,"extendedInfo":{"value"

NickColley

GOV.UK Frontend - How we version

Prior art

• Variable exposing mixin proposal

The public API: or what you can depend on

Note: If you want to use anything that is not listed here to extend or create your own components please contact us and we might be able to make something public that you can depend on. If you depend on something that is not listed here, it can and will likely be broken without warning.

NickColley

Leo Hemsted - GOV.UK Notify

Technospective, Monday, 5 March 2018

---

How GOV.UK Notify (sometimes) supports client libraries

Lots of people expose APIs based on endpoints and not client libraries.

Context

Two applications:

NickColley

Accessible client-side routing links

Example of announcers patterns

• https://github.com/thinkcompany/react-a11y-announcer
• https://github.com/ember-a11y/a11y-announcer

Excellent example of ‘doing it right’ by the Ember community

• https://github.com/ember-a11y/ember-a11y

What assistive technologies should I test in?

NickColley

We're getting close to 1.0.0 and are tidying up and loose ends for the public API.

One of the final things we're auditing is the consistency between class names, we believe if they're more consistent they'll be easier to remember and more intuative.

Right now our override classes look like:

.govuk-!-display-inline {}
.govuk-!-display-inline-block {}

NickColley

<!-- This code example is not the same as GOV.UK Frontend, and is just for demonstration. -->
<style>
  .back-link::before {
    content: '';
    display: inline-block;
    margin-right: .3em;
    border-top: 0.3125em solid transparent;
    border-right: 0.375em solid currentColor;
    border-bottom: 0.3125em solid transparent;
    clip-path: polygon(0% 50%, 100% 100%, 100% 0%);

NickColley

<!-- This code example is not the same as GOV.UK Frontend, and is just for demonstration -->
<style>
.breadcrumbs {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.breadcrumbs > li {
  display: inline-block;
}

NickColley

<!-- This code example is not the same as GOV.UK Frontend, and is just for demonstration -->
<style>
  .check-mark-icon {
    width: 1.125em;
    height: 0.4375em;
    transform: rotate(-45deg);
    border: solid;
    border-width: 0 0 .3125em .3125em;
  }
</style>

NickColley

<!-- Example of using `currentColor` to set the colour of a SVG circle -->
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle fill="currentColor" cx="10" cy="10" r="10"/>
</svg>

NickColley

<!-- This code example is not the same as GOV.UK Frontend, and is just for demonstration -->
<style>
  .panel {
    box-sizing: border-box;

    height: 100px;
    width: 100px;
    border: 3px solid black;
    background: black;
    color: white;