Keypress event handler for a11y compliance

I am trying to make my working React.JS app compliant with accessibility standards.

As a part of the exercise, I added onKeyDown handlers to where I am using onClick handlers. I also wrap those handlers with a special wrapper function that checks which key is pressed. The actual code is below:

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

I use it as:

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

This is working fine. However, there are situations when I want to pass the actual event as an argument to the function wrapped by the handleKeyPress function. That is not working for me. I tried:

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

That is not working. Keydown events are detected, hence I see detected keydown printed. Yet, the code inside does not get invoked.

What is the correct way of doing this?

>Solution :

The problem is that handleKeyPress returns a function (which makes sense, since you usually use the return value for onKeyDown), but you’re not calling it in your example where you’re trying to use the event object, you’re just calling handleKeyPress to create the function and then not calling the function.

I would modify handleKeyPress so it passes along the event object:

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

Then the usage would be almost exactly like your original usage, you’d just include the handler:

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

or more succinctly:

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