Можете ли вы перечислить все переключатели?

У меня есть список переключателей. когда я просматриваю их, кажется, что только первый переключатель или тот, который выбран, будет сфокусирован, остальные переключатели будут пропущены. checkbox did not есть эта проблема.

http://jsfiddle.net/2Bd32/

Мне сложно объяснить мой QA, это не ошибка. может кто-то, пожалуйста, объясните мне, почему это происходит.

Soccer: <input type="checkbox" name="sports" value="soccer"  tabindex="1" /><br />
Football: <input type="checkbox" name="sports" value="football"  tabindex="2" /><br /> 

<input type="radio" name="num" value="3" tabindex="3">3<br>
<input type="radio" name="num" value="4" tabindex="4">4<br>
<input type="radio" name="num" value="5" tabindex="5">5<br>
<input type="radio" name="num" value="6" tabindex="6">6<br>
<input type="radio" name="num" value="7" tabindex="7">7<br>

Baseball: <input type="checkbox" name="sports" value="baseball"  tabindex="8"  /><br /> 
Basketball: <input type="checkbox" name="sports" value="basketball"  tabindex="9"  />

Ответы

Ответ 1

Вы можете сослаться на W3C в качестве источника, здесь и здесь.

По сути, радиокнопка - это группа, которая функционирует как отдельный элемент, поскольку она сохраняет только одно значение. Вкладка в радиогруппу приведет вас к первому элементу, а затем с помощью клавиш со стрелками, которые вы перемещаетесь внутри группы.

  • Фокус может перейти к радиогруппе через:
    • Клавиша Tab
    • Ключ доступа или мнемоническое нацеливание на метку
    • Активация метки (через механизм вспомогательных технологий)
  • Клавиша Tab перемещает фокус между группами переключателей и другими виджетами.
  • Когда фокус находится на группе и когда не выбрана ни одна радиокнопка:
    • Нажатие клавиши табуляции перемещает фокус на первую радио-кнопку в группе, но не выбирает радио-кнопку.
    • Shift + нажатие клавиши Tab перемещает фокус на последнюю радио-кнопку в группе, но не выбирает радио-кнопку.
  • Когда фокус перемещается на группу, в которой выбран переключатель, нажатие клавиш Tab и Shift + Tab перемещает фокус на выбранный переключатель.
  • Клавиши "Стрелка вверх" и "Стрелка вниз" перемещают фокус и выбор.
    • Нажатие клавиши со стрелкой вверх перемещает фокус и выбор вперед с помощью переключателей в группе. Если первая радиокнопка имеет фокус, то фокус и выбор перемещаются к последней радиокнопке в группе.
    • Нажатие клавиши со стрелкой вниз перемещает фокус и выделение назад с помощью переключателей в группе. Если последний переключатель имеет фокус, то фокус и выбор перемещаются на первый переключатель в группе. * Нажатие клавиши пробела проверяет переключатель, который в данный момент имеет фокус.
  • При повторном входе в группу фокус возвращается к точке предыдущего фокуса (элемент с установленным выбором).
  • Нажатие клавиши Tab выходит из группы и перемещает фокус на следующий элемент управления формы.
  • Нажатие клавиш Shift + Tab выходит из группы и перемещает фокус на предыдущий элемент управления формы.

Ответ 2

Радиокнопки с одним именем похожи на один элемент управления (например, ввод или выбор), вы можете изменить его с помощью клавиш со стрелками, клавиша табуляции перемещает фокус на другой элемент управления.

Ответ 3

Если вы используете angularjs, вы можете напрямую управлять радиокнопкой с помощью ng-model, используя те же ng-model и удаляя name.

<input type="radio" value="0" ng-model="status">
<input type="radio" value="1" ng-model="status">

Теперь еще одно преимущество перед нажатием клавиши табуляции заключается в том, что вы можете сначала сфокусироваться на переключателе без его фактического выбора. Затем вы можете выбрать, нажав space.

Ответ 4

Если вы используете Angular Material для своего приложения, вы можете включить переключение между радиокнопками, совместимое с браузером, добавив tabindex к каждому <mat-radio-button>:

<mat-radio-button [tabindex]="0">

В противном случае вы не сможете переключаться между переключателями в Safari (потому что это поведение браузера по умолчанию - нажмите здесь для одного обсуждения).