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>