Opened 14 years ago

Closed 13 years ago

Last modified 12 years ago

#4529 closed bug (fixed)

dialog buttons are accessed in wrong order using tab

Reported by: mijobe Owned by:
Priority: major Milestone: 1.8.3
Component: ui.dialog Version: 1.7.1
Keywords: dialog button order Cc:
Blocked by: Blocking:


dialog buttons are are accessible via tab from right to left, this is confusng because its against the normal european read direction from left to right example:

Change History (11)

comment:1 Changed 14 years ago by Jörn Zaefferer

Milestone: TBD1.8

comment:2 Changed 14 years ago by ZeekDaGeek

This is related to the theme you are using, each button has the CSS property "float:right".

Suggestion: Check for this float property and process the button JSON Array forwards or backwards based on that property.

This is an aesthetics thing more then a major problem, and would only really come up if the site has 2 themes, one that floats right, and one that doesn't or if someone forces another UI theme. It would cause unnatural or unfamiliar button order.

My current solution is to just write the button JSON Array backwards.

comment:3 Changed 14 years ago by mvermilion

Got a request (aka bug report) from my customers on this issue. I am declaring the following styles in my override stylesheet for jQuery UI. If you do this, you will need to declare the buttons in the natural order, to take advantage of the natural tab order. The consequence of this is the difference in positioning control between a block-level and an inline element. I think it's worth it to have the correct tab order, especially when my customers are complaining.

.ui-dialog .ui-dialog-buttonpane{text-align:right;} .ui-dialog .ui-dialog-buttonpane button{float:none;}

comment:4 Changed 13 years ago by Scott González

Resolution: fixed
Status: newclosed

Fixed in 61e0aea.

comment:5 Changed 13 years ago by Scott González


comment:6 Changed 12 years ago by snoofer

It real cool that this bug is finally fixed. However, it was open for more than 15 months! So out there a lot of projects which just lived with this bug and wrote the "wrong" order. After you fixed this issue these projects are broken and need to be adjusted. Otherwise there are not able to upgrade to a new version. This is very bad! Since it cost time and money at no reason. Could you please consider to add an global backward compatibility switch which will restore the old behavior? It would be a timesaver to many developer.

comment:7 Changed 12 years ago by Scott González

We won't add an extra flag/option to bring back to the old behavior. You can probably do that on your own if you want. Going forward we won't make backward incompatible changes in minor releases.

comment:8 in reply to:  7 Changed 12 years ago by snoofer

Don't take me wrong but you exactly did this! You did an incompatible change in a minor release. Before Version 1.8.3 the behavior was different.
Ok .... it was a bug which need to be fixed. However it took 15 months! So you can not expect that no one out there is not using it in the "wrong" way. The workaround of the bug was simple: Just use an other order. Nothing a developer really cares about.
So if I like to update to a newer version of jquery.ui I need to change hundreds of lines to bring back the "old" order (in several large projects). Of course with the option to break something in my code. Or I need to maintain my on version. Both are not really good options.
So please think about it again. Thanks.

comment:9 Changed 12 years ago by Scott González

You can just modify your CSS. This will reverse the order of the buttons, going back to the old order:

.ui-dialog .ui-dialog-buttonpane button { float: right; }

comment:10 Changed 12 years ago by snoofer

Oh Yeah! You are so right! Thanks a lot for the hint. I totally forgot about the css option.

comment:11 Changed 12 years ago by Scott González

Dialog: Wrap buttons in a div so we can float the div instead of the individual buttons. Fixes #4529 - dialog buttons are accessed in wrong order using tab.

Changeset: 61e0aeac7e626df711e7066f27b652602387b784

Note: See TracTickets for help on using tickets.