[Webkit-unassigned] [Bug 223202] New: AX: [iOS] [VoiceOver] [Safari] VoiceOver miscalculates hit target of elements within a Storybook iframe, resulting in unexpected input with the wrong item selected

[bugzilla-daemon at webkit.org]

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

            Bug ID: 223202
           Summary: AX: [iOS] [VoiceOver] [Safari] VoiceOver miscalculates
                    hit target of elements within a Storybook iframe,
                    resulting in unexpected input with the wrong item
                    selected
           Product: WebKit
           Version: Safari 14
          Hardware: iPhone / iPad
                OS: iOS 14
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Accessibility
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: mijordan at adobe.com
                CC: webkit-bug-importer at group.apple.com

Created attachment 423205

  --> https://bugs.webkit.org/attachment.cgi?id=423205&action=review

Video demonstrating behavior

Using Safari with VoiceOver on iOS on an iPhone in landscape orientation, VoiceOver miscalculates the hit target position and clicks the element above the item focused with the VoiceOver cursor, which results in unexpected input with the wrong item being selected.

URL providing example: https://reactspectrum.blob.core.windows.net/reactspectrum/2c51512b6a7ae015780d6c0feee3424d1b345d97/storybook/index.html?path=/story/combobox--static-items

1. Open the Storybook story https://reactspectrum.blob.core.windows.net/reactspectrum/2c51512b6a7ae015780d6c0feee3424d1b345d97/storybook/index.html?path=/story/combobox--static-items on an iPhone in landscape mode with VoiceOver running.
2. Navigate to the Combobox input/dialog popup button within the Storybook iframe.
3. Double tap to expand the Combobox dialog, which contains a text input, a listbox with three options, and a visually hidden button to dismiss the dialog.
4. Using VoiceOver cursor, navigate to the third item in the listbox labelled "Item Three."
5. Double tap to select "Item Three."

Expected result:
The item focused with the VoiceOver cursor, "Item Three", should be selected and the Combobox text input should be updated with the value "Item Three."

Actual result:
The item above the item that appears to be focused with the VoiceOver cursor, "Item Two", is selected and the Combobox text input updates with the value "Item Two."

I've attached a brief video demonstrating the unexpected behavior on an iPhone 11 with iOS 14.4.

If we open the same Storybook story outside of the Storybook iframe, the example works as expected:

6. Open https://reactspectrum.blob.core.windows.net/reactspectrum/2c51512b6a7ae015780d6c0feee3424d1b345d97/storybook/iframe.html?id=combobox--static-items&providerSwitcher-locale=&providerSwitcher-theme=&providerSwitcher-scale=&providerSwitcher-toastPosition=bottom&viewMode=story on an iPhone in landscape mode with VoiceOver running.
7. Navigate to the Combobox input/dialog popup button.
8. Double tap to expand the Combobox dialog, which contains a text input, a listbox with three options, and a visually hidden button to dismiss the dialog.
9. Using VoiceOver cursor, navigate to the third item in the listbox labelled "Item Three."
10. Double tap to select "Item Three."

Expected result:
The item focused with the VoiceOver cursor, "Item Three", should be selected and the Combobox text input should be updated with the value "Item Three."

Actual result:
The item focused with the VoiceOver cursor, "Item Three", is selected and the Combobox text input is updated with the value "Item Three."

-- 
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/20210315/b4af669f/attachment-0001.htm>