An Option to Use Native DOM Events Instead of Synthetic Events about norigin-spatial-navigation

[predikament]

@miketheodorou: Hello again! Busy weeks right now, but we've added a task to look into this issue and will be starting on it hopefully soon; Just so you know there's some activity on this topic.

[Braggiouy]

Status Update:

The pull request #105 has been approved. It will be incorporated into the upcoming release, effectively addressing the associated issue.

[miketheodorou]

Hey @predikament, I created a small POC to demonstrate the issues that I am having.

When I initialize the library with the following invocation, the onClick handlers on the buttons, as well as the native behavior for the Link component from react-router-dom no longer work when pressing the Enter key. I'm able to get the onKeyUp event to fire on one of the buttons, so it's not all events that are blocked, but the onClick is pretty important to keep enabled when we're actually focusing the DOM nodes.

init({ shouldFocusDOMNode: true });

I would prefer to not have to pass onEnterPress to the useFocusable options when shouldFocusDOMNode is enabled because it's breaking the base behavior of these elements onClick methods.

I would expect the behavior to work the way it does when you comment out the init invocation on line 8 of main.tsx and instead use Tab to move through the elements and press Enter to trigger the onClick handlers as well as the default navigation behavior.

Basically, I would like the library to move through the elements with the same logic it does, but not disable the onClick behavior.

Here are a couple videos as well that outline what I am describing.

With init invocation
https://github.com/NoriginMedia/Norigin-Spatial-Navigation/assets/22715776/0c2b76ad-3d64-4c2f-b1e2-ac40c6e418f1

Without init invocation
https://github.com/NoriginMedia/Norigin-Spatial-Navigation/assets/22715776/d7ce1f38-35a1-406c-87bd-fd2c88794a6b

[miketheodorou]

@Braggiouy Thank you! Very excited to try this out. I appreciate you all adding this.

[miketheodorou]

Thanks for the response @predikament! I'll get a little POC built and sent over to you when I get some free time.

[miketheodorou]

Hey Norigin Media Team, just following up on this to see if you have any thoughts or recommendations.

Thanks!

[predikament]

Hello @miketheodorou!

Could you give a simple usage example based on your request here?

We've implemented a lot of accessibility related stuff and have not seen this need ourselves, so an example would help to better understand.

Thanks in advance.

[predikament]

@miketheodorou: Thanks for the POC and the videos!

We'll have a look.

(@asgvard: ⬆️)