Code Notes

📦Clickable box

Just use a native <button>. You get focus, keyboard activation, disabled, and screen reader semantics for free — recreating all of that on a div/span is a lot of effort for a worse result. (The clickable-box library this note was based on is abandoned, which rather proves the point.)

If you genuinely can’t use a <button>, here’s the minimum for a11y parity. Note event.keyevent.keyCode is deprecated — and that role="button" must activate on both Enter and Space:

<span
  // Make the element clickable
  onClick={handleClick}
  // Make the element focusable by keyboard
  tabIndex={0}
  // Native buttons activate on both Enter and Space
  onKeyDown={(event) => {
    if (event.key === 'Enter' || event.key === ' ') {
      event.preventDefault()
      handleClick()
    }
  }}
  // Tell screen readers that the element is a button
  role="button"
  aria-label="Close modal"
>
  <CloseIcon />
</span>

See MDN on KeyboardEvent.key for the key values.