diff --git a/packages/a11y/README.md b/packages/a11y/README.md
index a45253197e7e6b..46cf83291fd301 100644
--- a/packages/a11y/README.md
+++ b/packages/a11y/README.md
@@ -23,7 +23,7 @@ Create the live regions.
# **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'.
### 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
-
+
diff --git a/packages/a11y/src/addContainer.js b/packages/a11y/src/add-container.js
similarity index 72%
rename from packages/a11y/src/addContainer.js
rename to packages/a11y/src/add-container.js
index edd733a6626a60..122adeaf8a15da 100644
--- a/packages/a11y/src/addContainer.js
+++ b/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;
+}
diff --git a/packages/a11y/src/clear.js b/packages/a11y/src/clear.js
index 94bab6ff853084..d4429a5394db2e 100644
--- a/packages/a11y/src/clear.js
+++ b/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;
+}
diff --git a/packages/a11y/src/filterMessage.js b/packages/a11y/src/filter-message.js
similarity index 89%
rename from packages/a11y/src/filterMessage.js
rename to packages/a11y/src/filter-message.js
index 27a48e85fec98b..54fab7dec1aaa4 100644
--- a/packages/a11y/src/filterMessage.js
+++ b/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;
+}
diff --git a/packages/a11y/src/index.js b/packages/a11y/src/index.js
index 97d10c65920202..cdd493091c2394 100644
--- a/packages/a11y/src/index.js
+++ b/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;
}
-};
+}
diff --git a/packages/a11y/src/index.native.js b/packages/a11y/src/index.native.js
index 4e5e9841118b17..41a6591d34516f 100644
--- a/packages/a11y/src/index.native.js
+++ b/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 {
}
-};
+}
diff --git a/packages/a11y/src/test/addContainer.test.js b/packages/a11y/src/test/add-container.test.js
similarity index 91%
rename from packages/a11y/src/test/addContainer.test.js
rename to packages/a11y/src/test/add-container.test.js
index 6ebf062237c9c0..c7e351dd38ef28 100644
--- a/packages/a11y/src/test/addContainer.test.js
+++ b/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();
diff --git a/packages/a11y/src/test/clear.test.js b/packages/a11y/src/test/clear.test.js
index 02438dda1a4ecb..e45a45560c666f 100644
--- a/packages/a11y/src/test/clear.test.js
+++ b/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( '' );
diff --git a/packages/a11y/src/test/filterMessage.test.js b/packages/a11y/src/test/filter-message.test.js
similarity index 88%
rename from packages/a11y/src/test/filterMessage.test.js
rename to packages/a11y/src/test/filter-message.test.js
index 95302abb8d1ce2..9b0613ae72e3d5 100644
--- a/packages/a11y/src/test/filterMessage.test.js
+++ b/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' );
} );
} );
diff --git a/packages/a11y/src/test/index.test.js b/packages/a11y/src/test/index.test.js
index 9888f9adb3a145..b17806c895353c 100644
--- a/packages/a11y/src/test/index.test.js
+++ b/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();
} );
} );