[crud] Wrong item edited after navigating within edit column with VoiceOver

[web-padawan]

What is the problem?

Related to #3820. There is an issue with vaadin-crud-edit-column when using VoiceOver + Chrome. It only happens when navigating within same column using Control + Option + Up / Down keys.

Chrome

Broken: the previously focused item ("Jane") is edited.

https://user-images.githubusercontent.com/10589913/177497272-e1d4fa50-be50-400e-9d77-b0b026c17844.mp4

Safari

Works as expected: the correct item ("John") is edited.

https://user-images.githubusercontent.com/10589913/177497730-407d3fc3-d186-4add-ad36-fe3d2b875bc9.mp4

Browsers

• [X] Chrome
• [ ] Firefox
• [ ] Safari
• [ ] Safari on iOS
• [ ] Edge

Screen Readers

• [ ] None
• [ ] NVDA
• [ ] JAWS
• [X] VoiceOver on MacOS
• [ ] VoiceOver on iOS

[web-padawan]

So, after some hours of struggle and despair, I eventually discovered that the issue goes away when removing this code:

https://github.com/vaadin/web-components/blob/80863025b4386507bc74780020248ed1c532f1e5/packages/grid/src/vaadin-grid-styles.js#L157

And this event listener (note: the whole listener needs to be removed, even empty listener seems to break it):

https://github.com/vaadin/web-components/blob/80863025b4386507bc74780020248ed1c532f1e5/packages/grid/src/vaadin-grid.js#L669

See the recording (added focus event listener to vaadin-crud-edit component to log into console):

https://user-images.githubusercontent.com/10589913/177573374-feb97547-7f53-4db3-b1ff-54e34ef8dc4d.mp4

Here is a branch where I tested it: https://github.com/vaadin/web-components/compare/wip/voiceover-chrome-crud

[web-padawan]

See https://github.com/vaadin/web-components/issues/3820#issuecomment-1177247564 for the research summary.