Ticket #4529 (closed bug: fixed)

Opened 5 years ago

Last modified 3 years ago

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:
Blocking: Blocked by:

Description

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:  http://jqueryui.com/demos/dialog/#modal-form

Change History

comment:1 Changed 5 years ago by joern.zaefferer

  • Milestone changed from TBD to 1.8

comment:2 Changed 5 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 5 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 4 years ago by scott.gonzalez

  • Status changed from new to closed
  • Resolution set to fixed

Fixed in  61e0aea.

comment:5 Changed 4 years ago by scott.gonzalez

  • Milestone changed from 1.9 to 1.8.3

comment:6 Changed 3 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 follow-up: ↓ 8 Changed 3 years ago by scott.gonzalez

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 3 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 3 years ago by scott.gonzalez

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 3 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 3 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.