@ithaka/bonsai/js/bonsai.accessible.notifications.js

ITHAKA core styling

/**
 * @class BonsaiNotification
 *
 * @param messageSelector {String} [messageSelector="#screen-reader-notification"] - selector for the message container
 *
 * @example
 * const ScreenNotification = new BonsaiNotification("#screen-reader-notification");
 *
 * ScreenNotification.sendMessage("Hello screen reader user");
 *
 * @returns object to send notifications directly to a screen-reader user
 *
 */
class BonsaiNotification {
    constructor(messageSelector="#screen-reader-notification") {
        this.messageSelector = messageSelector;
        this._initializeMessageContainer();
    }

    /**
     * Checks if the message div exists in the DOM, if not throws error
     *
     * @throws error if message container doesn't exist in the DOM
     * @private
     */
    _initializeMessageContainer() {
        if(!$(`${this.messageSelector}`).length) {
            throw new Error("Missing required container. Add div with the correct ARIA attrs");
        }

        this.$messageContainer = $(`${this.messageSelector}`);
    }

    /**
     * Exposed endpoint for posting new messages to a screen reader
     *
     * @param message {String}
     * @throws error if a message isn't passed
     *
     */
    sendMessage(message) {
        if(message) {
            this.$messageContainer.append(`<span>${message}</span>`);
        } else {
            throw new Error("Screen Reader Notification didn't receive a message to alert on");
        }
    }
}

export { BonsaiNotification };