📦 Clickable box

👋 FYI, this note is over 6 months old. Some of the content may be out of date.

Note: this implementation has some major drawbacks compared to using a native <button> element. For example a proper disabled state cannot be achieved without a lot more effor. Always use the correct HTML element for the job!

<span
// Make the element clickable
onClick={handleClick}
// Make the element navigable by keyboard
tabIndex={0}
// Call `handleClick` if the user presses
// space key while the element is in focus
onKeyDown={(event) => {
// SPACE keycode: 32
// ENTER keycode: 13
// Find more at http://keycode.info/
if (event.keyCode === 32) {
event.preventDefault()
handleClick()
}
}}

// Tell screen readers that the element is a button
role="button"
// All other props are passed through to the element
aria-label="Close modal"
>

<CloseIcon />
</span>

Same without the comments:

<span
onClick={handleClick}
tabIndex={0}
onKeyDown={(event) => {
if (event.keyCode === 32) {
event.preventDefault()
handleClick()
}
}}

role="button"
aria-label="Close modal"
>

<CloseIcon />
</span>

← Back home