javascript - 覆盖默认 TabIndex 行为以首先选择选中的元素

Question

我有两个带有标签 Yes 和 No 的单选按钮，它们的标签 tabIndex 都设置为 0。默认情况下设置为选中。它们也是自定义单选按钮。

我想要实现的是 -

1. 当用户点击 Tab 键时，选中的单选按钮应该是焦点。（默认情况下，第一个元素是焦点。）
2. 当用户再次点击选项卡时，它应该继续其自然行为并专注于下一个元素。

这是我尝试过的伪代码：

isTab = false
isChecked = false

switch(event.keyCode):
   case 9:
     if (!isTab):
       isTab = true;
       event.preventDefault();
       for (let radio of radioButtons):
         if radio.isChecked:
            radio.focus()
            isChecked = true;
     
       if (!isChecked):
          // if none are selected, focus on first
          radioButtons[0].focus()
          

这仅在默认情况下仅第一次工作，因此选择不选择。但是当我选择 Yes 并按 Tab 时，焦点仍停留在 Yes 上，并且不会移动到下一个元素。

我想首先将焦点保持在选定的收音机上，然后在随后的选项卡上按我想像往常一样移动焦点。

帮助高度赞赏！

标签： javascripthtmlangularjsaccessibilitytabindex