fix(tile): ClickableTile should navigate on keypress

[tay1orjones]

Reported on slack

I can't find a good reason as to why the keydown handler would need to call preventDefault(). I think it was added by accident during the functional refactor, #9721

Changelog

Changed

• No longer call evt.preventDefault() in the keydown handler

Testing / Reviewing

• In the ClickableTile story: focus the tile, press enter or space, the clickabletile should navigate. It previously would not navigate.
• This behavior should match what happens on click of the clickabletile.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	cbe5ac6
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/653137b47f7b0f0008ec22bb
😎 Deploy Preview	https://deploy-preview-14945--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	cbe5ac6
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/653137b4835b23000898af13
😎 Deploy Preview	https://deploy-preview-14945--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[tw15egan]

LGTM 👍 ✅

[andreancardona]

tested & looks good!

[alewitt2]

I know this issue is already merged, but i just ran into a related issue and i think i may have insight as to why preventDefault() was defined and also a another bug in the code

  function handleOnKeyDown(evt: KeyboardEvent) {
    evt?.persist?.();
    if (matches(evt, [keys.Enter, keys.Space])) {
      setIsSelected(!isSelected);
      onKeyDown(evt);
    }
    onKeyDown(evt);
  }

If a user defines their own callback for onKeyDown, then there is a good chance they want to control what happens when any key is pressed (including enter and space). That said.. the way the code was and is written, doesnt really solve the that problem for the user. Something like the following would be required:

  function handleOnKeyDown(evt: KeyboardEvent) {
    evt?.persist?.();
    if (matches(evt, [keys.Enter, keys.Space])) {
      setIsSelected(!isSelected);
      if (user defined onKeyDown) { // would need some logic to understand when a user defined the callback or not
        evt.preventDefault();
        onKeyDown(evt);
      }
    } else { // this else is necessary to prevent the callback being called twice when enter/space keys are pressed.
      onKeyDown(evt);
    }
  }