From 40ac30a96da5b3147586c6929345161c75e19536 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Wed, 8 Jan 2020 17:03:04 +0000
Subject: [PATCH] Add hidden text to cookie banner buttons

Visual users get the context from the proximity to
the h2 but we need to provide this for others.

I've tried using `aria-describedby` to link them
to the h2 but this ends up making the h2 text the
button's description in the accessibility tree. In
Voiceover this means you only get that information
as extra context, announced a while after the
label if the VO cursor stays on the button.

We want all the information in the accessible
label so chose this approach instead.
---
 app/templates/components/cookie-banner.html | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/templates/components/cookie-banner.html b/app/templates/components/cookie-banner.html
index 7505818cd..0570e81fa 100644
--- a/app/templates/components/cookie-banner.html
+++ b/app/templates/components/cookie-banner.html
@@ -6,10 +6,14 @@
     <p class="govuk-body">Analytics cookies help us understand how our website is being used.</p>
     <div class="notify-cookie-banner__buttons">
       <div class="notify-cookie-banner__button notify-cookie-banner__button-accept">
-        <button class="govuk-button govuk-button__inline" type="submit" data-accept-cookies="true" aria-describedby="notify-cookie-banner__heading">Yes</button>
+        <button class="govuk-button govuk-button__inline" type="submit" data-accept-cookies="true" aria-describedby="notify-cookie-banner__heading">
+        Yes<span class="govuk-visually-hidden">, we can store analytics cookies on your device</span>
+        </button>
       </div>
       <div class="notify-cookie-banner__button notify-cookie-banner__button-reject">
-        <button class="govuk-button govuk-button__inline" type="submit" data-accept-cookies="false" aria-describedby="notify-cookie-banner__heading">No</button>
+        <button class="govuk-button govuk-button__inline" type="submit" data-accept-cookies="false" aria-describedby="notify-cookie-banner__heading">
+        No<span class="govuk-visually-hidden">, we can't store analytics cookies on your device</span>
+        </button>
       </div>
       <a class="govuk-link notify-cookie-banner__link" href="/cookies">How Notify uses cookies</a>
     </div>