[Webkit-unassigned] [Bug 275727] New: AX: VoiceOver fails to read radio button labels in SVG with role="radio" on <g> elements

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=275727

            Bug ID: 275727
           Summary: AX: VoiceOver fails to read radio button labels in SVG
                    with role="radio" on <g> elements
           Product: WebKit
           Version: Safari 17
          Hardware: iPhone / iPad
                OS: All
            Status: NEW
          Severity: Critical
          Priority: P2
         Component: Accessibility
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: khsbory at naver.com
                CC: andresg_22 at apple.com,
                    webkit-bug-importer at group.apple.com

When using SVG <g> elements with role="radio" that contain <text> elements as labels, VoiceOver on iOS fails to read the radio button labels correctly. VoiceOver announces the selection state and the element type (radio button) but does not read the label text for each radio button.

Steps to reproduce:
1. Open the test page at khsruru.com/div_radio.html on an iOS device
2. Enable VoiceOver
3. Navigate to the SVG radio button group
4. Swipe through the individual radio buttons

Expected behavior:
VoiceOver should read the label text for each radio button as the user navigates through them, along with its selection state and element type.

Actual behavior: 
VoiceOver announces the selection state (selected or unselected) and the element type (radio button) but does not read the label text for the radio buttons. The user cannot determine which option each radio button represents without visual cues.

Test environment:
- iOS 17
- Safari (latest version)
- VoiceOver enabled

Additional notes:
This issue appears to be specific to the combination of SVG, <g> elements with role="radio", and <text> elements used as labels. Standard HTML radio buttons with labels work as expected.

A video demonstrating this issue has been recorded to provide a clearer understanding of the problem. You can view the video at: https://khsruru.com/wp-content/uploads/2024/06/녹화_2024_06_21_14_15_44_50.mp4

The video shows the VoiceOver behavior when interacting with the SVG radio buttons, clearly demonstrating that the labels are not being read, while the selection state and element type are announced.

Potential impact:
This issue significantly impacts the accessibility of SVG-based custom radio buttons for VoiceOver users, as they cannot determine the purpose or options of the radio button group without visible text.

Please let me know if you need any additional information or clarification on this issue.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20240621/cfbc39fb/attachment-0001.htm>