Libraries like this are what keep me using React. They’re (imo) table stakes for building any serious project. I really want to use Svelte and Solid more, but the choices for building complex widgets like dropdowns are either “forget about accessibility” or “sink a bunch of time into implementing it yourself”. And let’s face it — most self-implemented widgets are accessibility nightmares.
What I really wish is that there were something like this built on web components, so I could use it with any framework.
React Aria is particularly unique because of the date picker. There's extremely few components that let you do proper date picking, nevermind date range picking, in a relatively accessible way. Even input type=date in the browser is an accessibility trainwreck.
If you need strict accessibility and date picking, you're either making people enter dates in a masked input field or you're using react-aria. I'm sure there's a few other options out there, but you have to dig long and deep for them.
I hate to sound like I work for Tailwind again lol, but my current employer probably has one of the strictest set of accessibility standards when writing new code for them.
I found that the React samples on Tailwind UI, and their base component library, cover pretty much angle of accessibility.
I was working on a legacy angular upgrade to React upgrade for my employer and they were concerned I would downgrade their current compliance levels moving to Tailwinds components. I actually ended up drastically improving their compliance levels by following Tailwinds lead, and nothing was lost. For example, moving from font awesome to hero icons allowed for the ability to inject a screen reader only tag into the icon, allowing the screen reader to output an icons function.
> Libraries like this are what keep me using React. They’re (imo) table stakes for building any serious project. I really want to use Svelte and Solid more, but
And not just those but bigger alternatives like Vue. I've been looking for soemthing as good as Radix UI or React Aria Components or Atlas UI to use with Vue but it's just not there.
Much as I like Vue 3 the ecosystem is winning with React
You might be interested in the library ZagJS, which has components for React, Vue, and Solid. I came across them in my search for a component library for my team. The docs are pretty impressive. React Aria edged it out simply due to the kind of components it had available.
This actually looks fantastic! I had hoped when I said “this doesn’t exist for other frameworks” that Cunningham’s Law would come into effect :) It looks like it’s made by the same person who created Chakra UI, too!
I am the opposite. Developing these components is like the most trivial task when starting a new project. Then again, I am not a React guy and usually frown at these prebuilt libraries as they tend to be opinionated and unpleasant to change for the use case at hand.
I don't know. Maybe I just don't like "ecosystems"
They're definitely not trivial. Do you build them well? I don't mean this as an insult to your work; I just know that these components have a million little details and edge cases that makes them not trivial if you care about getting them right.
Let's take a modal, for example. The easy part is clicking a button and having something show up on top of everything else. But do you…
- make sure screen readers announce it correctly when it's opened?
- make sure it has the correct ARIA attributes?
- trap focus within the modal so that you can't tab to an element in the page behind it?
- allow it to be closed with escape?
- return focus to the correct element when it closes?
These aren't arbitrary requirements I'm making up. The W3C has detailed documentation [1] about how people should be able to interact with these components. It's not something I want to spend my time doing, and frankly when it comes to things like ARIA attributes and screen readers it's not something I'm confident I'll do well. That's why libraries like Radix and React Aria are so valuable. You get rich, accessible components basically for free.
Boss: "So, when will the MVP of the screen be ready?"
Dev: "Well, we need to hire a few more people and the build the date picker and select box, and then we can actually work on the stuff you asked. So about 2-3 months. Then we can start tackling the i18n and a11y bugs. EZPZ".
UI libs definitely have their drawbacks, but using headless component libraries like Radix or react-aria with your styling solution of choice gets rid of 90% of the problems they generally have.
It's better than dealing with vuetify and such. Writing this stuff is the easiest thing in a new project.
Am I out of touch? What do you do when you have tons of custom functionality and styles? I spent about an year in a huge react only shop and I swear these guys were spending most of their time debugging other people's crappy components. Most of them had your reaction when we talked
It’s a hundred times easier to build <shitty button the designers want with 6 states> from scratch than style an existing component from a component library. I would only use a component library for the things that are hard, like dialogs and multi select weird option lists etc.
Buttons, sure, you can mostly just style the built-in <button> tag. Libraries like this are useful for things that don't come included and are tricky to get right — custom selects, modals, dropdowns, toasts, etc.
What about accessibility? That's the biggest thing in my mind when I choose to use someone else's component library. Things like combo boxes, date pickers, popovers are non trivial in terms of placement and accessibility.
What I really wish is that there were something like this built on web components, so I could use it with any framework.