braid-design-system
Version:
Themeable design system for the SEEK Group
38 lines (37 loc) • 1.37 kB
JavaScript
;
const react = require("react");
const reactDom = require("react-dom");
const lib_css_atoms_atoms_cjs = require("../../../css/atoms/atoms.cjs");
const lib_components_HiddenVisually_HiddenVisually_css_cjs = require("../../HiddenVisually/HiddenVisually.css.cjs");
let announcementCounter = 0;
const containerPrefix = "braid-announcement-container";
const Announcement = ({ children }) => {
const [announcementElement, setElement] = react.useState(null);
const className = [
lib_css_atoms_atoms_cjs.atoms({
reset: "div",
position: "absolute",
bottom: 0,
overflow: "hidden"
}),
lib_components_HiddenVisually_HiddenVisually_css_cjs.root
].join(" ");
react.useEffect(() => {
const announcementContainerId = `${containerPrefix}-${announcementCounter++}`;
const element = document.createElement("div");
element.setAttribute("id", announcementContainerId);
element.setAttribute("class", className);
element.setAttribute("aria-live", "polite");
element.setAttribute("aria-atomic", "true");
document.body.appendChild(element);
setElement(element);
return () => {
document.body.removeChild(element);
};
}, [className]);
if (!announcementElement) {
return null;
}
return reactDom.createPortal(children, announcementElement);
};
exports.Announcement = Announcement;