Bug <legend>) – AX: safari reads everything in form elements twice, legend reread on refocus

• Component: Accessibility
• Status: NEW

[Klaus]

Created attachment 439332 [details]
screenshot showing hierarchy in Xcode ax tool

it seems like an old problem has resurfaced with a vengeance.

reduced test case:
https://codepen.io/lewisjwright/full/bGbpoGw


even further reduced:
  <fieldset>
    <legend>I agree to terms and conditions</legend>
    <label><input name='radio_with_legend1' type='radio' checked='checked'>Yes</label>
    <label><input name='radio_with_legend1' type='radio'>No</label>
 </fieldset>

In the above code whatever is inside Legend will be read twice, this goes for ALL form elements os one kind or another, especially in combination with shadow elements
(meaning this seems to be a rudimentary bug in all form related fields (value get read twice)

XCODE accessibility inspector show that:
the hierarchy is wrongly read
1: first element is the Type: Group with the Label: "I agree to terms and conditions"
2: child element after this is "static Text" with value: I agree to terms and conditions

Result of this is that VoiceOver read both the group and the text value aloud, even though only on DOM element is present.
This should be marked as a critical- needs fix since it impacts every single person out there with a disability trying to use Form elements in Safari


tested on: 
osx 11.5.2
safari 14.1.2

[Radar WebKit Bug Importer]

<rdar://problem/83565334>

[Klaus]

I can confirm this issues still exist on Safari 15,

see: https://www.duetds.com/components/examples/nested-choice-and-radio-groups/
for a more complex example

[Oliver Byford]

We're also seeing legends read twice when focusing the first control within a fieldset.

For example on https://design-system.service.gov.uk/components/radios/default/index.html, focusing the first radio button VO will announce:

"England, selected, radio button, 1 of 4, Where do you live?, Where do you live?, group"

Rather than the expected:

"England, selected, radio button, 1 of 4, Where do you live?, group"

Labels don't generally seem to be repeated when tabbing through interactive controls, but they are read twice if e.g. reading from the top of the page using Ctrl-Opt-A.

As tested in Safari 15.5 (17613.2.7.1.8) on macOS 12.4 (21F79).

[Klaus]

(In reply to Klaus from comment #0)
> Created attachment 439332 [details]
> screenshot showing hierarchy in Xcode ax tool
> 
> it seems like an old problem has resurfaced with a vengeance.
> 
> reduced test case:
> https://codepen.io/lewisjwright/full/bGbpoGw
> 
> 
> even further reduced:
>   <fieldset>
>     <legend>I agree to terms and conditions</legend>
>     <label><input name='radio_with_legend1' type='radio'
> checked='checked'>Yes</label>
>     <label><input name='radio_with_legend1' type='radio'>No</label>
>  </fieldset>
> 
> In the above code whatever is inside Legend will be read twice, this goes
> for ALL form elements os one kind or another, especially in combination with
> shadow elements
> (meaning this seems to be a rudimentary bug in all form related fields
> (value get read twice)
> 
> XCODE accessibility inspector show that:
> the hierarchy is wrongly read
> 1: first element is the Type: Group with the Label: "I agree to terms and
> conditions"
> 2: child element after this is "static Text" with value: I agree to terms
> and conditions
> 
> Result of this is that VoiceOver read both the group and the text value
> aloud, even though only on DOM element is present.
> This should be marked as a critical- needs fix since it impacts every single
> person out there with a disability trying to use Form elements in Safari
> 
> 
> tested on: 
> osx 11.5.2
> safari 14.1.2

This Bug is still present on SAFARI 16 on MAC OS 12.6 - 
In addition a fieldset with a Legend and multiple form elements will now cause Legend to be re-read every time a user refocuses on a field (as opposed to all other browsers that will read it only once while focus is within the field bounds)



repo code:

<field-set>
  <legend>Start</legend>
  
  <div>
    <label for="AA">A</label>
    <input name="AA" type="text" aria-label="B"/>
  </div>
  <div>
    <label for="BB">a2</label>
    <input name="BB" type="text" aria-label="b2"/>
  </div>
</fieldset>