From d2f5c32036547088db9625f3d5f8180b5e0d7284 Mon Sep 17 00:00:00 2001
From: Paul Craig <paul_craig_16@hotmail.com>
Date: Tue, 12 Jun 2018 13:49:31 -0400
Subject: [PATCH] Update visuallyhidden styles

Noticed that the words were being read out of order in VoiceOver
and updated the CSS to the current recommendation in a similar
github issue.

Specifically, this comment:
https://github.com/h5bp/html5-boilerplate/issues/1985#issuecomment-394096182

For completeness, here is the updated class.

```
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: auto; /* new - was 1px */
    margin: 0; /* new - was -1px */
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}
```
---
 web/src/styles.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/styles.js b/web/src/styles.js
index af8071dc0..3bccaa9eb 100644
--- a/web/src/styles.js
+++ b/web/src/styles.js
@@ -117,12 +117,12 @@ export const focusRing = css`
 export const visuallyhidden = css`
   border: 0;
   clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
+  height: auto;
+  margin: 0;
   overflow: hidden;
   padding: 0;
   position: absolute;
-  width: 1px;
+  white-space: nowrap;
 `
 
 export const visuallyhiddenMobile = css`