Question

我有一个数据网格，该数据网格在右箭头键上需要检查它的标题中是否有最后一个子项，以及最后一个子项是否在keydown上应用了类focus-visible。我可以使用focus-visible找到最后一个孩子和活动元素，但是我的逻辑发现当用户按下箭头键以将焦点放在以下位置时，最后一个孩子有focus-visible最后一个孩子。

到目前为止，这是我的逻辑，但不确定在检查该类在最后一个孩子上时我出了错：

  //
  //ON ARROW RIGHT, IF FOCUS IS ON LAST HEADER, SET FOCUS TO FIRST BODY CELL
  //
  if(e.key === "ArrowRight") {
    let headerId = document.activeElement.parentElement.parentElement.getAttribute("col-id");
    //Get last child
    const headerCell = document.querySelector('.ag-header-cell:last-child').children[1].children[1];
    //focus visible class on nav element
    const hasFocusVisible = document.activeElement.classList.contains('focus-visible');
    console.log("last child: ", headerCell);
    console.log("has focus visible: ", hasFocusVisible);
    if(headerCell.classList.contains('focus-visible')) {
      //if headerCell and hasFocusVisible, set focus to first cell in body
      document.querySelector('.ag-cell').focus();
    }
  }

当前问题状态：Plnkr Link

Answer 1

我发现为最后一个标头元素设置一个布尔值并在用户位于最后一个元素上时进行切换允许用户在焦点设置为主体单元之前导航到末尾：

let lastHeaderCell = false;
document.addEventListener("keydown", function(e) {
  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;
    }
  }
}

查找最后一个孩子在按键时是否有特定的班级

1 个答案: