我有三个兄弟姐妹

1) a checkbox + label and tabindex = 0 is set on the checkbox 

2) a scrollable div listbox containing list of checkbox + label as well, the scrollable div listbox has 
a tabindex = 0. In the listbox checkbox has tabindex = 0.

When focus is on this listbox an enter key or click event will allow any subsequent tabbing place 
focus on the checkboxes in the listbox and until the last checkbox + label. 

3) a button which also have a tabindex = 0.

当焦点在#3兄弟节点上时，我按shift + tab没有任何问题，特别是当我没有进入列表框并到达#3兄弟节点时;在这种情况下按下shift + tab会将焦点放在列表框上，我可以看到列表框的边框被高亮显示。
但是，当我进入列表框，用Tab键遍历列表，然后退出列表框，并将焦点放在#3兄弟列表框上时，如果尝试使用shift + tab键返回列表框，则会将焦点放在列表框的最后一个后代列表框上，而不是列表框本身。
所以我决定用下面的代码强制聚焦列表框

function handleTabPress(e: KeyboardEvent) {
  if (e.shiftKey) {
    console.log(document.getElementById(cards.value[index].scroll.areaid));
    document.getElementById(cards.value[index].scroll.areaid)?.focus();

    document.getElementById(cards.value[index].scroll.areaid)?
       .setAttribute('tabIndex', '0');
  }
}

我不知道发生了什么，我希望这能起作用，但它跳过了列表框，而是将焦点放在#1兄弟上，即checkbox + label，而我试图将焦点放在的id和元素是列表框的id和元素。
求你了我需要有人来帮我.