Блог

Я пытаюсь реализовать несколько radiogroups на одной странице. Несмотря на отдельные name и form переключатели ведут себя как одна группа — если вы нажмете в одной группе, она отменит выбор в другой группе.

 <form id="rg1_label">

  <ul class="radiogroup" id="rg1" role="radiogroup" aria-labelledby="rg1_label">
    <li id="r1" tabindex="-1" role="radio" aria-checked="false">
      <img role="presentation" src="https://picsum.photos/50/50/" /> 1
    </li>
    <li id="r2" tabindex="-1" role="radio" aria-checked="false">
      <img role="presentation" src="https://picsum.photos/50/50/" /> 2
    </li>
  </ul>
</form>
<form id="rg2_label">
  <ul class="radiogroup" id="rg2" role="radiogroup" aria-labelledby="rg2_label">
    <li id="r3" tabindex="-1" role="radio" aria-checked="false">
      <img role="presentation" src="https://picsum.photos/50/50/" /> 3
    </li>
    <li id="r4" tabindex="-1" role="radio" aria-checked="false">
      <img role="presentation" src="https://picsum.photos/50/50/" /> 4
    </li>
  </ul>
</form> 

Вы неправильно истолковали проблему здесь. Во-первых, давайте обойдемся без термина selected, он применяется к <option> элементам. Переключатели могут быть проверены или нет.

На данный момент ни один из элементов вашего списка вообще не может быть проверен.

Когда вы нажимаете на один, потому что у них есть tabindex="-1" , они получают фокус.

Это означает, что они являются элементом, с которым пользователь в данный момент взаимодействует. Если пользователь нажал клавишу, то keydown keyup keypress для этого элемента будет запущено событие and (и устаревшее ). Если они нажмут tab, фокус переместится на следующий элемент. Чтобы указать, что элемент находится в фокусе, в большинстве браузеров ему присваивается визуальная подсветка.

Это не то же самое, что проверка. aria-checked Атрибут не изменяется.

tabindex позволяет взаимодействовать с клавиатурой и aria- позволяет передавать информацию о назначении и текущем состоянии элемента для программ чтения с экрана и других вспомогательных технологий. Они не превращают элементы в настоящие флажки.

Вам нужно самостоятельно обрабатывать с помощью JavaScript различные вещи, в том числе:

• Сохранение проверенного состояния
• Снятие флажка с текущего проверяемого элемента при проверке другого
• Чтение данных, когда вы хотите использовать их для чего-то (например, отправка на сервер в виде данных формы)
• Изменение aria- атрибутов для отражения обновленного состояния

(Возможно, некоторые другие вещи, я не пытаюсь написать здесь исчерпывающий список).

Вообще говоря, использование реальных переключателей — это гораздо лучший (и намного более простой) подход, чем использование не-переключателей с набором CSS, JS и ARIA, чтобы заставить их вести себя как настоящие переключатели.

Я думаю, что нашел решение вашей проблемы. Если это не сработает или если это не то, что вы ищете, дайте мне знать, и я постараюсь найти что-нибудь еще.

 <form id="rg1_label">

        <ul class="radiogroup" id="rg1" role="radiogroup" aria-labelledby="rg1_label">
            <li id="r1" tabindex="-1" role="radio" aria-checked="false">
                <input type="radio" name="radiobroup">
                <img role="presentation" src="https://picsum.photos/50/50/" /> 1
            </li>
            <li id="r2" tabindex="-1" role="radio" aria-checked="false">
                <input type="radio" name="radiobroup">
                <img role="presentation" src="https://picsum.photos/50/50/" /> 2
            </li>
        </ul>
        <ul class="radiogroup" id="rg2" role="radiogroup" aria-labelledby="rg2_label">
            <li id="r3" tabindex="-1" role="radio" aria-checked="false">
                <input type="radio" name="radiobroup">
                <img role="presentation" src="https://picsum.photos/50/50/" /> 3
            </li>
            <li id="r4" tabindex="-1" role="radio" aria-checked="false">
                <input type="radio" name="radiobroup">
                <img role="presentation" src="https://picsum.photos/50/50/" /> 4
            </li>
        </ul>
    </form>
 

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

Другой способ, которым вы могли бы это исправить, — это использовать Javascript, и если такие операторы, как если этот отмечен, тогда значение = такое-то и такое-то. Это может сработать. Я все еще не понимаю, почему именно вам нужны две формы, а не использовать одну?