Comments (6)
Hi,
Yes, definitely, this will be quite major refactoring though, but we want to migrate it to Hooks eventually.
Regarding getting native focus to the element, if the goal is to "sync" two focused systems, this can be achieved either by using "stealFocus" as I described before, or in another way - by using "onBecameFocused" callback from this lib and calling some ".focus()" method on the native element. But this library should be agnostic of what are the native elements used underneath, so we cannot rely on specific methods or events from native elements.
Closing this for now. If you would have any questions, please feel free to reopen, or submit a PR if you manage to solve this problem and feel it can be a part of this lib :)
Thanks,
Dmitriy
from react-spatial-navigation.
Do you require any further information to discuss this? Just wondering if it is feasible or not?
Integrating with voice over on tizen would be great for the project I am currently working on.
Kind regards,
Stuart
from react-spatial-navigation.
Hi,
This should be already possible if you just bind that event from the browser element that reports the native focus, and call stealFocus
method inside wrapped component. This should "steal" the focus to this component and mark it as "focused" in the spatial navigation system. I don't think this should be implemented in this package itself, since it's agnostic of which components you use with the withFocusable
wrapper and it's also not aware of the way you trigger this from your specific browser elements.
from react-spatial-navigation.
Thank you for the explanation @asgvard.
I am still not sure how to get focus to a native browser element. It is probably not required it just seems to be an easy win for accessibility as Tizen will read out a focused elements text or aria label.
It is just getting that element to be natively focused in parallel to your spatial nav system.
Which is working very well thank you!
Are there still plans to move from the current HOC approach to use Hooks?
Kind regards,
Stuart
from react-spatial-navigation.
Adding some color for future viewers - native "focus" at least in DOM has unexpected side effects when implementing. As I look at this library for an alternative to react-js-spatial-navigation, aria compatibility is a problem here because screen readers rely on tabindex/focus of page elements to read the content to the user. BUT as soon as you really call a domElement.focus(), the browser will try to scroll it into view, which breaks any animation you want to do on focus. Basically, something needs to be visible in the viewport once it is focused, and if it is not, browsers will ultimately adjust the scrollTop/scrollLeft of parent element that contains it to bring it into view.
So native domElement.focus() is more than just about synchronizing focus, it has side effects that must be considered. Some other libraries have written up about this complexity (https://allyjs.io/tutorials/focusing-in-animated-ui.html) but in the end using faux focus as done here in react-spatial-navigation keeps those concerns out of the picture.
from react-spatial-navigation.
@chwagssd I'm currently overcoming this with this, seems to work nicely;
const onBecameFocused = (layout) => {
layout.node.focus({ preventScroll: true });
layout.node.scrollIntoView({ behavior: 'smooth', block: 'end' });
};
from react-spatial-navigation.
Related Issues (20)
- CSS gap:0 breaks navigation HOT 1
- Focus lost when Item Removed HOT 4
- Sometimes navigation doesn't work after go back to previous screen HOT 1
- a vulnerability CVE-2020-15168 is introduced in @noriginmedia/react-spatial-navigation HOT 2
- Focuses the second item in the list, after navigating from the fixed menu HOT 2
- Performance/Crash issue when load multiple rails and hold arrow keys to navigate HOT 1
- [Question]Can I use this package in a ReactJS project? HOT 4
- Focusable items hidden are able to be accessed. HOT 19
- withFocusable usage with forwardRef HOT 9
- Understanding of roadmap for library HOT 5
- more than 100 UI elements in funcational component taking too long to navigate. HOT 1
- 2-Directional Grid-type Items HOT 1
- display none control HOT 2
- Focus gets lost in case of collision HOT 3
- Track Child not recognizing children
- RTL is not supported
- Loss of focus when a component is rendered HOT 2
- Error when Server Side Rendering HOT 1
- Focusable elements not recognised when layout is position absolute HOT 5
- How should I handle focus when opening/closing a pop-up? HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-spatial-navigation.