Merge pull request #42 from WordPress/fix/38-speak-region-overflow

a11y: Use screen-reader-text styles for speak container
WordPress · Nov 28, 2017 · 8e6bfcf · 8e6bfcf
2 parents 4ad0565 + 49e57d9
commit 8e6bfcf
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 5 deletions.
diff --git a/packages/a11y/src/addContainer.js b/packages/a11y/src/addContainer.js
@@ -12,8 +12,17 @@ const addContainer = function( ariaLive ) {
 	container.id = 'a11y-speak-' + ariaLive;
 	container.className = 'a11y-speak-region';
 
-	let screenReaderTextStyle = 'clip: rect(1px, 1px, 1px, 1px); position: absolute; height: 1px; width: 1px; overflow: hidden; word-wrap: normal;';
-	container.setAttribute( 'style', screenReaderTextStyle );
+	container.setAttribute( 'style', (
+		'position: absolute;' +
+		'margin: -1px;' +
+		'padding: 0;' +
+		'height: 1px;' +
+		'width: 1px;' +
+		'overflow: hidden;' +
+		'clip: rect( 0 0 0 0 );' +
+		'border: 0;' +
+		'word-wrap: normal !important;'
+	) );
 	container.setAttribute( 'aria-live', ariaLive );
 	container.setAttribute( 'aria-relevant', 'additions text' );
 	container.setAttribute( 'aria-atomic', 'true' );

diff --git a/packages/a11y/src/test/addContainer.test.js b/packages/a11y/src/test/addContainer.test.js
@@ -8,7 +8,7 @@ describe( 'addContainer', () => {
 			expect( container ).not.toBe( null );
 			expect( container.className ).toBe( 'a11y-speak-region' );
 			expect( container.id ).toBe( 'a11y-speak-polite' );
-			expect( container.getAttribute( 'style' ) ).toBe( 'clip: rect(1px, 1px, 1px, 1px); position: absolute; height: 1px; width: 1px; overflow: hidden; word-wrap: normal;' );
+			expect( container.getAttribute( 'style' ) ).not.toBeNull();
 			expect( container.getAttribute( 'aria-live' ) ).toBe( 'polite' );
 			expect( container.getAttribute( 'aria-relevant' ) ).toBe( 'additions text' );
 			expect( container.getAttribute( 'aria-atomic' ) ).toBe( 'true' );
@@ -22,7 +22,7 @@ describe( 'addContainer', () => {
 			expect( container ).not.toBe( null );
 			expect( container.className ).toBe( 'a11y-speak-region' );
 			expect( container.id ).toBe( 'a11y-speak-assertive' );
-			expect( container.getAttribute( 'style' ) ).toBe( 'clip: rect(1px, 1px, 1px, 1px); position: absolute; height: 1px; width: 1px; overflow: hidden; word-wrap: normal;' );
+			expect( container.getAttribute( 'style' ) ).not.toBeNull();
 			expect( container.getAttribute( 'aria-live' ) ).toBe( 'assertive' );
 			expect( container.getAttribute( 'aria-relevant' ) ).toBe( 'additions text' );
 			expect( container.getAttribute( 'aria-atomic' ) ).toBe( 'true' );
@@ -36,7 +36,7 @@ describe( 'addContainer', () => {
 			expect( container ).not.toBe( null );
 			expect( container.className ).toBe( 'a11y-speak-region' );
 			expect( container.id ).toBe( 'a11y-speak-polite' );
-			expect( container.getAttribute( 'style' ) ).toBe( 'clip: rect(1px, 1px, 1px, 1px); position: absolute; height: 1px; width: 1px; overflow: hidden; word-wrap: normal;' );
+			expect( container.getAttribute( 'style' ) ).not.toBeNull();
 			expect( container.getAttribute( 'aria-live' ) ).toBe( 'polite' );
 			expect( container.getAttribute( 'aria-relevant' ) ).toBe( 'additions text' );
 			expect( container.getAttribute( 'aria-atomic' ) ).toBe( 'true' );