microsoft / tabster

Web Application Keyboard Navigation Tools
https://tabster.io
MIT License
118 stars 36 forks source link

Revaming handling for uncontrolled areas. #304

Closed mshoho closed 10 months ago

mshoho commented 1 year ago

This adjusts how the uncontrolled areas are handled. We have the ability to set data-tabster={uncontrolled: {}} on an element and Tabster won't handle tabbing inside those areas. We were treating those areas as black boxes before. And we had workarounds for corner cases. Like ignoreUncontrolled prop for finding focusables and duplicate search (with this prop disabled and then enabled). This PR changes the approach to handling the uncontrolled areas. Instead of treating uncontrolled areas as black boxes with special handling in multiple places, we just have the flag in the element context and return that flag with find* functions and it is handled by findNextTabbable functions when relevant.

To make this approach fully workable, we also now have a concept of phantom dummy with fixed target. When Tab is pressed in an uncontrolled area, and there is something tabster-related inside that area (like a mover inside uncontrolled) which would like to move focus to something out of DOM order, we add a phantom dummy input to redirect focus to that area. If something that controls uncontrolled area decides to handle Tab, this dummy won't be focused, but if the default action kicks in, it will be focused and will move focus to a proper next element. And in any case the phantom dummy will disappear with the next tick.

And lastly, as the context has been adjusted, a few other props in the context have been renamed to be hopefully more understandable (and to not have is prefix which some props have and some don't, making it more consistent).