InlineEditBox: use keyline to indicate editability

[bill]

Users might not notice the background color change to indicate that some text can be edited, so use a ​keyline instead.

I guess we do the same thing for ColorPalette?.

Taken from ​IBM Design Leadership recommendations.

Note: not sure how to implement this without causing page to move on mouse-over, given that outline doesn't work on IE (not sure which browsers it does work on)

[David Schwartz]

The original issue was that the mouse pointer wasn't changing to the text cursor. The keyline would be useful to be sure but doesn't address the original issue.

[David Schwartz]

FYI, I can't now seem to re-create the problem.

[bill]

I see on ​test_InlineEditBox.html that it just changes the background-color to gray, doesn't add a border.

IIRC though the complication is with the text jumping a little bit when the border shows up. Need to figure out a way for that not to happen, by trading off padding for border. And then that requires having padding in the first place.

[bill]

(In [21060]) Remove vestigal CSS rules for dijitInlineEditor and dijitInlineValue. Those CSS class names weren't being applied to the DOM ever, at least since Dojo 1.2. Refs #6451.

[bill]

Come to think of it this is also an a11y requirement.

[bill]

(In [21061]) dijitClickableRegion and dijitDisabledClickableRegion were only being used for InlineEditBox?, and only when it was being hovered, so changing the names to make that clear.

New classes are:

• dijitInlineEditBoxDisplayMode - for a InlineEditBox? in view mode, before clicking it to edit
• dijitInlineEditBoxDisplayMode-disabled - added in addition to dijitInlineEditBoxDisplayMode, when the InlineEditBox? is disabled and can't be edited

• dijitInlineEditBoxDisplayMode-hover - when the user hovers over or focuses an enabled (non-disabled) InlineEditBox?

The new dijitInlineEditBoxDisplayMode (which is present even when not hovering) is needed for the keyline.

Refs #6451.

[bill]

(In [21062]) Add border around InlineEditBox? in display mode when it's hovered over, except on IE6 due to screen jumping problems. I just made the default border black; individual themes can override it. Code from Wen Dong (IBM, CCLA).

Fixes #6451, refs #10527.

[bill]

(In [21083]) Use keyline (border) on InlineEditBox hover for IE6 too, for accessibility reasons, despite the minor screen jump. Refs #6451, #10527.

Could use border:white (or whatever the page background color is) in non-hover mode, to prevent the screen jump, but decided to keep it simple as it's just an IE6 issue.

[bill]

(In [21814]) border: transparent doesn't work in high contrast mode, refs #6451.

[bill]

(In [21815]) oops, didn't mean to remove border on hover though. refs #6451.