Opened 11 years ago

Closed 10 years ago

Last modified 9 years ago

#6451 closed task (fixed)

InlineEditBox: use keyline to indicate editability

Reported by: bill Owned by: bill
Priority: high Milestone: 1.5
Component: Dijit - LnF Version: 1.1.0
Keywords: ibm a11y Cc:
Blocked By: Blocking:

Description

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)

Change History (12)

comment:1 Changed 11 years ago by 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.

comment:2 Changed 11 years ago by David Schwartz

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

comment:3 Changed 11 years ago by bill

Milestone: 1.31.4

comment:4 Changed 10 years ago by 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.

comment:5 Changed 10 years ago by bill

Milestone: 1.41.5

comment:6 Changed 10 years ago by 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.

comment:7 Changed 10 years ago by bill

Keywords: a11y added

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

comment:8 Changed 10 years ago by 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.

comment:9 Changed 10 years ago by bill

Resolution: fixed
Status: newclosed

(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.

comment:10 Changed 10 years ago by 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.

comment:11 Changed 9 years ago by bill

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

comment:12 Changed 9 years ago by bill

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

Note: See TracTickets for help on using tickets.