键盘和鼠标事件 # Accessbility

Question

当我们按下键盘上的任意键时，如何在 UI 中编写自动鼠标点击的条件。

我正在研究可访问性部分 - > 我的场景是我们有横幅，该横幅在页面最初加载时显示。 为此，在我们关闭该横幅之前，焦点应该在该横幅内。

我已经尝试过 onKeyDown 事件。 当我们使用 e.preventDefault() 触发 onKeyDown 事件时，焦点是隐藏的。 当我单击键盘上的任意键时，我需要再次获得焦点。

提前致谢。

    handleTab = (e) => {
    let tabKey = false
    if (e.keyCode === 9) {
      e.preventDefault()
       tabKey = true
      }
if(tabKey) {
 # here I need an automatic browser click event. so that when I hit the tab key it will go inside of that banner
    }
onKeyDown = {this.handleTab()}

Answer 1

尝试使用tabindex属性来防止标签导航到横幅之外。

    <input type="text" tabIndex="-1"/>

我创建了一个小演示来测试： https://codepen.io/mich_life/pen/vYRMpqe

Answer 2

这就是MDN文档对keyCode所说的：

已弃用：不再推荐使用此功能。 尽管某些浏览器可能仍然支持它，但它可能已经从相关的 web 标准中删除，可能正在被删除，或者可能仅出于兼容性目的而保留。 避免使用它，并尽可能更新现有代码； 请参阅本页底部的兼容性表以指导您的决定。 请注意，此功能可能随时停止工作。

应该使用作为按下键的文本表示的键，并且自 Internet Explorer 9 以来一直支持该键。

由于您没有指定，如果横幅在您的组件内部或外部，我将在外部进行。

handleTab=(evt)=> {
    if(evt.key == 'Tab') {
        evt.preventDefault();
        document.getElementById('banner').focus();
    }
}

如果它在您的组件内呈现，请改用ref 。