如何在屏幕阅读器上强行移除某个元素的焦点？

Question

我正在开发一个单页应用程序，其中组件在 DOM 上不断生成和销毁。我正在使用带有

ARIA

标签的以下按钮，因此屏幕阅读器可以选择和阅读它：

<div class="button" role="button" aria-label="Select">Select</div>

在下面的屏幕截图中，您可以看到 iOS Safari 屏幕阅读器按预期聚焦于它。

当用户点击按钮时，我将其从 DOM 中移除。但是，屏幕阅读器的焦点仍保留在该按钮曾经所在的位置：

我试过更改

role="none"

，添加

aria-hidden="true"

，并在移除按钮之前移除

aria-label

整整一秒：

<div class="button" role="none" aria-hidden="true">Select</div>

...但是在按钮被销毁后似乎没有什么可以移除这个焦点。 有没有办法强行从这个元素上移除焦点？或者有没有办法强制另一个元素获得焦点（比如持久的网站徽标），这样盒子就不会漂浮在空白处？