Opened 9 years ago

Closed 9 years ago

#11029 closed defect (fixed)

IE6: ComboButton arrows not centered

Reported by: Douglas Hays Owned by: Jonathan Bond-Caron
Priority: high Milestone: 1.5
Component: Dijit - LnF Version: 1.4.0
Keywords: a11y Cc: Becky Gibson
Blocked By: Blocking:

Description (last modified by bill)

Starting with [21926], ComboButton arrows in a11y mode are not centered, have a smaller font, and have less padding.

Before:

After:

Attachments (9)

preComboButton.jpg (2.0 KB) - added by Douglas Hays 9 years ago.
postComboButton.jpg (1.7 KB) - added by Douglas Hays 9 years ago.
ie6Combo.png (5.2 KB) - added by bill 9 years ago.
create button on IE6 (test_button.html?theme=claro)
button_a11y.patch (1.2 KB) - added by Jonathan Bond-Caron 9 years ago.
Well tested, more a11y related fixes with buttons
a11y_button.patch (5.4 KB) - added by Jonathan Bond-Caron 9 years ago.
Well tested, more a11y related fixes with buttons
a.gif (72.2 KB) - added by Jonathan Bond-Caron 9 years ago.
Looks ok
Picture 13.png (62.5 KB) - added by bill 9 years ago.
test_Button.html?theme=claro on IE6/high contrast mode
a.2.gif (8.5 KB) - added by Jonathan Bond-Caron 9 years ago.
Parch for claro select
claro_select.patch (2.7 KB) - added by Jonathan Bond-Caron 9 years ago.
Patch for claro select

Download all attachments as: .zip

Change History (19)

Changed 9 years ago by Douglas Hays

Attachment: preComboButton.jpg added

Changed 9 years ago by Douglas Hays

Attachment: postComboButton.jpg added

comment:1 Changed 9 years ago by Douglas Hays

1.4.2 ComboButton?:
After [21926],

comment:2 Changed 9 years ago by bill

Description: modified (diff)

Oh, I don't think I'd even classify that as a bug but I guess wider is nicer.

comment:3 Changed 9 years ago by bill

On IE6 in test_Button.html?theme=claro (in a11y mode) the arrow is also misaligned vertically:

create button on IE6 (test_button.html?theme=claro)

Changed 9 years ago by bill

Attachment: ie6Combo.png added

create button on IE6 (test_button.html?theme=claro)

comment:4 Changed 9 years ago by Jonathan Bond-Caron

Couple of notes:

  • In a11y, arrow size is now same as text for buttons + centered horizontally
  • In a11y, changed the arrow color to make disabled button 'more obvious'

I'm not sure if the 'arrow color' has any effect in a11y, so just remove .dijit_a11y .dijitDisabled .dijitArrowButtonChar {

color:#D5D5D5 !important;

}

Changed 9 years ago by Jonathan Bond-Caron

Attachment: button_a11y.patch added

Well tested, more a11y related fixes with buttons

Changed 9 years ago by Jonathan Bond-Caron

Attachment: a11y_button.patch added

Well tested, more a11y related fixes with buttons

comment:5 Changed 9 years ago by bill

Resolution: fixed
Status: newclosed

(In [21935]) Fix width on <input> in ComboBox on IE6 (previously it was too wide, overflowing into the arrow). Patch from jbondc (CLA on file), thanks!. Fixes #11029 !strict.

comment:6 Changed 9 years ago by bill

Resolution: fixed
Status: closedreopened

I checked in the second patch above, thanks for that. I'm confused why there are two patches with very similar names (button_a11y.patch and a11_button.patch), so I just checked in the second one.

Guess I shouldn't have closed this ticket as fixed since some of the arrows are still unaligned, but like I said in #10974 we probably don't want to bother with centering arrows for a11y mode if it bloats the markup, at least not just for IE6.

comment:7 in reply to:  6 Changed 9 years ago by Jonathan Bond-Caron

Replying to bill:

I checked in the second patch above, thanks for that. I'm confused why there are two patches with very similar names (button_a11y.patch and a11_button.patch), so I just checked in the second one.

The second one is good, I was trying to "replace the patch" but picked the wrong one.

Guess I shouldn't have closed this ticket as fixed since some of the arrows are still unaligned, but like I said in #10974 we probably don't want to bother with centering arrows for a11y mode if it bloats the markup, at least not just for IE6.

Which test? test_Button.html?theme=claro

I'll attach what I see, it looks fine

Changed 9 years ago by Jonathan Bond-Caron

Attachment: a.gif added

Looks ok

comment:8 Changed 9 years ago by bill

Summary: IE6: ComboButton arrow rendering messed upIE6: ComboButton arrows not centered

Perhaps you have some local changes on your system, try looking at http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_Button.html?theme=claro on IE6 in high-contrast mode. But like I said it's not a big deal.

Changed 9 years ago by bill

Attachment: Picture 13.png added

test_Button.html?theme=claro on IE6/high contrast mode

Changed 9 years ago by Jonathan Bond-Caron

Attachment: a.2.gif added

Parch for claro select

Changed 9 years ago by Jonathan Bond-Caron

Attachment: claro_select.patch added

Patch for claro select

comment:9 Changed 9 years ago by bill

(In [21998]) Rolling back changes from #10974 and #11029. This amounts to rolling back to [21926] (for the files changed in [21926]) and then adding back [21981] and [21983].

Concerning the goal of #10974, to make it easy to set padding on form input widgets:

  • That will be implemented in the textbox widgets (*TextBox, ComboBox/FilteringSelect, Spinner) in a different way, see #11034.
  • I think likewise for the <table> based widgets, Select and ComboButton, since centering arrows in a <table> should be easy, regardless of padding.
  • As for DropDownButton, not sure, but rolling back that change for now.

!TextBox_sizes.html can be restored to [21938] once #11034 is fixed.

Note that many of the changes in [21926] (and reversions in this check in) were due to changing the clas name dijitArrowButtonInner to dijitArrowButtonImg. For back-compat reasons I'd rather not have a unnecessary CSS name change.

Refs #10974, #11029. Fixes #11047.

comment:10 Changed 9 years ago by bill

Resolution: fixed
Status: reopenedclosed
Note: See TracTickets for help on using tickets.