Big React Aria release! 🚀 🎨 7 Color Picker components now GA, with new Tailwind starter kit examples! ⏳ Pending Button state 🚪 New Disclosure component 🪗 DisclosureGroup (aka Accordion) 🌴 Tree beta 📱 Improved Android touch handling Check it out!

The button pending state is more complex than it looks! You might ask: why does a headless library need to know if I render a spinner inside it? For accessibility! React Aria ensures that the pending state change is announced for screen reader users. It also disables interactions during the pending state to prevent double actions, but focus is still allowed otherwise keyboard users would lose their place. So it really is a distinct state from regular disabled buttons.

A cool feature of the Disclosure component is that it uses the hidden=until-found attribute so you can still search the content while it is closed with ctrl+F (currently supported in Chrome). The disclosure will automatically open when content is found inside! 😲

What would've been the drawbacks of using <details> and <summary> for the accordion? customizability and browser support?

Yeah I advocated for using <details>/<summary> for years, that's why we didn't have an accordion/disclosure component for a long time. Now details even supports mutual exclusion. I still recommend it for simple cases (but even still people kept asking us for a component!). The thing that pushed us over the edge was styling. <summary> has some weird behavior, like you cannot place elements adjacent to the trigger (e.g. additional buttons) that are not inside the collapsed panel. We needed to be able to do that to meet some design requirements.

Team is on fire!

finally, the acclaimed accordion

Great work, I have been playing around with this library and love it. Always built my own UI and even tried to handle accessibility stuff like keyboard interactions but it's so hard to get right. When I realized something like this existed I was so excited. Being able to only worry about CSS is exactly what I wanted.

react-aria &gt;&gt;&gt; radix