用于 a11y 合规性的按键事件处理程序

Question

我正在尝试使我的工作 React.JS 应用程序符合可访问性标准。

作为练习的一部分，我在使用onClick处理程序的地方添加了onKeyDown处理程序。 我还使用一个特殊的包装器 function 来包装这些处理程序，该包装器检查按下了哪个键。 实际代码如下：

import { KeyboardEvent } from 'react';
enum Keys {
  TAB = 9,
}
const handleKeyPress = (cb: () => void) => (e: KeyboardEvent) => {
  if (e.keyCode !== Keys.TAB) cb();
};
export { handleKeyPress };

我将其用作：

<div
  className={classes.link_complete}
  onClick={handleOnClick}
  onKeyDown={handleKeyPress(() => {
    handleOnClick();
  })}
  tabIndex={0}
  role="button"
>

这工作正常。 但是，在某些情况下，我想将实际事件作为参数传递给由handleKeyPress function 包装的 function。 那对我不起作用。 我试过了：

onClick={handleViewInfoClick}
onKeyDown={(e) => {
  console.log('detected keydown');
  handleKeyPress(() => {
    console.log('inside handler');
    handleViewInfoClick(e);
  });
}}

那是行不通的。 检测到 Keydown 事件，因此我看到detected keydown打印出来。 然而，里面的代码并没有被调用。

这样做的正确方法是什么？

Answer 1

问题是handleKeyPress返回一个 function （这是有道理的，因为您通常使用onKeyDown的返回值），但是在您尝试使用事件 object 的示例中，您没有调用它，您只是在调用handleKeyPress创建 function 然后不调用 function。

我将修改handleKeyPress ，使其传递事件object：

const handleKeyPress = (cb: (e: KeyboardEvent) => void) => (e: KeyboardEvent) => {
  //                         ^^^^^^^^^^^^^^^^
  if (e.keyCode !== Keys.TAB) cb(e);
  //                             ^
};

然后用法几乎与您的原始用法完全相同，您只需包含处理程序：

<div
  className={classes.link_complete}
  onClick={handleOnClick}
  onKeyDown={handleKeyPress((e) => handleViewInfo(e))}
  tabIndex={0}
  role="button"
>

或更简洁地说：

<div
  className={classes.link_complete}
  onClick={handleOnClick}
  onKeyDown={handleKeyPress(handleViewInfo)}
  tabIndex={0}
  role="button"
>