Accessibility - React Ensure click events have key events

Another approach without decorators could be to use object spread to add the necessary props to an element:

function buttonize(handlerFn) {
  return {
    role: 'button',
    onClick: handlerFn,
    onKeyDown: event => {
      // insert your preferred method for detecting the keypress
      if (event.keycode === 13) handlerFn(event);
    }
  }
}

and use like so:

<div
  className="element-with-very-good-excuse-to-dont-be-a-button"
  {...buttonize(this.myAction)}
>click me</div>

Great solutions here already, but I wanted an option where I didn't have to use decorators or prop-spreading. So I rejigged some of the existing answers into this:

function keyDownA11y(handler) {
  return function onKeyDown(event) {
    if (
      ['keydown', 'keypress'].includes(event.type)
      && ['Enter', ' '].includes(event.key)
    ) {
      handler();
    }
  }
}

usage:

<div
  onClick={myHandler}
  onKeyDown={keyDownA11y(myHandler)}
  role="button"
>
  Hurray!
</div>

EDIT: Alternatively, you could use this to make an A11yButton component and just import that. This way, you could get the benefits of cragb's excellent buttonizer solution:

import React from 'react';

export default function A11yButton({
  elementType,
  onClick,
  ...props
}) {
  return React.createElement(elementType, {
    ...props,
    onClick,
    onKeyDown: keyDownA11y(onClick),
    role: 'button',
    // Add other props that might be necessary, like "tabIndex: 0,"
  });
}

Usage:

<A11yButton
  elementType="div"
  onClick={myHandler}
>
  Hurray!
</A11yButton>

Finally I only see 2 solutions:

1 I can create a component that encapsulate all those actions... But this is the work of a button. And I want not to open a new way to create buttons in my project, this is just for exceptions and this can create a vicious behave inside the project. And for that we have another component... the button :)

2 create a decorator for the actions.

export function a11yButtonActionHandler(target, key, descriptor) {
    const fn = descriptor.value;
    if (typeof fn !== 'function') {
        throw new Error(`@a11yButtonActionHandler decorator can only be applied to methods not: ${typeof fn}`);
    }

    descriptor.value = function actionHandler(event) {
        if (!event || event.type === 'click' ||
            (['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
        ) {
            fn.call(this, event);
        }
    };

    return descriptor;
}

and use the decorator.

@a11yButtonActionHandler
myAction(event) {
 ...
}

---

<div className="element-with-very-good-excuse-to-dont-be-a-button"
     role="button"
     tabIndex="0"
     onKeyDown={ this.myAction }
     onClick={ this.myAction }>