键盘和鼠标事件#可访问性

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:的描述

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

键，它是按下的键的文本表示，而应该使用&自Internet Explorer 9以来一直受支持。

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

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

如果它是在组件内部渲染的，请改用ref。