From dd976cae65b5472e8df0cf2e93738017b572a421 Mon Sep 17 00:00:00 2001
From: nicola <nicola.willis@canstudios.com>
Date: Wed, 3 Apr 2019 11:45:00 +0100
Subject: [PATCH 1/2] Make expose completable with a screen reader

---
 js/adapt-expose.js   | 5 ++++-
 less/expose.less     | 9 +++++++++
 templates/expose.hbs | 6 ++++--
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/js/adapt-expose.js b/js/adapt-expose.js
index 07077ac..a0956e1 100644
--- a/js/adapt-expose.js
+++ b/js/adapt-expose.js
@@ -12,7 +12,8 @@ define(function(require) {
 		events: {
 			"click .expose-item-cover": "toggleItem",
 			"click .expose-item-content": "toggleItem",
-			"click .expose-item-button": "toggleItem"
+			"click .expose-item-button": "toggleItem",
+            "click .expose-item-button-screen-reader": "toggleItem"
 		},
 
 		onDeviceResize: function() {
@@ -73,6 +74,8 @@ define(function(require) {
 				var i = $cover.parents(".expose-item").index();
 				this.model.get("_items")[i]._isVisited = true;
 				this.evaluateCompletion();
+				// Add the content to the aria-live field, remove content's aria-hidden property
+				$parent.children(".expose-item-content-screen-reader").prepend($parent.children(".expose-item-content").clone().attr('aria-hidden', false));
 			}
 		},
 
diff --git a/less/expose.less b/less/expose.less
index ec0e598..c690834 100644
--- a/less/expose.less
+++ b/less/expose.less
@@ -121,6 +121,15 @@
 			.zoom(0);
 		}
 	}
+
+	.screen-reader-only {
+		position:absolute;
+		left:-10000px;
+		top:auto;
+		width:1px;
+		height:1px;
+		overflow:hidden;
+	}
 }
 
 .expose-item-button {
diff --git a/templates/expose.hbs b/templates/expose.hbs
index 863b7fd..f1382d0 100644
--- a/templates/expose.hbs
+++ b/templates/expose.hbs
@@ -5,19 +5,21 @@
             {{#each _items}}
             <div class="expose-item nth-child-{{@index}}">
                 <div class="expose-item-inner">
-                    <button class="expose-item-button"></button>
+                    <button class="expose-item-button" aria-hidden="true"></button>
                     <div class="expose-item-cover">
                         <div class="back"></div>
                         <div class="front"></div>
                         <span class="text">{{#if front}} {{{a11y_text front}}} {{else}} ? {{/if}}</span>
                     </div>
-                    <div class="expose-item-content">
+                    <button class="screen-reader-only expose-item-button-screen-reader" aria-label="Expose button"></button>
+                    <div class="expose-item-content" aria-hidden="true">
                         {{#with back}}
                             {{#if title}}<div class="expose-item-title">{{{a11y_text title}}}</div>{{/if}}
                             {{#if body}}<div class="expose-item-body">{{{a11y_text body}}}</div>{{/if}}
                             {{#if _graphic}}<img class="expose-item-img" src="{{_graphic.src}}" alt="{{_graphic.alt}}">{{/if}}
                         {{/with}}
                     </div>
+                    <div class="screen-reader-only expose-item-content-screen-reader" aria-live="polite" aria-atomic="true"></div>
                 </div>
             </div>
             {{/each}}

From d7961590516f7c887a04955e5e8102cde0c2fa3b Mon Sep 17 00:00:00 2001
From: nicola <nicola.willis@canstudios.com>
Date: Wed, 3 Apr 2019 11:45:49 +0100
Subject: [PATCH 2/2] Fix indentation

---
 js/adapt-expose.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/adapt-expose.js b/js/adapt-expose.js
index a0956e1..253b274 100644
--- a/js/adapt-expose.js
+++ b/js/adapt-expose.js
@@ -13,7 +13,7 @@ define(function(require) {
 			"click .expose-item-cover": "toggleItem",
 			"click .expose-item-content": "toggleItem",
 			"click .expose-item-button": "toggleItem",
-            "click .expose-item-button-screen-reader": "toggleItem"
+			"click .expose-item-button-screen-reader": "toggleItem"
 		},
 
 		onDeviceResize: function() {