Define form input Help elements

[joseegm]

Goal: Identify and define all Help elements that can be used for the form inputs.

Current help elements v1.5.x

• Hint: Help text displayed bellow the input field.
  
• Help Tooltip: help Icon displayed above the input line. The icon trigger a tool tip with the help text.
  
• Help tooltip for Read Only inputs: displayed along static form fields
  

[denisewildner]

Current rule: If help mode is switched off via help icon in Builder upper navigation bar, help icon is visible on right side above input field. On hover tooltip with help text shows.
If help mode is switched on, icon and helptext is always visible underneath input field.
Also see: https://techne.yaas.io/components/Help-and-Validation.html

[LeoT7508]

@joseegm

[joseegm]

Cropped the image to keep it in context with the goal of this issue

@LeoT7508

1. We had some request in the past to make the tooltips "lighter", a lighter color will do the trick probably. Right now they look very "heavy". Can we give it a try?

Side note
The "read only" field have as per UX description on https://github.com/SAP/techne/wiki/Form-Inputs#types-and-variants-733, and discussion on #735 (comment) and decided on #735 (comment) have a border now.

That is better to maintain layout structure.

That means, we can use the same positioning as with the normal input fields. No action needed regarding this side note.

[joseegm]

Result of this issues is only to define the elements, info now available at https://github.com/SAP/techne/wiki/Form-Inputs#help-elements-738

The visuals for in another issue #757

[LeoT7508]

@joseegm

If we make a significant color change, enough to notice, we fail the accessibility contrast requirements. So I think it would be wise to stick with these colors.

[joseegm]

@LeoT7508
I have moved all this comments to the Issues regarding these visuals for the help elements #757. This issue is only to define those elements.

The current color combination fails the WCAG 2.0 AAA guidelines.

That can be tested at http://accessible-colors.com/

We can definitely try a lighter color.

[joseegm]

The goals of this issue has been met, visuals continue at #757.
Closing the conversation to keep things in context