使用Shift + Tab将焦点设置为存储的先前元素

Question

我正在尝试使用Shift + Tab键将焦点重新设置为先前关注的页面元素，以将焦点设置为数据网格中先前关注的元素，无论是标题单元格还是标题单元格身体细胞。我怀疑它目前正在将焦点推回到标题单元格，因为它们具有标签索引。我正在使用以下内容，该内容应查找存储的先前处于活动状态的元素，并将focus-visible类应用于它：

document.querySelector('.ag-body').tabIndex=0;

document.addEventListener("keydown", function(e) {
  if (e.keyCode == 9 && e.shiftKey == true) {
    let currentFocusedElement = event.srcElement;
    let compId = currentFocusedElement.getAttribute("comp-id");
    currentFocusedElement.classList.add('focus-visible');
    console.log("Shift + Tab currently focused on: ", currentFocusedElement)
    let bodyFocused = document.querySelector('.ag-body').classList.contains('focus-visible');
    console.log("Previously focused element", currentFocusedElement)
    if(bodyFocused == true){
      currentFocusedElement.classList.add('focus-visible');
    }
  }
  else if(e.key === "ArrowRight"){
    let headerId = document.activeElement.parentElement.parentElement.getAttribute("col-id");
    const headerCell = document.querySelector('.ag-header-cell:last-child').children[1].children[1];
    const hasFocusVisible = document.activeElement.classList.contains('focus-visible');
    if(lastHeaderCell === true) {
      document.querySelector('.ag-cell').focus();
      lastHeaderCell = false;
    }
    else if(headerCell.classList.contains('focus-visible')) {
      lastHeaderCell = true;
    }
  }
  else if(e.key === "ArrowDown"){
    //get column id on arrowdown
    let cellHeaderId = document.activeElement.parentElement.parentElement.getAttribute("col-id");
    document.querySelector('.ag-cell[col-id="' + cellHeaderId + '"]').focus();
  }
  else if(e.key === "ArrowUp") {
    //store value of grid cell column id
    let cellId = document.activeElement.getAttribute("col-id");
    let rowId = document.activeElement.parentElement.getAttribute("row-id");
    //set focus to column header if active cell is in first row and remove body cell focus
    if(rowId === "0"){
      document.querySelector('.ag-cell[col-id="' + cellId + '"]').classList.remove('ag-cell-focus');
      document.querySelector('.ag-header-cell[col-id="' + cellId + '"] .ag-header-cell-label').focus();
    }
  }
  else if(e.key === "Tab"){
    let header = document.querySelector('.ag-header-cell-label').classList.contains('focus-visible');
    console.log("Header has focus visible: ",header)
    //store currently focused cell on tab
    let currentFocusedElement = event.srcElement;
    let compId = currentFocusedElement.getAttribute("comp-id");
    console.log("Currently Stored Cell: ",compId);
    console.log("Currently Focused Element: ",currentFocusedElement)
    //removes focus from current cell
    document.activeElement.blur();
    console.log("Active Element was: ", document.activeElement)
    if(header == true) {
      document.querySelector('.ag-header-cell').tabIndex = -1;
      document.querySelector('.ag-cell[col-id="' + compId + '"]').classList.add('ag-cell-focus');
    }
  }
});

链接到当前状态：Plnkr