How to add a keyboard listener to my onClick handler?

I have the following:

class MyTextArea extends React.Component {

  handleClick = () => {
    this.focus();
  }
    
  focus = () => this.ref.focus;

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

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

My CSS:

.magicHelper {
  width: 100%;
  height: 100%;
}
textarea {
  line-height: 32px;
}

I need this because I need the textarea's placeholder are to be horizontally and vertically centered in the page. Given textareas can't vertically center text, I need to keep the height of the textarea short. I therefore need to make it so when the user clicks outside of the textarea, thinking they are clicking the the textarea, the textarea auto focuses in.

This is causing an ESLint error:

"Visible, non-interactive elements with click handlers must have at least one keyboard listener".

How can I update the above to pass eslint?

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"

You can pass the ESLint warning/error by adding at least one keyboard listener, as answered by Kaysser. But I'd rather fix the real problem here, which is having click and keyboard listeners on an element that's not recognised as clickable by browsers and screen readers.

The error message ("Visible, non-interactive elements with click handlers must have at least one keyboard listener") describes a lot when you think about it; you've added a click handler to an element that's made to display information and not for the user to interact with. On top of adding a keyboard listener you should also change the cursor to a pointer on hover, add tabindex, role etc. to make it accessible and comprehensible.

The best fix for this is to change the div element to a button, that solves the ESLint warning but also tells all browsers and screen readers that this is an interactive element that you can click with all kinds of pointers (mouse, keyboard, finger, stylus).

class MyTextArea extends React.Component {
  render() {
    return (
      <button className="magicHelper" onClick={this.handleClick}>
        <textarea></textarea>
      </button>
    );
  }
}

Indicate the element's role with the role, onKeyPress and tabIndex attributes:

<div
  onClick={onClickHandler}
  onKeyPress={onKeyPressHandler}
  role="button"
  tabIndex="0">
  Save
</div>

you can use onMouseDown instead of onClick

For those getting this error with the <img /> tag, you can replace it with the <input type="image" /> tag. So, change from:

<img alt="" src={} onClick={} />

to:

<input type="image" alt="" src={} onClick={} />

For people who are unable or don't want to use a mouse, an onclick handler may not suffice. So ESLint tags this as an accessbility issue until you add an onKeyDown handler as well.