Opened 11 years ago

Closed 11 years ago

Last modified 11 years ago

#10907 closed enhancement (fixed)

standardize focus indicators

Reported by: bill Owned by: bill
Priority: high Milestone: 1.5
Component: Dijit Version: 1.4.0
Keywords: Cc:
Blocked By: Blocking:


AccordionContainer and TitlePane currently use an underline to indicate focus (see #7775); they should be standardized to use the browser default focus border, but slightly inset from the edge so that it's visible.

Also, the left part of ComboButton was fixed in #8195 but the right part of ComboButton still needs the focus border to be inset.

Change History (6)

comment:1 Changed 11 years ago by bill

Resolution: fixed
Status: newclosed

(In [21642]) Add focus div to AccordionContainer title bar and TitlePane templates so that we can use the browser's native focus indication, rather than an underline. Since the new div is inset from the outer border, there's no issue with the edges of the outline getting cut off.

For Accordion, I changed the click handler from ondijitclick to plain onclick, since pressing SPACE/ENTER while focused on an Accordion pane isn't supposed to do anything, since the pane is already open.

Fixes #10907 !strict.

comment:2 Changed 11 years ago by bill

(In [21649]) These rules seem unnecessary, native browser focus indication works fine, even in windows high contrast mode IE6. (Removing the rules saves spaces and makes focus in webkit look native, either the blue or orange fuzzy border, for mac/win respectively.) Refs #10907.

comment:3 Changed 11 years ago by bill

(In [21671]) Moving Select focus to <table>, rather than first <td>, so that outline looks correct on webkit, with the blue/orange fuzzy border around the whole Select, just like native selects. Refs #10907 !strict.

comment:4 Changed 11 years ago by bill

(In [21829]) Make focus indicator appear inside of TabButton. Themes might want to tweak padding settings to get it closer to edge but anyway at least now it's fully visible. Refs #10907.

comment:5 Changed 11 years ago by bill

(In [21830]) Probably need waiRole=presentation on new <div> too (in addition to all the other <div>'s), although I'm not sure what other role a <div> could have. Refs #10907.

comment:6 Changed 11 years ago by bill

(In [22847]) Now that focus indicator appears inside of TabButton, we don't need special CSS for high contrast mode. Refs #10907 ([21829]).

Note: See TracTickets for help on using tickets.