Merge pull request #12 from Yoast/stories/af/11-repeated-messages-saf…

…ari-voiceover Append a no-break space to repeated messages.
WordPress · Apr 19, 2017 · 4e77280 · 4e77280
2 parents a968fff + 969f3bc
commit 4e77280
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/a11y-speak.js b/a11y-speak.js
@@ -1,4 +1,4 @@
-var containerPolite, containerAssertive;
+var containerPolite, containerAssertive, previousMessage = "";
 
 /**
  * Build the live regions markup.
@@ -14,7 +14,7 @@ var addContainer = function( ariaLive ) {
 	container.id = "a11y-speak-" + ariaLive;
 	container.className = "a11y-speak-region";
 
-	var screenReaderTextStyle = "clip: rect(1px, 1px, 1px, 1px); position: absolute; height: 1px; width: 1px; overflow: hidden;";
+	var screenReaderTextStyle = "clip: rect(1px, 1px, 1px, 1px); position: absolute; height: 1px; width: 1px; overflow: hidden; word-wrap: normal;";
 	container.setAttribute( "style", screenReaderTextStyle );
 
 	container.setAttribute( "aria-live", ariaLive );
@@ -85,6 +85,12 @@ var A11ySpeak = function( message, ariaLive ) {
 	 */
 	message = message.replace( /<[^<>]+>/g, " " );
 
+	if ( previousMessage === message ) {
+		message = message + "\u00A0";
+	}
+
+	previousMessage = message;
+
 	if ( containerAssertive && "assertive" === ariaLive ) {
 		containerAssertive.textContent = message;
 	} else if ( containerPolite ) {

diff --git a/a11y-speak.min.js b/a11y-speak.min.js