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

• Status: NEW
• Component: Accessibility

[Michael Jordan]

Created attachment 423205 [details]
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."

[Radar WebKit Bug Importer]

<rdar://problem/75438660>

[Michael Jordan]

This bug has been cross-posted as https://feedbackassistant.apple.com/feedback/9043738.