Narrator announces incorrect information as "non-selected" when focus moves to the radio button

Question

Narrator announces incorrect information as "non-selected" when focus moves to the radio button.

it should be speaking about radio button selected 1 of 2

<div>
  <div tabindex="0" role="radio">
    <ul>
      <li class="react-custom-radio-link">
        <input type="radio" name="IsPrivateProfile" id="Public" aria-checked="true">
        <label for="Public">Public</label></li>
    </ul>
  </div>
  <div tabindex="0" role="radio">
    <ul class="react-custom-radio-button">
      <li class="react-custom-radio-link">
        <input type="radio" name="IsPrivateProfile" id="Private" aria-checked="false" checked=""><label for="Private">Private</label></li>
    </ul>
  </div>
</div>

Answer 1

It happens because it focuses first on the div which has a tabindex attribute. If you continue to the radio it will announce the correct status. My fix was to remove the focus-ability from the div

<div>
  <div role="radio">
    <ul>
      <li class="react-custom-radio-link">
        <input type="radio" name="IsPrivateProfile" id="Public" aria-checked="true">
        <label for="Public">Public</label></li>
    </ul>
  </div>
  <div role="radio">
    <ul class="react-custom-radio-button">
      <li class="react-custom-radio-link">
        <input type="radio" name="IsPrivateProfile" id="Private" aria-checked="false" checked=""><label for="Private">Private</label></li>
    </ul>
  </div>
</div>