Skip to content

Instantly share code, notes, and snippets.

@aeaston
Created September 30, 2020 19:27
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
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