New Usability Issue in Firefox 4 When overflow:auto is Used

A member of my family recently was buying something online and was making the payment via PayPal's form for non-PayPal members to pay through a credit card. When she tried to tab from one field to the next a border (outline) appeared around the next label and field instead of the field receiving focus. This is definitely an unwanted change from normal tabbing behavior. So when I got back to my own machine, which has the necessary developer tools, I first went to the page in Firefox 3.6 where I did not see the problem. Next I navigated to the page in Firefox 4 where lo and behold the issue occurs.

It turns out that the issue is triggered by the wrapper paragraph element having "overflow:auto" set, even though no scrollbar was generated. So I recommend that you use "overflow:hidden" instead or, better, use an alternative (that doesn't require adding any extra elements to the markup), or even better: use inline-blocks instead of floated elements. Keep in mind that this could also be an issue in navigational menus for people who choose to navigate through pages with the keyboard alone.

Before this change in Firefox, we needed to give a normal element, e.g. a <div> (not a link or form control), (that didn't have a scrollbar) tabindex="0" in order to make it able to receive focus via tabbing (and still do for other browsers).

I'm not sure whether this is a good change for usability or not. However, we do have an issue that needs to be addressed by being more thoughtful about using "overflow:auto" in our stylesheets. I'd love to hear your thoughts and if anyone knows why the Mozilla developers made this change, I'd appreciate hearing it.