Link.tsx

import * as React from "react";

export type TLinkRef = HTMLSpanElement;

export interface ILinkProps {
    /**
     * Caption of the link element
     */
    caption: string;
    /**
     * Optional class names
     */
    className?: string;
    /**
     * Click handler callback.
     *
     * Also fired when enter or space key is pressed while the element is focused.
     */
    onClick: () => void;
}

/**
 * Clickable span element.
 *
 * Accepts enter and space key as click.
 */
// tslint:disable-next-line: variable-name
const Link = React.forwardRef<TLinkRef, ILinkProps>(({ caption, className, onClick }: ILinkProps, ref?) => {
    const handleKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {
        if (event.keyCode === 13 || event.keyCode === 32) {
            onClick();
            event.preventDefault();
            event.stopPropagation();
        }
    };
    const classes = (className ?? "") + " action";
    return (
        <span className={classes}
            tabIndex={0}
            onClick={onClick}
            onKeyDown={handleKeyDown}
            ref={ref}
        >{caption}</span>
    );
});

Link.displayName = "Link";

export { Link };