查找最后一个孩子是否在 keydown 上有特定的类答案

【问题标题】：Finding if last child has specific class on keydown查找最后一个孩子是否在 keydown 上有特定的类
【发布时间】：2018-08-07 21:24:52
【问题描述】：

我有一个在右箭头键上的数据网格，它需要检查它是否同时具有标题中的最后一个子元素，并且最后一个子元素在 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

【问题讨论】：

您不想检查headerCell 是否有“焦点可见”类来确定焦点是否在最后一个单元格上吗？ if (headerCell.classList.contains("focus-visible")) { ... }
@mhodges - 是的，这就是我想要弄清楚的。问题之一是应该具有“焦点可见”的类是 ag-header-cell 的子级，称为 ag-header-cell-label
@mhodges - 我发现我可以使用document.querySelector('.ag-header-cell:last-child').children[1].children[1]; 获取嵌套的子元素，但是现在在标题中导航时，它不允许在切换焦点之前导航到最后一个标题单元格到身体细胞。有什么想法吗？我也更新了 plunkr 链接。
我真的很困惑你想要做什么，但这是我的发现。 1.查看标题单元格对您并没有太大帮助。 2. document.activeElement 仅在您正在编辑字段时有效（在这种情况下，您的 ArrowRight 处理程序不会触发）。 3. 我在任何地方都没有看到"focus-visible" 类，我看到的是"ag-cell-focus" 和"ag-cell-no-focus"。似乎这段代码在这里有 3 个不同的方向。你到底想完成什么？
抱歉有任何混淆。我想出了如何找到最后一个标题单元格，但现在它会自动将焦点转移到正文单元格而不首先关注最后一个标题单元格，然后允许用户导航到最后一个标题单元格，然后点击右箭头键再次，继续向下到身体细胞。希望这有助于澄清问题。

标签： javascript ag-grid web-accessibility

【解决方案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;
    }
  }
}

【讨论】：