Accessible Div Blog - Clickable Container

clickable_container.js

function ClickableContainer(props) {
  // ideally these are stored in a separate key mapping utility file
  const enterKey = 13;
  const spaceKey = 32;
  const { children, ariaLabel, ...otherProps } = props;

  function handleKeyDown(e) {
    if (e.keyCode === enterKey || e.keyCode === spaceKey) {
      e.preventDefault();
      props.onClick(e);
    }
  }

  return (
    <div
      onKeyDown={handleKeyDown}
      role="button"
      tabIndex="0"
      aria-label={ariaLabel}
      {...otherProps}
    >
      {children}
    </div>
  );
}