Placeholders and help text in the fieldmapper editor

[Stephanie Leary]

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)]

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://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/lp2021862-fieldmapper-placeholders-hints

[Tiffany Little (tslittle)]

Adding a link to bug 1906862 because I think this would fix that one too.

[Galen Charlton (gmc)]

Noting for anybody testing this that an interface demonstrating moving field-level help text away from a popover is the EDI account form available from the provider record (note: not from Acquisitions Administration | EDI Accounts). I.e., /eg2/en-US/staff/acq/provider/$ID/edi_accounts

[Stephanie Leary (stephanieleary)]

Thanks, Galen, that's really helpful. Looking at that screen, I think we should adjust the size and color of the help text -- while Bootstrap actually passes contrast requirements for once, I think it's awfully small and light.

As you test, I would suggest changing the .form-text font-size to 1em and the color to #555 in your inspector. Let me know if you'd like me to update the branch.

[Blake GH (bmagic)]

merge conflict against main today: Open-ILS/src/eg2/src/app/share/fm-editor/fm-editor.component.html
please rebase.

[Stephanie Leary (stephanieleary)]

Rebased!

[Terran McCanna (tmccanna)]

Getting merge conflicts again today :/

[Stephanie Leary (stephanieleary)]

Rebased! Thanks, Terran.

[Terran McCanna (tmccanna)]

Nobody was fast enough to get this reviewed and merged, Stephanie - now it needs a rebase again!

[Stephanie Leary (stephanieleary)]

No problem, Terran. There's an org unit selector in there, so it had changed. Rebased and updated on the same branch.

[Galen Charlton (gmc)]

I've pushed a rebased signoff branch to working/user/gmcharlt/lp2021862_signoff.

The branch includes a follow-up implementing the style changes suggested by Stephanie in comment #4 (and the color changes also fixes a contrast issue on the zebra-striped rows. It also includes a change from me to italicize the help text.

[Jane Sandberg (sandbergja)]

Thanks, Stephanie and Galen. I've pushed this to rel_3_12 and above before we get any more merge conflicts! Big improvement!