@razorpay/blade
Version:
The Design System that powers Razorpay
105 lines (100 loc) • 2.98 kB
JavaScript
import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
import _createClass from '@babel/runtime/helpers/createClass';
import { screenReaderStyles } from '../VisuallyHidden/ScreenReaderStyles.js';
var LIVEREGION_TIMEOUT_DELAY = 1000;
var liveAnnouncer = null;
var LiveAnnouncer = /*#__PURE__*/function () {
function LiveAnnouncer() {
_classCallCheck(this, LiveAnnouncer);
this.node = document.createElement('div');
this.node.dataset.liveAnnouncer = 'true';
Object.assign(this.node.style, screenReaderStyles);
this.assertiveLog = this.createLog('assertive');
this.node.appendChild(this.assertiveLog);
this.politeLog = this.createLog('polite');
this.node.appendChild(this.politeLog);
document.body.prepend(this.node);
}
return _createClass(LiveAnnouncer, [{
key: "createLog",
value: function createLog(ariaLive) {
var node = document.createElement('div');
node.setAttribute('role', 'log');
node.setAttribute('aria-live', ariaLive);
node.setAttribute('aria-relevant', 'additions');
return node;
}
}, {
key: "destroy",
value: function destroy() {
if (!this.node) {
return;
}
document.body.removeChild(this.node);
// @ts-expect-error
this.node = null;
}
}, {
key: "announce",
value: function announce(message) {
var assertiveness = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'assertive';
if (!this.node) {
return;
}
var node = document.createElement('div');
node.textContent = message;
if (assertiveness === 'assertive') {
this.assertiveLog.appendChild(node);
} else {
this.politeLog.appendChild(node);
}
if (message !== '') {
setTimeout(function () {
node.remove();
}, LIVEREGION_TIMEOUT_DELAY);
}
}
}, {
key: "clear",
value: function clear(assertiveness) {
if (!this.node) {
return;
}
if (!assertiveness || assertiveness === 'assertive') {
this.assertiveLog.innerHTML = '';
}
if (!assertiveness || assertiveness === 'polite') {
this.politeLog.innerHTML = '';
}
}
}]);
}();
/**
* Announces the message using screen reader technology.
*/
function announce(message) {
var assertiveness = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'assertive';
if (!liveAnnouncer) {
liveAnnouncer = new LiveAnnouncer();
}
liveAnnouncer.announce(message, assertiveness);
}
/**
* Stops all queued announcements.
*/
function clearAnnouncer(assertiveness) {
if (liveAnnouncer) {
liveAnnouncer.clear(assertiveness);
}
}
/**
* Removes the announcer from the DOM.
*/
function destroyAnnouncer() {
if (liveAnnouncer) {
liveAnnouncer.destroy();
liveAnnouncer = null;
}
}
export { announce, clearAnnouncer, destroyAnnouncer };
//# sourceMappingURL=LiveAnnouncer.web.js.map