NickColley

<!-- This code example is not the same as GOV.UK Frontend, and is just for demonstration -->
<style>
  .round-button {
    font-size: 16px;
    border-radius: 50%;
    height: 6em;
    width: 6em;
  }

  .round-button:focus {

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;

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>
  .check-mark-icon {
    width: 1.125em;
    height: 0.4375em;
    transform: rotate(-45deg);
    border: solid;
    border-width: 0 0 .3125em .3125em;
  }
</style>

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>
  .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

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

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

GOV.AU UIKit / Gold

Date: 8 Mar 2018

Distributing components

Nick: We currently have a similar setup to you guys, with multiple packages for multiple components. Why did you decide to take this approach?

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: