Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
You can’t perform that action at this time.