Opened 11 years ago

Closed 11 years ago

#7024 closed defect (fixed)

ComboButton: a11y outlines bleed through in IE6

Reported by: dante Owned by:
Priority: high Milestone: 1.2
Component: Dijit - LnF Version: 1.1.1
Keywords: Cc:
Blocked By: Blocking:

Description (last modified by bill)

It seems only to affect IE6, and only in a toolbar: In the first Toolbar test, the Save dropdown has what looks like a11y borders, and is inconsistent with the focus indication of the other buttons.

It can also be seen in the mail.html demo with the 'get mail' combo/dropdown button.

The border can be seen in all three themes in IE6.

Also related:

IE7 displays with un-centered vertical alignment, and tabbing through causes a slight shift in text alignment. IE6 shows this too. To be clear, IE7 has consistent focus borders.

Attachments (1)

save.png (4.0 KB) - added by bill 11 years ago.

Download all attachments as: .zip

Change History (6)

comment:1 Changed 11 years ago by dante

Component: DijitDijit - LnF
Summary: [dijit] ComboButton a11y outlines bleed through in IE6ComboButton: a11y outlines bleed through in IE6

comment:2 Changed 11 years ago by bill

This is from [12906] (Toolbar.css):

.dj_ie .tundra .dijitToolbar .dijitComboButton .dijitButtonContentsFocused,
.dj_ie .tundra .dijitToolbar .dijitComboButton .dijitDownArrowButtonFocused,
.dj_ff2 .tundra.dijitToolbar .dijitComboButton .dijitButtonContentsFocused,
.dj_ff2 .tundra .dijitToolbar .dijitComboButton .dijitDownArrowButtonFocused {
	border: 1px black dotted !important;	
}

We display focus border for all nodes even when *not* in high-contrast mode, but for some reason this one is much more pronounced. (It appears like a 2px dashed border not a 1px dotted border), and also it's appearing all the time whereas the other focus border only appears when you use the arrow keys to navigate.

I can see why the code is there though, because otherwise no focus border shows up.

Not sure how to fix. I suspect it's a bug w/IE6 and tables (since ComboBox is implemented w/tables). Obviously getting rid of the table would probably do the trick but that's a big change and I forget the exact reason we are using <table> now (but basically it's because we couldn't get anything else working).

As for the alignment issues those are also serious and perhaps also due to the table; not sure how to fix though.

comment:3 Changed 11 years ago by bill

The alignment problems are covered under a separate ticket, [6650]. (But let's use this ticket for the overly pronounced border issue.)

Changed 11 years ago by bill

Attachment: save.png added

comment:4 Changed 11 years ago by bill

Description: modified (diff)

comment:5 Changed 11 years ago by bill

Resolution: fixed
Status: newclosed

(In [14188]) On IE6/FF2 ComboButton?, prevent text jump due to focus border, and make focus border less glaring (and more in line w/real focus outline on other buttons). Fixes #7024.

Note: See TracTickets for help on using tickets.