Focusing with tab key not working in FireFox - html

Question

I have a problem with focusing link with tab key in FireFox. Focusing works normal in chrome but in FireFox it loops inside one element.
I have created a example with the described behavior(open it in FireFox)
https://jsfiddle.net/e4gcmk6z/2/
.notVisible {
opacity: 0;
position: fixed;
}
.selection-box-v2 .selection-item {
background: #ffffff;
border: solid;
border-width: 1px;
border-color: #9c9c9c;
border-radius: 3px;
padding: 10px;
display: block;
}
label.label-outline {
font-size: 14px !important;
-webkit-transform: translate(0px, 12px);
transform: translate(0px, 12px);
position: absolute;
padding-right: 5px;
padding-left: 5px;
margin-top: 0px;
left: 18px;
line-height: normal !important;
cursor: text;
color: #5f5f5f;
z-index: 1;
}
.selection-box-v2 .co-calendar {
color: #3071a9;
font-size: 20px;
margin-right: 20px;
margin-top: 10px;
position: absolute;
right: 0;
pointer-events: none;
z-index: 1;
}
<div>
Tab key is not focusing link 2 in FireFox
</div>
<div class="links-v2">
<a tabindex="0" href="javascript:void(0);">
link 1
</a>
</div>
<br>
<div class="col-xs-12 selection-box-v2 pad">
<label tabindex="0" role="radio">
<input type="radio" class="shipModeId notVisible" name="shipModeId_1" value="p79652">
<span class="selection-item preferred-arrival-date-v2 inner-addon right-addon calendar-box">
<input class="ship-date" type="hidden" value="">
<span class="padClause" style="display: none">
<p class="checkout-ship-padClause"> </p>
</span>
<span class="ship-type-and-cost" style="margin-top: 10px;">some other elements
<span class="shipping-cost span-inline calendar-arrival"></span>
</span>
</span>
</label>
</div>
<br>
<div class="links-v2">
<a tabindex="0" href="javascript:void(0);">
link 2
</a>
</div>
Any one has and idea what could be wrong?

Answer 1

You can remove the tab index of the two a tags since they are not needed, also there are some input tags that are not visible on the screen, these need to be set to tabIndex as -1 so that these elements are skipped!
.notVisible {
opacity: 0;
position: fixed;
}
.selection-box-v2 .selection-item {
background: #ffffff;
border: solid;
border-width: 1px;
border-color: #9c9c9c;
border-radius: 3px;
padding: 10px;
display: block;
}
label.label-outline {
font-size: 14px !important;
-webkit-transform: translate(0px, 12px);
transform: translate(0px, 12px);
position: absolute;
padding-right: 5px;
padding-left: 5px;
margin-top: 0px;
left: 18px;
line-height: normal !important;
cursor: text;
color: #5f5f5f;
z-index: 1;
}
.selection-box-v2 .co-calendar {
color: #3071a9;
font-size: 20px;
margin-right: 20px;
margin-top: 10px;
position: absolute;
right: 0;
pointer-events: none;
z-index: 1;
}
<div>
Tab is not focusing link 2 in FireFox
</div>
<div class="links-v2">
<a href="javascript:void(0);">
link 1
</a>
</div>
<br>
<div class="col-xs-12 selection-box-v2 pad">
<label tabindex="0" role="radio">
<input type="radio" tabindex="-1" class="shipModeId notVisible" name="shipModeId_1" value="p79652">
<span class="selection-item preferred-arrival-date-v2 inner-addon right-addon calendar-box">
<input class="ship-date" tabindex="-1" type="hidden" value=""/>
<span class="padClause" style="display: none">
<p class="checkout-ship-padClause"> </p>
</span>
<span class="ship-type-and-cost" style="margin-top: 10px;">some other elements
<span class="shipping-cost span-inline calendar-arrival"></span>
</span>
</span>
</label>
</div>
<br>
<div class="links-v2">
<a href="javascript:void(0);">
link 2
</a>
</div>
checked in Firefox 67.0.4 (64-bit)