使用 Tab 键时无法到达单选按钮（带有嵌套控件）

Question

我的代码按预期 100% 运行。所有控件都可以使用 Tab 键或箭头键访问，但标记为“无筛选”的第二个单选按钮除外，该按钮永远无法访问。

是否有一个简单的解决方案可以解决这个问题，或者我应该选择不同的 UI 布局？

查看代码...

/* Just some simple (Bootstrap) formatting. Nothing interesting. */

* {
  padding: 3px;
}

.control-group {
  margin-bottom: 5px;
}

.control-label {
  font-weight: bold;
}

label {
  display: inline-block;
}

.form-check {
  padding-left: 0;
  display: block;
  min-height: 1.5rem;
  margin-bottom: .125rem;
}

input {
  margin: 0;
}

button {
  border: 1px solid #000;
}

.btn {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
}

.card.screening {
  margin-left: 2rem;
  width: 30rem;
  padding: 10px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-clip: border-box;
  border: 1px solid #999;
}

.card-text:last-child {
  margin-bottom: 0;
}

.top-spacer {
  margin-top: 10px;
}

.note {
  font-size: small;
}

<form action="process.php" method="POST">
  <div class="control-group">
    <label class="control-label">Reason upload *</label>
    <div class="controls">
      <div class="form-check">
        <input type="radio" id="reasonUploadScreening" name="reasonUpload" value="screening" autocomplete="off" tabindex="0">
        <label class="btn" for="reasonUploadScreening">Screening&nbsp;
                    <select id="screeningId" name="screeningId" class="field">
                        <option value="" disabled="" selected="">Select a screening</option>
                        <option value="20240328-1318">20240328-1318 John Doe (26-02-1968)</option>
                        <option value="20240328-1318">20240328-1604 [Anonymous]</option>
                        <option value="20240201-1575">20240201-1575 Jane Smith (11-11-1957)</option>
                        <option value="20240201-1100">20240201-1100 Peter Johnson (21-01-1980)</option></select>
                </label>
        <div class="card screening top-spacer">
          <div class="card-text">
            <div class="control-group">
              <label class="control-label">Number of images *</label>
              <div class="controls">
                <input type="radio" id="numberOfImages2" name="numberOfImages" value="2" autocomplete="off">
                <label class="btn" for="numberOfImages2">Two images (Single-field)</label>
                <input type="radio" id="numberOfImages4" name="numberOfImages" value="4" autocomplete="off">
                <label class="btn" for="numberOfImages4">Four images (Two-field)</label>
              </div>
            </div>
            <div class="control-group">
              <label class="control-label">Specify images *</label>
              <div class="controls">
                <input type="radio" id="specImgYes" name="specImg" value="1" autocomplete="off">
                <label class="btn" for="specImgYes">Yes</label>
                <input type="radio" id="specImgNo" name="specImg" value="0" autocomplete="off">
                <label class="btn" for="specImgNo">No</label>
              </div>
            </div>
            <div class="control-group">
              <label class="control-label">Mydriatics (dilating eye drops) used *</label>
              <div class="controls">
                <input type="radio" id="mydriasisYes" name="mydriasis" value="%s" autocomplete="off">
                <label class="btn" for="mydriasisYes">Yes</label>
                <input type="radio" id="mydriasisNo" name="mydriasis" value="%s" autocomplete="off">
                <label class="btn" for="mydriasisNo">No</label>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="form-check">
        <input type="radio" id="reasonUploadNoSreening" name="reasonUpload" value="noScreening" autocomplete="off" tabindex="0">
        <label class="btn" for="reasonUploadNoSreening">No screening</label>
        <div class="card screening top-spacer">
          <div class="card-text">
            <span class="note">Max. 200 images. The images will be visible to all users.</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="control-group  top-spacer">
    <div class="controls">
      <button value="submit" name="submit">Submit</button>
    </div>
  </div>
  <p class="note top-spacer">Fields marked with * are required.</p>
</form>

Answer 1

