Remove Overflow Content from Tab Order
Extra tab stop for otherwise non-focusable containers
Only on Firefox a container with the CSS property overflow-x or overflow-y set to hidden will gain focusability if that container actually has overflow (and therefore truncated) content. The effect is that an otherwise ordinary span or div can get the functional equivalent of tabindex="0" added. This phantom tabindex is not visible in the Inspector. Steve Faulkner has argued that this is actually a correct behavior that allows keyboard-only users to navigate content that has been truncated by a container:
Because Firefox is unique in this treatment of overflowing content clients it can cause confusion and unexpected extra tab stops for a non-obvious reason. To make Firefox behave the same as all other browsers (or at least Chrome, Safari and IE) add tabindex="-1" to the container which has the overflow property. This will override the native behavior of Firefox and cause no harm on other browsers.