When navigating through a form in Google Chrome, if a text link is nested inside the <label> element for a checkbox or radio button, the link's semantics seem to be completely ignored by JAWS.
- Using down arrow to navigate through the page, the label text is skipped completely.
- Using tab to move between interactive elements, the link is focused, but the role and name of the previously focused form element is announced instead (if that form element was a checkbox or radio button).
Reproducible on this CodePen (also pasted below just in case).
In Firefox, this issue does not occur. Though the link's information seems to be announced twice for some reason when focused.
<h1>Testing links nested inside field labels</h1>
<button>Tab stop</button>
<h2>Text input</h2>
<label for="input-1">Favorite food <a href="#">test</a>:</label>
<input type="text" id="input-1">
<h2>Checkbox</h2>
<input type="checkbox" id="input-2">
<label for="input-2">I consent <a href="#">test</a>.</label>
<h2>Radio button</h2>
<input type="radio" name="onoff" id="input-3">
<label for="input-3">On <a href="#">test</a></label>
<input type="radio" name="onoff" id="input-4">
<label for="input-4">Off <a href="#">test</a></label>
<h2>Textarea</h2>
<label for="input-5">Tell me a story <a href="#">Test</a></label>
<textarea id="input-5"></textarea>
When navigating through a form in Google Chrome, if a text link is nested inside the
<label>element for a checkbox or radio button, the link's semantics seem to be completely ignored by JAWS.Reproducible on this CodePen (also pasted below just in case).
In Firefox, this issue does not occur. Though the link's information seems to be announced twice for some reason when focused.