Фокусировка с помощью клавиши табуляции не работает в FireFox

Question

У меня проблема с фокусировкой ссылки с помощью клавиши табуляции в FireFox. Фокусировка работает нормально в chrome, но в FireFox она проходит внутри одного элемента.

Я создал пример с описанным поведением (откройте его в 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>
                

У кого-нибудь есть идеи, что может быть не так?

Answer 1

Вы можете удалить индекс табуляции двух тегов a, поскольку они не нужны, также есть некоторые входные теги, которые не видны на экране, их необходимо установить на tabIndex как -1, поэтому что эти элементы пропущены!

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

зарегистрирован Firefox 67.0.4 (64-бит)