JSFiddle - React, Tailwind, and code Playground
HTML
<div class="test">
This is a test
<div class="content" aria-live="assertive" aria-="Searching please wait..." role="alert">Some content goes here</div>
</div>
<input type="button" value="Add it!" id="test"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
CSS
.content {
display: none;
position: fixed;
width: 200px;
height: 100px;
background-color: #fff;
box-shadow: 0 0 3px #ccc;
margin: auto;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
JavaScript
$("#test").click(function () {
var $content = $(".content");
$content.show();
// $content.text("Alerting something");
setTimeout(function () {
$content.attr({
'aria-label': 'Done!'
});
}, 5000)
});