Adopting Zag for accessibility

[selenil]

Hello,

I was reading the source code of Turboprop and I believe we could adapt one of its concepts to bring fully-featured accessibility to the SaladUI components. The solution leverages Zag, a framework-agnostic library that implements state machines to handle accessibility concerns across UI components. Zag provides the core logic that can be connected to existing UI components to add necessary ARIA attributes.

The Turboprop creator was developing hooks for various components before the project was discontinued. These hooks bind the appropriate state machine to enable accessibility features when the component is mounted. After reviewing the code, I realized we could create a single, dynamic hook that determines the appropriate state machine for each component and binds it upon component mounting. This will enable us to bring accessibility to all components that Zag supports. The best part is that this requires minimal changes to existing component code - we only need to add a few data attributes since the hook handles the complex logic.

I've already made progress on rewriting Turboprop's implementation into this generic hook. I'd appreciate any feedback on this solution or ideas for improvement. If the approach seems viable, I'm happy to open a PR.

Here's a demo using the collapsible component.

accessible.collapsible.mp4

[bluzky]

Thanks @selenil, I'm not sure about hook. When I started SaladUI, I try to avoid custom JS as much as possible. How do you think these hook will help to improve Liveview component?

[selenil]

The hook will invoke a client-side library (Zag) to add accessibility attributes to components, enabling features like keyboard interaction and proper focus handling. Its role would be similar to RadixUI's role in ShadCN. While a single hook works for all components, an Elixir-based approach would be ideal. However, I haven't found any Elixir accessibility libraries other than Turboprop, and implementing accessibility manually for each component would be challenging.

@bluzky What are your thoughts on this approach?

[icrayix]

I +1 this.

Accessibility currently is my biggest concern about this library (and frankly the entire liveview component library ecosystem). Implementing accessibility correctly just is a very big effort and using a well-tested library like Zag that does the heavy lifitng is the best option here imo.

Also I don't think it's possible to avoid javascript in the long run anyway. Especially when it comes to implementing more complex components like comboboxes there won't be a any way around using js hooks.

[bluzky]

@selenil what is your proposal, single hook for all components is ideal but it seems impossible

[selenil]

@bluzky yes, a single hook for all components is my proposal. I'm working on it, and it’s almost done, but there are still some issues to address.

[bluzky]

@bluzky yes, a single hook for all components is my proposal. I'm working on it, and it’s almost done, but there are still some issues to address.

Wow awesome, can't wait to see your PR

[sirgallifrey]

I'm curious too! I was skeptical of adding more JS but this Zag library seems very good!