[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.

crud-chrome.mp4

Safari

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

crud-safari.mp4

Browsers

• Chrome
• Firefox
• Safari
• Safari on iOS
• Edge

Screen Readers

• None
• NVDA
• JAWS
• 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:

web-components/packages/grid/src/vaadin-grid-styles.js

Line 157 in 8086302

overflow: hidden;

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

web-components/packages/grid/src/vaadin-grid.js

Line 669 in 8086302

cellContent.addEventListener('mousedown', () => {

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

crud-voiceover-works.mp4

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

[web-padawan]

See #3820 (comment) for the research summary.