How to fix Talkback announcing checked state change multiple times when changing radio button selection on Google Chrome for Android

Question

I'm working on a AA accessible web application where I have a simple form with radio button group. When I have already selected a radio button and change the selection, Android Talkback announces state changes twice. It would say, "unchecked checked" or "checked unchecked".

My markup is strictly following the accessibility guidelines as described here https://webaim.org/techniques/forms/controls#radio. I'm not even sure if this is a bug or feature.

Codepen: https://codepen.io/bhargavshah/pen/PXVBML

<fieldset>
    <legend>Choose a shipping method:</legend>
    <input id="overnight" type="radio" name="shipping" value="overnight">
    <label for="overnight">Overnight</label><br>
    <input id="twoday" type="radio" name="shipping" value="twoday">
    <label for="twoday">Two day</label><br>
    <input id="ground" type="radio" name="shipping" value="ground">
    <label for="ground">Ground</label>
</fieldset>

Expected Result: Talkback should just announce "Checked" on a radio button when selection changes.

Actual Result: Talkback announces "Unchecked checked" on a radio button when selection changes.

Answer 1

I just came across this post as I was looking for an answer to a different question related to checkboxes, but just in case you never got your answer, this is not a defect. This is expected screen reader behavior to tell you the current state of the item followed by the new state.