Как сделать tabindex на radiobutton?

Question

[drtvader]

Привет! Каким образом можно сделать tabindex для радио?

Вот верстка:

<div class="b-rating">
                  <div class="b-rating__group"><input class="b-rating__input" type="radio" id="radio5" name="rating" value="5">
                    <label class="b-rating__star" for="radio5" tabindex="5">
                    </label><input class="b-rating__input" type="radio" id="radio4" name="rating" value="4">
                    <label class="b-rating__star" for="radio4" tabindex="4">
                    </label><input class="b-rating__input" type="radio" id="radio3" name="rating" value="3">
                    <label class="b-rating__star" for="radio3" tabindex="3">
                    </label><input class="b-rating__input" type="radio" id="radio2" name="rating" value="2">
                    <label class="b-rating__star" for="radio2" tabindex="2">
                    </label><input class="b-rating__input" type="radio" id="radio1" name="rating" value="1">
                    <label class="b-rating__star" for="radio1" tabindex="1">
                    </label>
                  </div>
                </div>

На label не выходит, на сами input тоже никак.
Какие еще способы есть? Видел статью в которой для div задается роль радиобаттона, но верен ли такой способ?
Js остается?

Answer 1

[Александр Петров]

Что вы подразумеваете под сделать «tabindex»? Чтобы элемент фокусился при нажатии табом?

Радио и так фокусятся. Только если вы не скрыли его через display: none (так делать не стоит). Используйте visuallyhidden.
Добавление tabindex="5" делает лейбл фокусящимся. Если вы этого не видете — то скорее всего у вас просто отключены стили для фокуса. Но использовать в tabindex значение отличное от 0 \ -1 крайне не рекомендуется.

Собственно самое правильное решение — это скрывать сами радио через visuallyhidden. Остальное уже костыли.

Comments

[drtvader]

В общем-то пробовал и не скрывать их, но засада, не работало, попробую ваш способ еще сейчас

[drtvader]

Да, работает, но выбирает максимальное значение только, иначе наверно никак?

[Александр Петров]

Вы о том, что табом попадает только на одну радиокнопку из группы?
Так и должно быть. Табом попадаете на компонент (сама группа), внутри группы управление уже стрелками.

И выбирается там не максимальное значение, а текущий активный или (если ничего не выбрано) первый элемент.

[drtvader]

я понял! Спасибо, никогда клавиатурой так не пользовался.