ValidationTextBox: change icon placement

[bill]

As per numerous chats with nonken :-) and the dojo meeting that just ended... want to redesign how validation icon shows up for ValidationTextBox.

Currently it looks like:

Want to change it so the icon is outside of the box, like:

These are the detailed goals:

• Icon shouldn't be inside <input> box since it's confusing that you can't type into that area

• style="width: 100px" needs to control the width of the input box, not including the icon, so that it's easy to make TextBox and ValidationTextBox appear aligned

• page shouldn't jump (reflow) when an icon appears

• way to control where the validation icon appears, so we can have fields like

   Amount:  <input>USD *icon* 
  

Probably

<input dojoType=... iconPath="#myIconNode">USD <span id="myIconNode></span>

If iconPath not specified then it appears immediately after the <input>.

• optional green check mark icon to indicate valid input

Some other possibilities:

• red squiggly underline to show invalid input (in a a11y way).

• showIcon parameter. Default value is true. Developers switch it to false at their own risk (doing so will break a11y, unless we have the squiggly underline). In the old days some people disliked having the icon to the right of the <input> because it created a blank space (reserved for displaying the icon when there was an error).

BTW, the reason we have an icon at all is for color-blind people that can't see the yellow background for invalid fields.

[bill]

new look

[bill]

current behavior

[bill]

Nathan suggested "validationNode" instead of "iconPath", and to have it specify an id (validationNode="abc"), as it matches other interfaces like <label for="..."> or Tooltip.connectId

[drschwartz]

It could be argued that the icon should actually be along the leading edge (on the left for left-to-right text). Generally, forms are constructed along an invisble grid where elements are aligned along the leading edge. Having the icon on the leading edge allows the user to quickly and reliably scan for offending fields (for non-dynamic, server-side validation, i.e., when validating on 'Submit').

There shouldn't be a need to reserve the space for the icon, right? The field can just flow to toward the trailing edge when the icon is displayed.

[bill]

The problem with not-reserving space for the icon is that:

• the contents of the screen can jump if a field becomes invalid (other fields may be forced down a row, etc)
• if the fields are in a table then one field getting wider will widen the entire column
• etc.

Surely there are advantages/disadvantages to each approach, but that was the thinking in the meeting.

Note though that the reason we originally put the icon inside of the input box was because developers complained about having a blank area to the right of the widget. So I guess whichever design we pick some one will be unhappy.

[becky]

reference to #7577 - please make sure that the text alternative in high contrast mode is visible and of reasonable size.