edx-platform/lms/static/js/accessible_components/StatusBarAlert.jsx

/*
Wrapper for React/Paragon accessible status bar
*/

import React from 'react';
import ReactDOM from 'react-dom';
import {StatusAlert} from '@edx/paragon/static';

export class StatusAlertRenderer {
    constructor(message, selector, afterselector) {
        this.shiftFocus = this.shiftFocus.bind(this);
        const element = document.querySelector(selector);

        if (element) {
            /*
      These props match the defaults mostly in the paragon lib:
      https://github.com/openedx/paragon/tree/master/src/StatusAlert
      but are made explicit in the case of a upstream change to defaults
      */
            ReactDOM.render(
                <StatusAlert
                    alertType="warning"
                    dismissible
                    open
                    dialog={message}
                    dismissable
                    onClose={() => this.shiftFocus(afterselector)}
                />,
                document.querySelector(selector)
            );
        }
    }

    shiftFocus(afterselector) {
        const afterelement = document.querySelector(afterselector);
        /*
    Optional generic function to shift 'next' focusable element for keyboard users
    */
        if (afterelement) {
            afterelement.focus();
        }
    }
}