Accessible Div Blog - Clickable Container
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> | |
); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment