[beta] webui: approve/disregard buttons have wrong order

(Tabbing out of the also leads straight to the Disapprove button, breaking the prior workflow that I could accept-with-comment by typing my comment text, <TAB>, <ENTER>.)</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/coolo"><img src="https://avatars.githubusercontent.com/u/1067203?v=4" />coolo</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>(Tabbing out of the <textarea> also leads straight to the Disapprove button, breaking the prior workflow that I could accept-with-comment by typing my comment text, , .)</p> </blockquote> <p><a href="https://xkcd.com/1172/">https://xkcd.com/1172/</a> :full_moon_with_face: </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jengelh"><img src="https://avatars.githubusercontent.com/u/8861948?v=4" />jengelh</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p><a href="https://xkcd.com/1172/">https://xkcd.com/1172/</a> full_moon_with_face</p> </blockquote> <p>As silly as the GNOME HIG presenting command buttons in reverse order may seem to some, at least they got tabbing right in the reference implementation (GTK). ;-)</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/bgeuken"><img src="https://avatars.githubusercontent.com/u/968949?v=4" />bgeuken</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>Thanks much for reporting these issues. Much appreciated.</p> <p>The location of the buttons is intended. Most (or many) of the primary buttons in the old UI were already on the right and in buttons we now want the streamline that. But you are right, we should handle the tabbing work better.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/bgeuken"><img src="https://avatars.githubusercontent.com/u/968949?v=4" />bgeuken</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>But you are right, we should handle the tabbing work better.</p> </blockquote> <p>After trying this out in the UI I am not that sure anymore. Having the tabbing go from right to left when it comes to buttons is probably unexpected for most users as well. It was at least for me.</p> <p>So I would say we should leave it as is. What do you think?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/coolo"><img src="https://avatars.githubusercontent.com/u/1067203?v=4" />coolo</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>I find the left alignment of these buttons rather strange. I can't think of any other UI that has buttons at the left side. Together with the button order, it puts the default action in the middle of the screen.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jengelh"><img src="https://avatars.githubusercontent.com/u/8861948?v=4" />jengelh</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>I find the left alignment of the button the right thing. The mouse pointer is likely to be on the left half of the screen already, e.g. when</p> <ol> <li>clicking the URL bar to put focus there</li> <li>clicking the <code><body></code> or some <code><code></code> element to put focus there (setting it as the "active" HTML element makes keyboard navigation within the element available)</li> <li>clicking the comment box to enter something</li> </ol> <p>Unless one is a national of a RTL-language country, the muscle memory will favor the left side, let alone the eyes. This is why verticla ad banners on websites elsewhere are commonly found on the right-hand side.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/coolo"><img src="https://avatars.githubusercontent.com/u/1067203?v=4" />coolo</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>I would plainly trust years of research on this matter - and even if everyone else is wrong, just do it for consistency reasons. Do you see this very form here in github?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jengelh"><img src="https://avatars.githubusercontent.com/u/8861948?v=4" />jengelh</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>Since when is github a measure? <a href="https://features.opensuse.org/306282">https://features.opensuse.org/306282</a> - left side <a href="https://sourceforge.net/p/gsoap2/patches/174/">https://sourceforge.net/p/gsoap2/patches/174/</a> - left side <a href="http://freshcode.club/submit/beebeep">http://freshcode.club/submit/beebeep</a> - left side <a href="https://bugzilla.opensuse.org/show_bug.cgi?id=1127790">https://bugzilla.opensuse.org/show_bug.cgi?id=1127790</a> , twitter, facebook - messy mix of left and right. Technically speaking, there are elements on the LHS (text or icons or both) that kind of force the buttons to the right unwillingly. (phpBB 3.2 demo page) - center</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/coolo"><img src="https://avatars.githubusercontent.com/u/1067203?v=4" />coolo</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>All your examples (that didn't require login) only have on button that you end your workflow with. But as soon as you have 2 choices, it's a different story</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jengelh"><img src="https://avatars.githubusercontent.com/u/8861948?v=4" />jengelh</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>At least GH gets the tab order right (which, looking at it with w3m, is done by placing the default action first HTML-wise, and then using CSS to reorder them).</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/vpereira"><img src="https://avatars.githubusercontent.com/u/37418?v=4" />vpereira</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>@jengelh I think we will find examples for both solutions, the most important is to be consistent </p> <p>i.e: </p> <p>gitlab </p> <p><img src="https://user-images.githubusercontent.com/37418/55337878-c7323380-549f-11e9-88fb-9188ac2d1403.png" alt="Screenshot_2019-04-01_16-57-51" /></p> <p>google chrome</p> <p><img src="https://user-images.githubusercontent.com/37418/55337888-ce594180-549f-11e9-8715-b0ed782c4a2b.png" alt="Screenshot_2019-04-01_16-59-23" /></p> <p>google chrome upload file</p> <p><img src="https://user-images.githubusercontent.com/37418/55337977-f5b00e80-549f-11e9-8080-dea5d664968d.png" alt="Screenshot_2019-04-01_17-00-23" /></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jengelh"><img src="https://avatars.githubusercontent.com/u/8861948?v=4" />jengelh</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>Of course I am with you on the "consistency" thought: <em>No</em> third-party website has a <strong>left-aligned Cancel-OK</strong> combo. PR #7300 would have fixed that and restored consistency at least with one half of the Internet.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/vpereira"><img src="https://avatars.githubusercontent.com/u/37418?v=4" />vpereira</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>@jengelh We all agree that to let a dialog with a different alignment doesn't make sense, right? The issue can still be open, until we finish the whole bootstrap migration, and then we can revisit this issue. The PR #7300 IMO doesn't make sense now or in a so limited scope.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jesus-montano"><img src="https://avatars.githubusercontent.com/u/48233860?v=4" />jesus-montano</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <p>then you do not want the buttons to change it sideways, you want to keep the buttons as they are?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/jengelh"><img src="https://avatars.githubusercontent.com/u/8861948?v=4" />jengelh</a> commented <strong> 5 years ago</strong> </div> <div class="markdown-body"> <blockquote> <p>The issue can still be open, until we finish the whole bootstrap migration</p> </blockquote> <p>This thing has now been broken for a month, and you have not come up with any ready-to-merge counterproposal. This is basically admitting complete defeat. This should be merged, because as everybody knows, software projects and their visions for complete overhauls have a tendency to drag on and sometimes even languish in oblivion.</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

openSUSE / open-build-service

[beta] webui: approve/disregard buttons have wrong order #7255

Observed

Expected Result

How to Reproduce

Further Information