Show a11y errors in the form preview

[pinussilvestrus]

Is your feature request related to a problem? Please describe.

Users need a way to easily identify and fix accessibility errors in their forms as they become more complex.

The goal is to enable users to build accessible forms, and the use of the dev tools like axe provides a foundation for identifying accessibility errors. However, as forms grow in complexity with more components, it is helpful to have a visual representation of these errors in our own tooling.

By providing meaningful a11y errors on the form and a helpful guide to fix it, it becomes easier building accessible forms, leading to improved accessibility compliance and a better user experience for all users, including those with disabilities.

Describe the solution you'd like

Use axe to display accessibility errors directly to the users. This feature will help users identify missing labels, alternative text, and other accessibility issues in real-time, making it easier for them to address and fix these errors efficiently.

As an example, the axe dev tools show a lot of details around such detected errors, as of ways to resolve these.

Describe alternatives you've considered

Do not include this validation as part of the playground, but use https://github.com/camunda/form-linting instead.

We could consider showing such information via a tooltip next to the respective form field.

Additional context

/

[pinussilvestrus]

A spike was made via #76

This only shows how to use axe do generate such errors and provide a link for "more", e.g. how to fix the issue.

I could imagine keeping this out of form-playground completely and implement this as part of https://github.com/camunda/form-linting (e.g. with showing the errors on the canvas as well, as we do with BPMN linting)