How to add a keyboard listener to my onClick handler?

https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/click-events-have-key-events.md

It seems this rule is to enforce Accessibility standards.

Based on this, change your code to do something like this

<div className="magicHelper" onClick={this.handleClick} onKeyDown={this.handleClick}>

You could also disable the rule in eslint, I suppose it depends on preference.

from ESLINT documents:

Enforce onClick is accompanied by at least one of the following: onKeyUp, onKeyDown, onKeyPress. Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users.

in this case you can either disable the rule or update your code. its better to update your code to meet the web standards.

 class MyTextArea extends React.Component {

      handleClick = () => {
        this.focus();
      }
      handleKeyDown = (ev) => {
          // check keys if you want
        if (ev.keyCode == 13) {
          this.focus()
         }
      }
      focus = () => this.ref.focus;

      handleRef = (component) => {
        this.ref = component;
      };

      render() {
        return (
          <div className="magicHelper" onClick={this.handleClick} onKeyDown={this.handleKeyDown}>
            <textarea></textarea>
          </div>
        );
      }
    }

I got this kind of problem when committing the git message. I'm having following code at that time.

<span onClick={myHome}  className="home__home-header__mybb__mybb-links__ML1" >

to avoid it I used following attribute in the element.

aria-hidden="true"