Bug 284774 – AX: aria-labelledby uses referenced checkbox value instead of name

• Component: Accessibility
• Status: NEW

[Curtis Wilcox]

Created attachment 473578 [details]
reduced case example of the problem, with variants that do not have the problem

Using VoiceOver on macOS Sonoma 14.7 with Safari 18.2, when `aria-labelledby` on a `<button>` references the id of a `checkbox`, it reads the checkbox's `value` as the button's name instead of the checkbox's name in the accessibility tree when the name comes from an explicitly associated `<label>` element. In the web rotor, the button's name is displayed as the checkbox's name bracketed between its value (e.g. "1 Filter One 1").

This problem does not occur when the referenced input is a 'radio' instead of a 'checkbox'. It does not occur when the 'checkbox' is named using `aria-label` or `aria-labelledby`.

I can reproduce the problem in Safari Technology Preview Release 209. I can't reproduce the problem on iOS 18.2.

In Safari 17.4.1 on macOS Sonoma 14.4.1, the web rotor name matches the announced name, the value of the checkbox (e.g. "1").

Reduced case attached and at this URL: https://codepen.io/ccwilcox/pen/QwLdgjO/9ec89d6a8fc4c25b86a907b90bb4f8f0

[Radar WebKit Bug Importer]

<rdar://problem/141564913>

[Curtis Wilcox]

Created attachment 473582 [details]
corrected reduced case example of the problem with checkboxes and radio buttons

[Curtis Wilcox]

My apologies, radio buttons *do* have the same problem. There was an error in my reduced case, it's been corrected at the Codepen URL and in the corrected attachment.