search

bpmn-io / form-js

View and visually edit JSON-based forms.
https://bpmn.io/toolkit/form-js/
Other
414 stars 107 forks source link

Have more descriptive / userful text overlays for form elements in the element library #352

Open Skaiir opened 2 years ago

Skaiir commented 2 years ago

Is your feature request related to a problem? Please describe

Currently, the hover text on form element library components is quite redundant, stating only "create {x} element".

image

Describe the solution you'd like

Perhaps this is somewhere where we can provide a little bit of context to the element we're dragging into the form. This would be a pretty simple change that might allow us to document in-app without having to compromise our UI too much.

We could repurpose the descriptions provided in the form-element-library documentation (like here):

https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-textfield/

Ideally, this would be provided by the component implementation itself to allow for custom components to do it too in the future.

Describe alternatives you've considered

We could write custom descriptions here, or something less developer oriented. Or we could remove those entirely.

@nikku @pinussilvestrus @christian-konrad

Opinions? This looks like a low cost small payout kind of issue, but I thought I'd at least bring it to light.

pinussilvestrus commented 2 years ago

Or we could remove those entirely.

We shouldn't do that, as the title attribute is essential in terms of a11y.

nikku commented 2 years ago

If you ask me personally "title" attributes are, as @pinussilvestrus indicated an important accessibility feature. We should not remove them.

Shall we indicate whether you can create via "CLICK or DRAG" in the description? It depends. Right now what looks like a button (also cursor=pointer) is actually not a button (with visible click behavior). You must drag out, you cannot click to start that operation:

capture idnXFZ_optimized

If you double-check that behavior with bpmn-js both modes work over there, intentionally.

To start with, HTML elements should be semantic (actual buttons) or have relevant aria-roles assigned. And most common user interaction (click?) should yield a reasonable result.

That is how I see the good tool UX beyond the descriptions :slightly_smiling_face:.