joplin/packages/app-desktop/gui/utils/announceForAccessibility.ts

import shim from '@joplin/lib/shim';
import Logger from '@joplin/utils/Logger';

const logger = Logger.create('announceForAccessibility');

const announceForAccessibility = (message: string) => {
	const id = 'joplin-announce-for-accessibility-live-region';
	let announcementArea = document.querySelector(`#${id}`);

	if (!announcementArea) {
		announcementArea = document.createElement('div');
		announcementArea.ariaLive = 'polite';
		announcementArea.role = 'status';
		announcementArea.id = id;
		announcementArea.classList.add('visually-hidden');

		document.body.appendChild(announcementArea);
	} else {
		// Allows messages to be re-announced.
		announcementArea.textContent = '';
	}

	// Defer the announcement. Because `aria-live: polite` causes **changes** in
	// content to be announced, a slight delay is needed when there would otherwise
	// be no change in content.
	const announce = () => {
		logger.debug('Announcing:', message);
		announcementArea.textContent = message;
	};
	shim.setTimeout(announce, 100);
};

export default announceForAccessibility;