Opened 12 years ago

Closed 12 years ago

#3867 closed defect (fixed)

drop down button arrow icon does not display properly in high contrast mode on IE7

Reported by: Becky Gibson Owned by: Becky Gibson
Priority: high Milestone: 0.9
Component: Accessibility Version: 0.9
Keywords: Cc: dante, ptbrunet
Blocked By: Blocking:

Description

In IE 7 the text moves vertically down in the button and the arrow is clipped in high contrast mode. Works ok in Firefox 2. In IE 6 arrow is partially clipped.

Change History (7)

comment:1 Changed 12 years ago by Becky Gibson

Will probably be the same fix as #3868 but I filed separately just in case to make sure all situations get covered.

comment:2 Changed 12 years ago by Sam Foster

Try this on fer size:

.dijitToolbar .dijitDropDownButton .dijitA11yDownArrow{

/* _dont_ make the arrow smaller in toolbar*/ padding:0; margin:0; line-height: 1.2em;

}

The line-height is being set elsewhere to 0.5em, which is why the arrow was getting cropped. Setting it anywhere from 1em to 1.3em seems about right - across ie7, 6. If we actually want it smaller, we should set font-size. Line-height will always be relative to font-size, so that value neednt change in that case.

The text being pushed down - that's a seperate issue. Inside the button element is a div e.g. <div class="dijitInline dijitEditorIconCopy"/> This gets its style from tundra.css, where they are all assigned width and height of 16px. We should have a dijitToolbarButtonIcon class in that element and defined in dijit.css, - which we might choose to set display:none in a11y mode (as these are background-image-only elements, and already provided for with text labels?)

comment:3 Changed 12 years ago by bill

Cc: phiggins added

In dijit.css there's code:

.dijitA11yDownArrow,
.dijitA11yUpArrow,
.dijitA11ySideArrow {
	...
	line-height: 0.5em;
	font-size: x-small;
	padding:0em .25em;
}

Why is that there? It seems brittle and unnecessary. Maybe it's because #3661 isn't finished yet. When that bug is finished try taking out all the sizing related CSS for arrows and other icon-esque characters.

comment:4 Changed 12 years ago by bill

Cc: dante added; phiggins removed

comment:5 Changed 12 years ago by bill

PS: rules about a11y should be in dijit.css if possible.

comment:6 Changed 12 years ago by ptbrunet

Cc: ptbrunet added

comment:7 Changed 12 years ago by bill

Resolution: fixed
Status: newclosed

(In [10102]) Fixes #3867: drop down button arrow icon does not display properly in high contrast mode on IE7. Since we are using icons for non-high-contrast mode there's no reason to put formatting on the arrow characters for high-contrast mode. Patch from Pete Brunet (IBM, CCLA on file)

Note: See TracTickets for help on using tickets.