Polish a11y package.

packages/a11y/README.md

@@ -23,7 +23,7 @@ Create the live regions.
 <a name="speak" href="#speak">#</a> **speak**
 
 Allows you to easily announce dynamic interface updates to screen readers using ARIA live regions.
-This module is inspired by the `speak` function in wp-a11y.js
+This module is inspired by the `speak` function in `wp-a11y.js`.
 
 _Usage_
 
@@ -39,15 +39,15 @@ speak( 'The message you want to send to the ARIA live region', 'assertive' );
 
 _Parameters_
 
--   _message_ `string`: The message to be announced by Assistive Technologies.
--   _ariaLive_ `string`: Optional. The politeness level for aria-live. Possible values: polite or assertive. Default polite.
+-   _message_ `string`: The message to be announced by assistive technologies.
+-   _ariaLive_ `[string]`: The politeness level for aria-live; default: 'polite'.
 
 
 <!-- END TOKEN(Autogenerated API docs) -->
 
 ### Background
 
-For context I'll quote [this article on WordPress.org](https://make.wordpress.org/accessibility/2015/04/15/let-wordpress-speak-new-in-wordpress-4-2/) by [@joedolson](https://github.com/joedolson):
+For context I’ll quote [this article on WordPress.org](https://make.wordpress.org/accessibility/2015/04/15/let-wordpress-speak-new-in-wordpress-4-2/) by [@joedolson](https://github.com/joedolson):
 
 > #### Why.
 >
@@ -71,4 +71,4 @@ For context I'll quote [this article on WordPress.org](https://make.wordpress.or
 
 See <https://make.wordpress.org/design/handbook/design-guide/browser-support/>
 
-<br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>
+<br /><br /><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

packages/a11y/src/addContainer.js → packages/a11y/src/add-container.js

@@ -1,15 +1,13 @@
 /**
  * Build the live regions markup.
  *
- * @param {string} ariaLive Optional. Value for the 'aria-live' attribute, default 'polite'.
+ * @param {string} [ariaLive] Value for the 'aria-live' attribute; default: 'polite'.
  *
  * @return {HTMLDivElement} The ARIA live region HTML element.
  */
-const addContainer = function( ariaLive ) {
-	ariaLive = ariaLive || 'polite';
-
+export default function addContainer( ariaLive = 'polite' ) {
 	const container = document.createElement( 'div' );
-	container.id = 'a11y-speak-' + ariaLive;
+	container.id = `a11y-speak-${ ariaLive }`;
 	container.className = 'a11y-speak-region';
 
 	container.setAttribute(
@@ -30,12 +28,10 @@ const addContainer = function( ariaLive ) {
 	container.setAttribute( 'aria-relevant', 'additions text' );
 	container.setAttribute( 'aria-atomic', 'true' );
 
-	const body = document.querySelector( 'body' );
+	const { body } = document;
 	if ( body ) {
 		body.appendChild( container );
 	}
 
 	return container;
-};
-
-export default addContainer;
+}

packages/a11y/src/clear.js

@@ -1,11 +1,10 @@
 /**
  * Clear the a11y-speak-region elements.
  */
-const clear = function() {
-	const regions = document.querySelectorAll( '.a11y-speak-region' );
+export default function clear() {
+	const regions = document.getElementsByClassName( 'a11y-speak-region' );
+
 	for ( let i = 0; i < regions.length; i++ ) {
 		regions[ i ].textContent = '';
 	}
-};
-
-export default clear;
+}

packages/a11y/src/filterMessage.js → packages/a11y/src/filter-message.js

@@ -7,7 +7,7 @@ let previousMessage = '';
  *
  * @return {string} The filtered message.
  */
-const filterMessage = function( message ) {
+export default function filterMessage( message ) {
 	/*
 	 * Strip HTML tags (if any) from the message string. Ideally, messages should
 	 * be simple strings, carefully crafted for specific use with A11ySpeak.
@@ -24,6 +24,4 @@ const filterMessage = function( message ) {
 	previousMessage = message;
 
 	return message;
-};
-
-export default filterMessage;
+}

packages/a11y/src/index.js

@@ -6,26 +6,26 @@ import domReady from '@wordpress/dom-ready';
 /**
  * Internal dependencies
  */
-import addContainer from './addContainer';
+import addContainer from './add-container';
 import clear from './clear';
-import filterMessage from './filterMessage';
+import filterMessage from './filter-message';
 
 /**
  * Create the live regions.
  */
-export const setup = function() {
-	const containerPolite = document.getElementById( 'a11y-speak-polite' );
+export function setup() {
 	const containerAssertive = document.getElementById(
 		'a11y-speak-assertive'
 	);
+	const containerPolite = document.getElementById( 'a11y-speak-polite' );
 
-	if ( containerPolite === null ) {
-		addContainer( 'polite' );
-	}
 	if ( containerAssertive === null ) {
 		addContainer( 'assertive' );
 	}
-};
+	if ( containerPolite === null ) {
+		addContainer( 'polite' );
+	}
+}
 
 /**
  * Run setup on domReady.
@@ -34,11 +34,10 @@ domReady( setup );
 
 /**
  * Allows you to easily announce dynamic interface updates to screen readers using ARIA live regions.
- * This module is inspired by the `speak` function in wp-a11y.js
+ * This module is inspired by the `speak` function in `wp-a11y.js`.
  *
- * @param {string} message  The message to be announced by Assistive Technologies.
- * @param {string} ariaLive Optional. The politeness level for aria-live. Possible values:
- *                          polite or assertive. Default polite.
+ * @param {string} message  The message to be announced by assistive technologies.
+ * @param {string} [ariaLive] The politeness level for aria-live; default: 'polite'.
  *
  * @example
  * ```js
@@ -51,20 +50,20 @@ domReady( setup );
  * speak( 'The message you want to send to the ARIA live region', 'assertive' );
  * ```
  */
-export const speak = function( message, ariaLive ) {
+export function speak( message, ariaLive ) {
 	// Clear previous messages to allow repeated strings being read out.
 	clear();
 
 	message = filterMessage( message );
 
-	const containerPolite = document.getElementById( 'a11y-speak-polite' );
 	const containerAssertive = document.getElementById(
 		'a11y-speak-assertive'
 	);
+	const containerPolite = document.getElementById( 'a11y-speak-polite' );
 
-	if ( containerAssertive && 'assertive' === ariaLive ) {
+	if ( containerAssertive && ariaLive === 'assertive' ) {
 		containerAssertive.textContent = message;
 	} else if ( containerPolite ) {
 		containerPolite.textContent = message;
 	}
-};
+}

packages/a11y/src/index.native.js

@@ -1,19 +1,18 @@
 /**
  * Internal dependencies
  */
-import filterMessage from './filterMessage';
+import filterMessage from './filter-message';
 
 /**
  * Update the ARIA live notification area text node.
  *
  * @param {string} message  The message to be announced by Assistive Technologies.
- * @param {string} ariaLive Optional. The politeness level for aria-live. Possible values:
- *                          polite or assertive. Default polite.
+ * @param {string} [ariaLive] The politeness level for aria-live; default: 'polite'.
  */
-export const speak = function( message, ariaLive ) {
+export function speak( message, ariaLive ) {
 	message = filterMessage( message );
 	//TODO: Use native module to speak message
-	if ( 'assertive' === ariaLive ) {
+	if ( ariaLive === 'assertive' ) {
 	} else {
 	}
-};
+}

packages/a11y/src/test/addContainer.test.js → packages/a11y/src/test/add-container.test.js

@@ -1,14 +1,14 @@
 /**
  * Internal dependencies
  */
-import addContainer from '../addContainer';
+import addContainer from '../add-container';
 
 describe( 'addContainer', () => {
 	describe( 'with polite param', () => {
 		it( 'should create an aria-live element with aria-live attr set to polite', () => {
 			const container = addContainer( 'polite' );
 
-			expect( container ).not.toBe( null );
+			expect( container ).not.toBeNull();
 			expect( container.className ).toBe( 'a11y-speak-region' );
 			expect( container.id ).toBe( 'a11y-speak-polite' );
 			expect( container.getAttribute( 'style' ) ).not.toBeNull();
@@ -24,7 +24,7 @@ describe( 'addContainer', () => {
 		it( 'should create an aria-live element with aria-live attr set to assertive', () => {
 			const container = addContainer( 'assertive' );
 
-			expect( container ).not.toBe( null );
+			expect( container ).not.toBeNull();
 			expect( container.className ).toBe( 'a11y-speak-region' );
 			expect( container.id ).toBe( 'a11y-speak-assertive' );
 			expect( container.getAttribute( 'style' ) ).not.toBeNull();
@@ -40,7 +40,7 @@ describe( 'addContainer', () => {
 		it( 'should default to creating an aria-live element with aria-live attr set to polite', () => {
 			const container = addContainer( 'polite' );
 
-			expect( container ).not.toBe( null );
+			expect( container ).not.toBeNull();
 			expect( container.className ).toBe( 'a11y-speak-region' );
 			expect( container.id ).toBe( 'a11y-speak-polite' );
 			expect( container.getAttribute( 'style' ) ).not.toBeNull();

packages/a11y/src/test/clear.test.js

@@ -8,12 +8,12 @@ describe( 'clear', () => {
 		const container1 = document.createElement( 'div' );
 		container1.className = 'a11y-speak-region';
 		container1.textContent = 'not empty';
-		document.querySelector( 'body' ).appendChild( container1 );
+		document.body.appendChild( container1 );
 
 		const container2 = document.createElement( 'div' );
 		container2.className = 'a11y-speak-region';
 		container2.textContent = 'not empty';
-		document.querySelector( 'body' ).appendChild( container2 );
+		document.body.appendChild( container2 );
 
 		clear();
 		expect( container1.textContent ).toBe( '' );

packages/a11y/src/test/filterMessage.test.js → packages/a11y/src/test/filter-message.test.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import filterMessage from '../filterMessage';
+import filterMessage from '../filter-message';
 
 describe( 'filterMessage', () => {
 	describe( 'when a clean message is passed in', () => {
@@ -15,7 +15,7 @@ describe( 'filterMessage', () => {
 		it( 'should add a space to the message to make sure it is announced again', () => {
 			filterMessage( 'repeated message.' );
 			const actual = filterMessage( 'repeated message.' );
-			expect( actual ).toBe( 'repeated message.' + '\u00A0' );
+			expect( actual ).toBe( 'repeated message.\u00A0' );
 		} );
 	} );
 

packages/a11y/src/test/index.test.js

@@ -8,7 +8,7 @@ import domReady from '@wordpress/dom-ready';
  */
 import { setup, speak } from '../';
 import clear from '../clear';
-import filterMessage from '../filterMessage';
+import filterMessage from '../filter-message';
 
 jest.mock( '../clear', () => {
 	return jest.fn();
@@ -18,7 +18,7 @@ jest.mock( '@wordpress/dom-ready', () => {
 		callback();
 	} );
 } );
-jest.mock( '../filterMessage', () => {
+jest.mock( '../filter-message', () => {
 	return jest.fn( ( message ) => {
 		return message;
 	} );
@@ -82,9 +82,9 @@ describe( 'speak', () => {
 		it( 'should set the textcontent of the polite aria-live region', () => {
 			speak( 'message', 'assertive' );
 			expect( containerPolite.textContent ).toBe( 'message' );
-			expect( document.getElementById( 'a11y-speak-assertive' ) ).toBe(
-				null
-			);
+			expect(
+				document.getElementById( 'a11y-speak-assertive' )
+			).toBeNull();
 		} );
 	} );
 
@@ -103,12 +103,10 @@ describe( 'speak', () => {
 		} );
 
 		it( 'should set the textcontent of the polite aria-live region', () => {
-			expect( document.getElementById( 'a11y-speak-polite' ) ).toBe(
-				null
-			);
-			expect( document.getElementById( 'a11y-speak-assertive' ) ).toBe(
-				null
-			);
+			expect( document.getElementById( 'a11y-speak-polite' ) ).toBeNull();
+			expect(
+				document.getElementById( 'a11y-speak-assertive' )
+			).toBeNull();
 		} );
 	} );