JSFiddle - React, Tailwind, and code Playground

HTML

<!-- <h2>Aria-live stops working when dialogs appear</h2>
<h3>Problem:</h3> -->
Step 1: Enable VoiceOver (cmd-f5)<br>
Step 2: <input class="favNumBtn" type="button" value="What's your favourite number?"><br>
Step 3: <input class="showDialogBtn" type="button" value="show dialog"><br>
<div class="overlay">
  Step 4: <input class="hideDialogBtn" type="button" value="hide dialog"><br>
</div>
Step 5: Now <input class="favNumBtn" type="button" value="What's your favourite number?"> doesn't announce!

<div role="alert" class="visuallyhidden"></div>
<!-- <h3>Observations</h3>
<ul>
  <li>Uncommenting the default css of display:none for .overlay makes it work.</li>
  <li>Putting the first favNumBtn in a &lt;p&gt; tag makes it work</li>
  <li>Uncommenting this text makes it work wtf lol</li>
</ul> -->

CSS

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.overlay {
  /* display:none; */
}

.show-dialog .overlay {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  background: rgba(0,0,0,0.55);
}

JavaScript

$('.favNumBtn').click(() => {
	$('[role=alert]').html("I like the number " + random());
});
$('.showDialogBtn').click(() => {
	$('body').addClass('show-dialog');
});
$('.hideDialogBtn').click(() => {
	$('body').removeClass('show-dialog');
  $('.overlay').css('display', 'none');
});

var random = () => Math.floor(Math.random()*500);