Why is aria-live announcing a message twice when I use the mouse but once when I use the keyboard?

Question

I'm using VoiceOver in MacOS Sonoma 14.4, and with the following example:

const announce = document.querySelector('#announce')
const actionsList = document.querySelector('#actionsList')
const actions = [{
  action: "Add '.'",
  message: "Added punctuation to the end of the sentence."
}, {
  action: "Add ','",
  message: "Added missing comma."
}, {
  action: "Capitalize",
  message: "Capitalized the first word of the sentence."
}]

actions.forEach((action) => {
  const li = document.createElement("LI")
  const button = document.createElement('BUTTON')
  button.innerText = action.action
  button.addEventListener('click', () => {
    announce.innerText = action.message
  }, false)
  li.appendChild(button)
  actionsList.appendChild(li)
})

<div aria-live="polite" id="announce"></div>
<ul id="actionsList"></ul>

When I use keyboard controls to trigger a click on each button the aria-live, however, when I click on each button with the mouse, it announces the live messages twice. Is there some way to make sure the event is only announced once regardless of how the update is triggered?