Restructure/refactor to prepare for a11y for a module

packages/a11y/src/index.js

@@ -2,87 +2,20 @@
  * WordPress dependencies
  */
 import domReady from '@wordpress/dom-ready';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import addIntroText from './add-intro-text';
-import addContainer from './add-container';
-import clear from './clear';
-import filterMessage from './filter-message';
+import { makeSetupFunction } from './shared/index';
+export { speak } from './shared/index';
 
 /**
  * Create the live regions.
  */
-export function setup() {
-	const introText = document.getElementById( 'a11y-speak-intro-text' );
-	const containerAssertive = document.getElementById(
-		'a11y-speak-assertive'
-	);
-	const containerPolite = document.getElementById( 'a11y-speak-polite' );
-
-	if ( introText === null ) {
-		addIntroText();
-	}
-
-	if ( containerAssertive === null ) {
-		addContainer( 'assertive' );
-	}
-
-	if ( containerPolite === null ) {
-		addContainer( 'polite' );
-	}
-}
+export const setup = makeSetupFunction( __( 'Notifications' ) );
 
 /**
  * Run setup on domReady.
  */
 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`.
- *
- * @param {string} message    The message to be announced by assistive technologies.
- * @param {string} [ariaLive] The politeness level for aria-live; default: 'polite'.
- *
- * @example
- * ```js
- * import { speak } from '@wordpress/a11y';
- *
- * // For polite messages that shouldn't interrupt what screen readers are currently announcing.
- * speak( 'The message you want to send to the ARIA live region' );
- *
- * // For assertive messages that should interrupt what screen readers are currently announcing.
- * speak( 'The message you want to send to the ARIA live region', 'assertive' );
- * ```
- */
-export function speak( message, ariaLive ) {
-	/*
-	 * Clear previous messages to allow repeated strings being read out and hide
-	 * the explanatory text from assistive technologies.
-	 */
-	clear();
-
-	message = filterMessage( message );
-
-	const introText = document.getElementById( 'a11y-speak-intro-text' );
-	const containerAssertive = document.getElementById(
-		'a11y-speak-assertive'
-	);
-	const containerPolite = document.getElementById( 'a11y-speak-polite' );
-
-	if ( containerAssertive && ariaLive === 'assertive' ) {
-		containerAssertive.textContent = message;
-	} else if ( containerPolite ) {
-		containerPolite.textContent = message;
-	}
-
-	/*
-	 * Make the explanatory text available to assistive technologies by removing
-	 * the 'hidden' HTML attribute.
-	 */
-	if ( introText ) {
-		introText.removeAttribute( 'hidden' );
-	}
-}

packages/a11y/src/index.native.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import filterMessage from './filter-message';
+import filterMessage from './shared/filter-message';
 
 /**
  * Update the ARIA live notification area text node.

packages/a11y/src/add-intro-text.js → packages/a11y/src/shared/add-intro-text.ts

@@ -1,22 +1,18 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-
 /**
  * Build the explanatory text to be placed before the aria live regions.
  *
  * This text is initially hidden from assistive technologies by using a `hidden`
  * HTML attribute which is then removed once a message fills the aria-live regions.
  *
+ * @param {string} introTextContent The translated intro text content.
  * @return {HTMLParagraphElement} The explanatory text HTML element.
  */
-export default function addIntroText() {
+export default function addIntroText( introTextContent: string ) {
 	const introText = document.createElement( 'p' );
 
 	introText.id = 'a11y-speak-intro-text';
 	introText.className = 'a11y-speak-intro-text';
-	introText.textContent = __( 'Notifications' );
+	introText.textContent = introTextContent;
 
 	introText.setAttribute(
 		'style',

packages/a11y/src/shared/index.js

@@ -0,0 +1,81 @@
+/**
+ * Internal dependencies
+ */
+import addContainer from '../shared/add-container';
+import addIntroText from '../shared/add-intro-text';
+import clear from '../shared/clear';
+import filterMessage from '../shared/filter-message';
+
+/**
+ * Create the live regions.
+ * @param {string} introTextContent The intro text content.
+ */
+export function makeSetupFunction( introTextContent ) {
+	return function setup() {
+		const introText = document.getElementById( 'a11y-speak-intro-text' );
+		const containerAssertive = document.getElementById(
+			'a11y-speak-assertive'
+		);
+		const containerPolite = document.getElementById( 'a11y-speak-polite' );
+
+		if ( introText === null ) {
+			addIntroText( introTextContent );
+		}
+
+		if ( containerAssertive === null ) {
+			addContainer( 'assertive' );
+		}
+
+		if ( containerPolite === null ) {
+			addContainer( 'polite' );
+		}
+	};
+}
+
+/**
+ * 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`.
+ *
+ * @param {string} message    The message to be announced by assistive technologies.
+ * @param {string} [ariaLive] The politeness level for aria-live; default: 'polite'.
+ *
+ * @example
+ * ```js
+ * import { speak } from '@wordpress/a11y';
+ *
+ * // For polite messages that shouldn't interrupt what screen readers are currently announcing.
+ * speak( 'The message you want to send to the ARIA live region' );
+ *
+ * // For assertive messages that should interrupt what screen readers are currently announcing.
+ * speak( 'The message you want to send to the ARIA live region', 'assertive' );
+ * ```
+ */
+export function speak( message, ariaLive ) {
+	/*
+	 * Clear previous messages to allow repeated strings being read out and hide
+	 * the explanatory text from assistive technologies.
+	 */
+	clear();
+
+	message = filterMessage( message );
+
+	const introText = document.getElementById( 'a11y-speak-intro-text' );
+	const containerAssertive = document.getElementById(
+		'a11y-speak-assertive'
+	);
+	const containerPolite = document.getElementById( 'a11y-speak-polite' );
+
+	if ( containerAssertive && ariaLive === 'assertive' ) {
+		containerAssertive.textContent = message;
+	} else if ( containerPolite ) {
+		containerPolite.textContent = message;
+	}
+
+	/*
+	 * Make the explanatory text available to assistive technologies by removing
+	 * the 'hidden' HTML attribute.
+	 */
+	if ( introText ) {
+		introText.removeAttribute( 'hidden' );
+	}
+}