firefoxtabindex

Tabindex target the div (FireFox issue)


I'm not sure if this is a Firefox (Chrome doesn't do that) issue only but for some reason in this Fiddler the pink line is targeted by Tabindex.

I know I can simply add Tabindex=-1 to avoid that behavior but I'm not sure if this is a Firefox BUG or I don't know something about Tabindex.

Firefox basically targets with Tabindex a Div which has Overflow: auto or hidden (only clip isn't affected) and has smaller height than the inside Div

Is it a BUG or something is hidden between the lines?

<Input type="text" value="first input">
<div style="overflow: auto; height: 9px">
  <div style="padding-top: 10px; background-color: pink"></div>
</div>
<Input type="text" value="second input">

Solution

  • Seems to be an old bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1069739

    Having the overflow parent element with a child element that has height seems to trigger it in this case. If you remove the overflow: auto or just make that element pink and remove the child, it seems to fix the issue.

    Edit: Could be a by-product of enforcing scrollable elements to be recognized as focusable elements per the standards, but that's just a guess.

    Edit2: Actually, in this case I don't think it's a bug. With overflow: auto; it would be perceived as a scrollable element and should be tabbable for accessibility.