“不筛选”和“筛选”单选是“reasonUpload”组的一部分，仅当选择其中之一时才会被跳过：

示例：“无筛选”被跳过，因为选择了“筛选”（需要使用方向键）：

/* Just some simple (Bootstrap) formatting. Nothing interesting. */

* {
  padding: 3px;
}

.control-group {
  margin-bottom: 5px;
}

.control-label {
  font-weight: bold;
}

label {
  display: inline-block;
}

.form-check {
  padding-left: 0;
  display: block;
  min-height: 1.5rem;
  margin-bottom: .125rem;
}

input {
  margin: 0;
}

button {
  border: 1px solid #000;
}

.btn {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
}

.card.screening {
  margin-left: 2rem;
  width: 30rem;
  padding: 10px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-clip: border-box;
  border: 1px solid #999;
}

.card-text:last-child {
  margin-bottom: 0;
}

.top-spacer {
  margin-top: 10px;
}

.note {
  font-size: small;
}

<form action="process.php" method="POST">
  <div class="control-group">
    <label class="control-label">Reason upload *</label>
    <div class="controls">
      <div class="form-check">
        <input type="radio" id="reasonUploadScreening" name="reasonUpload" value="screening" autocomplete="off" tabindex="0" checked>
        <label class="btn" for="reasonUploadScreening">Screening&nbsp;
                    <select id="screeningId" name="screeningId" class="field">
                        <option value="" disabled="" selected="">Select a screening</option>
                        <option value="20240328-1318">20240328-1318 John Doe (26-02-1968)</option>
                        <option value="20240328-1318">20240328-1604 [Anonymous]</option>
                        <option value="20240201-1575">20240201-1575 Jane Smith (11-11-1957)</option>
                        <option value="20240201-1100">20240201-1100 Peter Johnson (21-01-1980)</option></select>
                </label>
        <div class="card screening top-spacer">
          <div class="card-text">
            <div class="control-group">
              <label class="control-label">Number of images *</label>
              <div class="controls">
                <input type="radio" id="numberOfImages2" name="numberOfImages" value="2" autocomplete="off">
                <label class="btn" for="numberOfImages2">Two images (Single-field)</label>
                <input type="radio" id="numberOfImages4" name="numberOfImages" value="4" autocomplete="off">
                <label class="btn" for="numberOfImages4">Four images (Two-field)</label>
              </div>
            </div>
            <div class="control-group">
              <label class="control-label">Specify images *</label>
              <div class="controls">
                <input type="radio" id="specImgYes" name="specImg" value="1" autocomplete="off">
                <label class="btn" for="specImgYes">Yes</label>
                <input type="radio" id="specImgNo" name="specImg" value="0" autocomplete="off">
                <label class="btn" for="specImgNo">No</label>
              </div>
            </div>
            <div class="control-group">
              <label class="control-label">Mydriatics (dilating eye drops) used *</label>
              <div class="controls">
                <input type="radio" id="mydriasisYes" name="mydriasis" value="%s" autocomplete="off">
                <label class="btn" for="mydriasisYes">Yes</label>
                <input type="radio" id="mydriasisNo" name="mydriasis" value="%s" autocomplete="off">
                <label class="btn" for="mydriasisNo">No</label>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="form-check">
        <input type="radio" id="reasonUploadNoSreening" name="reasonUpload" value="noScreening" autocomplete="off" tabindex="0">
        <label class="btn" for="reasonUploadNoSreening">No screening</label>
        <div class="card screening top-spacer">
          <div class="card-text">
            <span class="note">Max. 200 images. The images will be visible to all users.</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="control-group  top-spacer">
    <div class="controls">
      <button value="submit" name="submit">Submit</button>
    </div>
  </div>
  <p class="note top-spacer">Fields marked with * are required.</p>
</form>

这是预期的行为：

当焦点移动到选择单选按钮的组时， 按 Tab 和 Shift+Tab 键将焦点移至单选按钮 检查过。

来源：您可以选择所有单选按钮吗？