An Option to Use Native DOM Events Instead of Synthetic Events

[Mike Theodorou]

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Similar to the shouldFocusDOMNode option for the lib initialization, would you be able to add a flag like shouldUseNativeEvents? It would be much easier to write accessible HTML and tests if I could use native events (like onClick) instead.

Also, the Link component from react-router-dom does not work by default with this library. We instead have to create a synthetic Link and use the library's navigate function, instead of letting the library natively do its thing.

Describe the solution you'd like
A clear and concise description of what you want to happen.

Either init({ shouldFocusDOMNode: true }) should handle allowing the DOM / React events to come through on the focused nodes, or there should be another flag like init({ shouldFocusDOMNode: true, shouldUseNativeEvents: true }).

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

If we could key off the flag passed into the initialization config, perhaps we could not call event.preventDefault and event.stopPropagation in the bindEventListeners method.

Additional context
Add any other context or screenshots about the feature request here.

[Mike Theodorou]

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

Thanks!

[TD]

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.

[Mike Theodorou]

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

[Mike Theodorou]

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

[TD]

@miketheodorou: Thanks for the POC and the videos!

We'll have a look.

(@asgvard: ⬆️)

[TD]

@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.

[Bruno Aggierni]

Status Update:

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

[Mike Theodorou]

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