Aiven-Open / Aiven-Open/klaw

feat(coral): Better instructions for forms

未关闭
#480 7 条评论 0 个 reaction 已指派 1 人 已被 @programmiri 认领 在 GitHub 查看
enhancement Frontend
主要语言
Java
星标
195
派生
77
平均合并
8 天 9 小时
30 天内合并 PR
1

描述

# What is currently missing?

The ACL request form is quite complex (as are other forms in Klaw), and is lacking in clear instructions as to what the desired value for each field is.

Initial comment by @programmiri here: https://github.com/aiven/klaw/pull/477#pullrequestreview-1269574381

> Best practice for forms in regard to accessibility is to give users enough instructions visible right away to help them understand how they can complete a form and the individual form elements form controls.
>
> There are also related WCAG techniques (related to Level A)
> - [Providing text instructions at the beginning of a form or set of fields that describes the necessary input](https://www.w3.org/WAI/WCAG21/Techniques/general/G184.html)
> - [Providing expected data format and example](https://www.w3.org/WAI/WCAG21/Techniques/general/G89)
>
> We talked about using placeholders for this, but this does not work for all elements and may not show the whole text of an instruction. Also, they disappear when the user enters the field (so, right when they need it ^^).
>
> We could add it in a tooltip if it's absolutely not ok with the design to have it on the page (thanks to your workaround that's pretty accessible 🎉) but that does not really match the requirements IMHO, because the information the user may need to fill out the form correctly is hidden and they have to actively discover it. Also, the placeholder goes away too when the user wants to fill out the field.

# How could this be improved?

As visible in @programmiri comment, there are essentially two ways:
- the arguably more correct way, with inline instructions for each fields
- the way which might be a compromise, with tooltip icons next to the label of each field requiring further explanations

But each of the two has a hurdle:
- inline instructions: this needs input from design, as there are many ways to provide these and organise them visually
- tooltip: the Aquarium design system, which we use as a component library, currently has issue with tooltips, dialogs and other overlay element when used in `StrictMode` with react > v18. Which is exactly what we run. I would argue that, as `StrictMode` runs only in dev mode, we can assume that these elements will run correctly for the final user. And we can disable `StrictMode` when developing features that rely on the problematic UI elements.

# Is this a feature you would work on yourself?

* [ ] I plan to open a pull request for this feature

贡献指南

打开贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。