Multiple role="radiogroup"

I'm trying to implement multiple radiogroups on the same page. Despite separate name and form the radio buttons behave as one group - if you click in one group it deselects in other group.

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

Solution

You've misinterpreted the problem here. First, let us dispense with the term selected, it applies to <option> elements. Radio buttons can be checked or not.

At the moment none of your list items can be checked at all.

When you click on one, because they have tabindex="-1", they gain the focus.

This means they are the element that the user is currently interacting with. If the user pressed a key, then a keydown and keyup (and the deprecated keypress) event will fire on that element. If they press tab then the focus will move to the next element. To indicate that the element has the focus there is a visual highlight given to it in most browsers.

This is not the same as being checked. The aria-checked attribute does not change.

tabindex allows keyboard interaction, and aria- lets you communicate information about the purpose and current state of the element to screen readers and other assistive technologies. They don't turn the elements into real checkboxes.

You need to handle, yourself, with JavaScript, a variety of things including:

Storing the checked state
Unchecking the currently checked element when another is checked
Reading the data when you want to use it for something (like submitting to a server as form data)
Changing the aria- attributes to reflect the updated state

(Possibly some other things, I'm not trying to write an exhaustive list here).

Generally speaking, using real radio buttons is a much better (and much easier) approach then using non-radio buttons with a bucket of CSS, JS and ARIA to make them behave like real radio buttons.