Opened 6 years ago

Closed 6 years ago

Last modified 6 years ago

#16231 closed defect (fixed)

TreeNode loses focus outline on IE9

Reported by: dacagl Owned by: bill
Priority: undecided Milestone: 1.9
Component: Dijit Version: 1.8.0
Keywords: Cc:
Blocked By: Blocking:

Description

Using the keyboard to navigate TreeNodes? of a Dijit Tree widget, the focus (dotted box around the label) disappears in some cases on IE9. I can reproduce the problem on the Dijit Tree test website (http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/tree/test_Tree.html). I'm currently pointing at a local 1.8.0 version of Dojo for my playpen version and see the problem there as well.

Steps to reproduce:

  1. Navigate to http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/tree/test_Tree.html
  2. Tab to 'Contents' root node in first Tree example
  3. Label is outlined with a dotted box to signify focus
  4. Use Right arrow key to expand contents
  5. Use Down arrow key to move to first child node
  6. Focus outline disappears but if you hit Right arrow, Africa node expands and sometimes the Focus indicator shows back up

I mostly notice the problem of the disappearing focus indicator when use the Down and Up arrows to navigate through the children. If I move to another browser window, the focus indicator usually reappears.

Change History (5)

comment:1 Changed 6 years ago by bill

Milestone: tbd1.9

OK, I see it happening, thanks for the report.

I think IE tries to not show the focus outline except when it's helpful, which (for plain-old HTML pages) means when the user starts tabbing around, or sending keystrokes into the focused node. That hypothesis matches the behavior you described above.

As for a fix, I guess it means we need to do a synthetic focus outline for Tree. There are a few of those already in dijit.css, for example:

.dj_ff3 .dj_a11y div.dijitSplitter:focus {
	outline-style:dotted;
	outline-width: 2px;
}

(although that should be removed since we no longer support FF3)

comment:2 Changed 6 years ago by bill

Resolution: fixed
Status: newclosed

In [29877]:

Workaround IE9 behavior where down arrowing through TreeNodes doesn't show focus outline. Also removing some rules for FF3. Fixes #16231.

comment:3 Changed 6 years ago by dacagl

Thank you Bill! I just tried out the CSS workaround for my playpen and it works like a charm! Thank you for your fast response!

comment:4 Changed 6 years ago by haysmark

I tried this in 1.6 and 1.7 and could not reproduce the missing focus border.

comment:5 Changed 6 years ago by bill

Still happens in 1.8 though.

Note: See TracTickets for help on using tickets.