Javascript 将按钮的焦点设置为通过键盘选择时替换它的按钮

处理表单的可访问性，特别是通过键盘导航。有一个按钮名为

添加技能

，另一个按钮名为

删除技能

。当按下

添加技能

按钮时，

删除技能

按钮将替换该按钮，因此它们不会同时出现在屏幕上

当前，按钮的焦点不会自动从一个按钮移动到另一个按钮，而是根据选择的按钮跳转到按钮之前或之后的div

到目前为止，我一直在尝试向另一个按钮添加一些JavaScript来聚焦

onclick

，当两个按钮同时出现在屏幕上时，我可以让它工作，但对于动态按钮来说就不那么多了

我想改变这一点，使焦点改变到动态出现的按钮上

代码如下：

<button *ngIf="updateable && isSelected()"
    class="float-right ui inverted button" tabindex="0">
    Remove
    <span class="screen-reader-only">
        {{ skill.name }}
    </span>
    skill
</button>
<button *ngIf="updateable && !isSelected()" [class.disabled]="selectDisabled()" class="float-right ui button"
     tabindex="0" >
    Add
    <span class="screen-reader-only">
        {{ skill.name }}
    </span>
    skill
</button>```

Any help would be much appreciated!

去除
{{skill.name}
技能
添加
{{skill.name}
技能
```
任何帮助都将不胜感激！

（可能不是你想听到的，但是-IMHO拥有这些按钮“切换位置”本身已经是一个可访问性问题。这可能会给某些用户造成问题，可能不会通过操纵焦点跳到哪里来解决。）你需要调用出现的元素上的.focus（），可能正在调用，但是到那时，元素在DOM中已经不存在了。@CBroe我认为你强调这个问题是对的，如果它们都出现在页面上的话，我会节省很多时间来处理这些事情@CBroe您是否有任何文档支持您的主张？我希望能够改变这个设计，我认为如果我能提供一些证据，讨论对我来说会更好。