Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Accessible Div Blog - ExpandedClickableArea
function ExpandedClickableArea(props) {
const clickableElemTypes = ['a', 'button', 'input'];
const refExpandedArea = useRef();
function handleClick(e) {
const clickableElems = [
...refExpandedArea.current.querySelectorAll('[data-expand-click-area]')
];
if (clickableElems.length !== 1) {
throw new Error(
`Expected one clickable element but found ${clickableElems.length}`
);
}
const clickableElem = clickableElems[0];
const targetIsClickable = clickableElemTypes.includes(e.target.tagName.toLowerCase());
if (clickableElem !== e.target && !targetIsClickable) {
clickableElem.click();
}
}
return (
<div
ref={refExpandedArea}
className={`${props.className} ${styles.expandedClickableArea}`}
tabIndex=”0”
onClick={handleClick}
>
{props.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.