代码之家 › 专栏 › 技术社区 › Matt

使用tab键将焦点从数据网格移到下一个页面元素

wcag2.0 ag-grid accessibility reactjs javascript

Matt · 技术社区 · 7 年前

使用ag网格,我需要能够点击tab键,将焦点元素从当前选定的网格/单元格更改为网格外部页面上的下一个元素。问题是,tab键似乎被锁定在网格中,并且不会移动到数据表之外的下一个元素。

我在存储最后一个焦点单元格的单元格上有一个偶数监听器(用于存储最后一个位置,以便能够返回到网格中的先前焦点单元格),但需要让下一个焦点单元格位于数据网格之外:

const cells = document.getElementsByClassName('ag-cell');
[...cells].map(cell => {
  cell.addEventListener("keydown", function(e) {
    if(e.key === "Tab") {
      let lastCell = cell.attributes[2].value;
      console.log("Last Cell Focused: ", lastCell)
    }
  })
})

如何在按键时从网格中删除焦点选择到下一个可焦点页面元素?

以下是当前网格的PLNKR链接: Link

=================================

更新

我已经更新了我的代码,它现在正在寻找文档中触发的事件,而不是将事件监听器附加到每个单元格。但是,我仍然遇到一个问题,那就是它没有得到 last_cell 价值观和观察 focus-visible 课上 hasFocusVisible .

//on arrow right if last_call === header that has 'focus-visible', set focus to first cell in body
const headerCells = document.getElementsByClassName('ag-header-cell-label');
const last_cell = headerCells[headerCells.length-1].attributes[2];
const hasFocusVisible = document.querySelector('.ag-header-cell-label').classList.contains('focus-visible');
document.addEventListener("keydown", function(e) {
  if(e.key === "ArrowRight") {
    // if(hasFocusVisible && last_cell) {
      console.log("EVENT TRIGGERED FROM: ", event.target, "Last Cell Value: ", last_cell, hasFocusVisible);
      //if last_call and 'ag-header-cell-label' has 'focus-visible', set focus to first cell in body
      const bodyCell = document.getElementsByClassName('ag-cell')[0];
    // }
  }
});

更新Plnkr: Link

=====================================

更新2

我已将元素选择器更新为以下内容:

const last_cell = document.querySelector('.ag-header-cell:last-child');
const hasFocusVisible = document.querySelector('.ag-header-cell-label').classList.contains('.focus-visible');
document.addEventListener("keydown", function(e) {
  console.log('document.activeElement', document.activeElement)
  const activeElement = document.activeElement;
  if(e.key === "ArrowRight" && activeElement) {
    if(last_cell) {
      console.log("EVENT TRIGGERED FROM: ", event.target, "Last Cell Value: ", last_cell, hasFocusVisible);
      //if last_call and 'ag-header-cell-label' has 'focus-visible', set focus to first cell in body
      const bodyCell = document.getElementsByClassName('ag-cell')[0];
    }
  }
  else if(e.key === "ArrowDown"){
    //look for first child in first row with same id as header and set focus
    document.querySelector('.ag-cell').focus();
  }
});

然而, 哈斯可聚光的 变量总是出现 false 当注销焦点可见类的DIV时。我不确定我的逻辑是否错误,或者它不能得到 焦点可见 课堂上 ag-header-cell-label 当事件侦听器被激发时。

1 回复 | 直到 7 年前

Mike 'Pomax' Kamermans 7 年前

如果制表符在单元格内工作,不要向每个单元格添加监听器,只需向文档中添加一个监听器,并手动将焦点移动到页面上您知道的下一个单元格。例如:

var b = document.querySelector('button');
b.passThrough = true;
b.update = pass => {
  b.passThrough = pass;
  b.textContent = "click me to " + (b.passThrough ? "block" : "allow") + " tabbing";
}
b.addEventListener('click', e => b.update(!b.passThrough));
b.update(b.passThrough);

var focussable = Array.from(
  document.querySelectorAll([
    'button',
    '[href]',
    'input',
    'select',
    'textarea',
    '[tabindex]:not([tabindex="-1"])'
  ].join(','))
);

// let's pretend this is your last cell.
var p = document.querySelector('p');

// make it kill off keydown events, BUT, also have it redirect focus
// to "the next focussable element", so you can see what that code looks like.
p.addEventListener('keydown', e => e.preventDefault());

document.addEventListener('keydown', e => {
  if (b.passThrough && e.target === p) {
    var next = focussable.indexOf(p) + 1;
    focussable[next % focussable.length].focus();
  }
});

<button>toggle</button>
<p tabindex=0>first</p>
<a href="#top">second</a>
<a href="#top">third</a>

运行此代码段,单击按钮,单击选项卡,注意选项卡事件现在被捕获(就像在单元格中一样)。现在,再次点击按钮,点击标签,再次点击标签:注意它似乎就像事件不再被捕获一样,当它是事实时:元素本身的事件将被杀死,但是文件现在明确地为我们转移焦点。