Accessible LiveView component libraries?

Someone mentioned petal.build in another thread, but it seems accessibility is not their focus.

It would be great if we have a community backed libraries that take care of accessibility concerns for us. Otherwise, we keep reinventing the wheels when we write html and have to take care of ARIA attributes when using Liveview components.

In the React.js land, there are Charkra UI, Reach UI libraries that take care of a lot of accessibility issues for us.

There is no such a thing in Phoenix yet, is that right?

5 Likes

not anywhere close to a full library, but LV 0.18 will contain a couple accessible features, such as <.focus_wrap> which allows you to focus wrap any container, and JS commands for focus state, such as JS.push_focus|pop_focus|focus_first. I’ll talk more about these at ElixirConf, but I hope to ship a few more building blocks like this for UI libs. Our code generators will also make use of these for more accessible features out of the box.

20 Likes

@leeburk95 just thought I’d resurface this discussion as the latest version of Petal Components now supports a11y (accessibility).

We’ve implemented a test to load a LiveView using all Petal Components and perform an accessibility audit with :a11y_audit.

:a11y_audit uses axe-core under the hood - https://www.deque.com/axe