adobe
Framework agnostic aria tools
🙋 Feature Request
React aria has a lot of code that ensures that it works correctly across different browsers. I think it will be very helpful to make this code available as a standalone library, so they could be used not only with react but with other frameworks or vanilla js as well.
For example, I was looking into the usePreventScroll hook source code. And it uses an internal function to prevent scroll in mobile safari (preventScrollMobileSafari). The preventScrollMobileSafari does not have any dependencies in react and can save a lot of time for developers, who does not work with react, but have the same issue.
We will likely work on cross-framework support in the somewhat near future. We've heard requests from the community to use our work outside just React, and there are some needs internal to Adobe as well. It's on my list to actually write an RFC, but I think at least at first, it will be some wrappers around the hooks to expose a framework or vanilla interface. I've done some POCs in this space using Vue, Svelte, and Web components. The APIs will likely look quite different, but that's proof that it can work. In the longer term we can consider whether the internals also diverge from React.
Short term, if it's that particular function you're interested in, I think we could probably export a preventScroll function that exposes it without calling anything in React. If you have a bundler that supports tree shaking, it should probably remove React from the bundle as well in that case.
Oh, thanks. I think I don't need apreventScroll function right now (I think you probably have more important things to do :)). I was more curious about the general approach of bringing this library to other frameworks.
In particular, I'm very interested in bringing it to solid, which is not very popular yet, so probably is under your radar. That is why I was thinking, that having a "vanilla" cross-browser "core", that can be ported to various frameworks by the community might be beneficial for small (niche) frameworks.
Thanks, again for your response.
Yep, that will likely be one of the first targets. We have a need to use this with web components, which aren't tied to any particular framework either.
@devongovett I'm super interested in react-aria port for vue3. Any news or plans on the framework agnostic version or vue3 specific? I don't see any plans in roadmap also
Based on Conclusion web components version of react-aria, it's impossible to be implemented at the moment But vue3 version seems doable, do you accept community help on this? There's one unprocessed PR
@KarKarbI4 it would be amazing if you would like to work on that! It's not on the core team roadmap because it's not something we need ourselves, and we aren't experts in Vue or Svelte. But if it's something you would be interested in working on, we'd be happy to support you where we can.
For Vue specifically, I think the first thing to figure out is what the API should be. In my prototype, I wrapped our existing hooks, which is great for reusing code, but I'm not sure as someone who doesn't really have much experience with Vue if the API is very natural for Vue users. Once we've figured out what a natural API would be, we can figure out how best to implement it.
Reusing our existing hooks with wrappers may or may not be the best way forward. It would certainly make maintenance and new features easier to add to all frameworks at once, but if creating a natural API or integration with other frameworks is too hard, then perhaps another approach would be needed. I suspect a number of changes would be needed within React Aria itself to make things work (e.g. differences with React's event system). I had a number of patches in my prototype, that we would need to figure out how to make work for real.
The best way to start would probably be in a separate repo, either by forking my prototype or starting something from scratch. That will let you iterate independently the quickest. Keep us updated on your plans and progress, and let us know how we can help!
This would be really great. It sucks being a Vue developer (I use React too and more often, but forced into using Vue for certain projects) and not having as many good accessible options.
Well... there is https://www.radix-vue.com/ and https://headlessui.com/ but React Aria seems to be the most comprehensive set of components, e.g. these other two don't have date pickers.
Edit: I've tried using Radix but run into a handleful of edge case bugs, like not rendering inputs when not a child of a form element, sliders with multiple thumbs missing in FormData, etc. I'm trying out Zag and it seems to be good so far, but the docs are not quite up to date and have little errors (haven't encountered any actual functionality bugs yet though).
100% agree. I’ve tried using Vue Composition API wrapper which @devongovett created as PoC with latest changes and while it works (with some patches applied, e.g. event system differences), it feels like possible performance pitfall and weird cases in the long run.
React Aria truly is a great contribution to accessible UI space, and IMO one of the best approaches to "headless UI", and latest Components release just simplifies low-level hooks approach.
I think the best approach right now would be to just try to mimic as much as you can using Vue Composition API using React Aria as a reference. All the other implementations seem to lack either configurability or deep WCAG guideline suggestions.
I really hope that in the future Adobe will consider framework-agnostic implementation but I guess this is too much to ask since this really was a great multi year team effort.
I am one of these vue.js developers who envy react such great options for accessibility as react-aria is :-).
I see that the team is working also on advancing testability, which is awesome.
I was wondering, whether potential path forward (to advance web accessibility) could be to create framework agnostic test suite. Because each of these frameworks has its own specifics and trying to share "core" between them I think would be very complex process to handle all the nuanced differences.
But maybe if there is way to create test suite that would allow to render components via different frameworks and assert precisely enough the outcomes - I have feeling that community would be pretty quick to write react-aria like libraries for vue.js/svelte/solid and it would ensure similar level of quality what react-aria has and also feature parity. I think that in many cases the heavy lifting is really the research and testing of the accessibility, than actual implementation.
@devongovett I would be curious to hear from you, if you see some potential there or you think its impractical to achieve that.
It would be interesting to see adaptation for vue or web components instead of react
I'm going to close this issue. Unfortunately, our team does not have time to implement, test, and maintain multiple implementations that we aren't using internally to Adobe.
Integrating deeply with a framework like React has also has some benefits. For example, you can optimize the developer experience for that framework rather than a lowest common denominator, and integrating with the framework lifecycles and scheduling ensure it works predictably. We may implement more framework agnostic libraries in the future where it makes sense (like we've done with our internationalization libraries), but it's unlikely that we would make the entire suite framework agnostic. I think porting to other frameworks is a reasonable solution for the most part.
However, over the years, several external libraries have ported parts of and/or been inspired by React Aria. Some of them also use some of our agnostic libraries like @internationalized/date. I'd recommend taking a look at these if you are looking for toolkits outside of React.