@wordpress/a11y/src/script/add-intro-text.ts

Accessibility (a11y) utilities for WordPress.

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.
 *
 * @return The explanatory text HTML element.
 */
export default function addIntroText() {
	const introText = document.createElement( 'p' );

	introText.id = 'a11y-speak-intro-text';
	introText.className = 'a11y-speak-intro-text';
	introText.textContent = __( 'Notifications' );

	introText.setAttribute(
		'style',
		'position:absolute;' +
			'margin:-1px;' +
			'padding:0;' +
			'height:1px;' +
			'width:1px;' +
			'overflow:hidden;' +
			'clip-path:inset(50%);' +
			'border:0;' +
			'word-wrap:normal !important;' +
			'word-break:normal !important;'
	);
	introText.setAttribute( 'hidden', '' );

	const { body } = document;
	if ( body ) {
		body.appendChild( introText );
	}

	return introText;
}