@intility/bifrost-react/dist/utils/accessibleOnClick.js

React library for Intility's design system, Bifrost.

// When onClick is provided to a component
// component should have tabIndex and keyboard bindings
// this function return value can be spread on a native element
// makes the element simulate what a button element natively does
const accessibleOnClick = (props, onClick) => {
  if (typeof onClick === "function") {
    return {
      onClick,
      role: "button",
      tabIndex: 0,
      onKeyDown: e => {
        if (e.key === "Enter") {
          e.preventDefault();
          if (!e.repeat) {
            onClick(e);
          }
        } else if (e.key === " ") {
          e.preventDefault();
        }
        props.onKeyDown?.(e);
      },
      onKeyUp: e => {
        if (e.key === " ") {
          e.preventDefault();
          onClick(e);
        }
        props.onKeyUp?.(e);
      }
    };
  }
};
export default accessibleOnClick;