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