Placeholders and help text in the fieldmapper editor
| Affects | Status | Importance | Assigned to | Milestone | |
|---|---|---|---|---|---|
| Evergreen |
Confirmed
|
Medium
|
Unassigned | ||
| 3.11 |
Confirmed
|
Medium
|
Unassigned | ||
Bug Description
In the fm-editor component, form fields' labels come from the placeholder text in the IDL. The same text is also used as a placeholder in the text inputs, with “...” added to the end.
We should move away from using placeholders altogether for accessibility and usability reasons. They make fields look as though they’re already filled in, making it hard to scan the page for empty fields. Low-contrast placeholders are hard to read; high-contrast placeholders are indistinguishable from user-added input.
Fieldmapper inputs can also have help text for additional hints and instructions, but these are visible only in tooltips next to the labels. This is important information and it should not be hidden in a tooltip. We should move this to a persistently visible location near the input field.
| Stephanie Leary (stephanieleary) wrote | #1 |
| Changed in evergreen: | |
| assignee: | Stephanie Leary (stephanieleary) → nobody |
| tags: | added: pullrequest |
| Tiffany Little (tslittle) wrote | #2 |
| Changed in evergreen: | |
| status: | New → Confirmed |
| importance: | Undecided → Medium |
| milestone: | none → 3.11.1 |
| Galen Charlton (gmc) wrote | #3 |
| Stephanie Leary (stephanieleary) wrote | #4 |
| tags: | added: ux-form-hints ux-forms |
| Changed in evergreen: | |
| milestone: | 3.11.1 → 3.12-beta |
Here's a branch that removes the placeholders, places the help text below the input (though it falls first in the source order, for screen reader users' benefit), and cleans up the labeling and placement of the Translate button. Screenshot attached.
https:/