Announce changes without moving focus

How to do it

Put an empty <p role="status"> in the first HTML. Write the message into it when something happens. Use role="alert" only for urgent errors. See also use toasts only to confirm finished work.

Example

<button type="button" id="copy">Copy</button>
<p role="status" id="status"></p>
<script>
  document.getElementById('copy').addEventListener('click', async () => {
    await navigator.clipboard.writeText('hello@example.com');
    document.getElementById('status').textContent = 'Copied';
  });
</script>

How to check

A browser test triggers each action. The live region was in the initial HTML, now holds the message, and document.activeElement did not change.