[combo-box] Can not scroll to the top when using VoiceOver on iOS [1 day]

[web-padawan]

What is the problem?

When using iOS VoiceOver, scrolling happens by moving focus between items in the dropdown. While it's possible to scroll to bottom, there is a problem when trying to scroll back to the top.

In the recording below, it's impossible to scroll to the first item in the list (Andorra).

https://user-images.githubusercontent.com/10589913/182157184-a8c3904d-997e-4575-8e06-56a47dfc77c5.mp4

So, apparently the item at the top of the dropdown can only be scrolled into view when it's partially visible.

Browsers

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

Screen Readers

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

[vursen]

My investigation indicates that the issue is related to the virtualizer, and most probably the way it arranges elements in the DOM. The issue can be observed with the pure virtual list component.

Example:

<script type="module">
  import '@vaadin/virtual-list';

  const items = Array.from({ length: 100 }).map((_, i) => {
    return { label: `Item ${i}` };
  });

  const renderer = (root, _, { item }) => {
    root.innerHTML = `<button>${item.label}</button>`;
  };

  const list = document.querySelector('vaadin-virtual-list');
  list.items = items;
  list.renderer = renderer;
</script>

<vaadin-virtual-list style="height: 200px"></vaadin-virtual-list>

Recording:

In this recording, I'm trying to navigate the list with one-finger swipe left (next) and right (prev). You can see that the list loses focus at some point even though I haven't reached the end of the list.

In the end, I also try to scroll with one-finger tap and then swipe down or up. You can see that it also doesn't work reliably and every so often I end up in an unexpected position.

https://github.com/vaadin/web-components/assets/5039436/425da148-3d46-4cc1-bedb-95b69dd6c269

[tomivirkki]

I don't have access to a physical iOS device, and unfortunately, the iOS simulator does not support VoiceOver so I can't verify it but this might relate to that neither <vaadin-virtual-list> nor <vaadin-combo-box> force keeping the item DOM elements in order, unlike <vaadin-grid> which has the Virtualizer feature for maintaining DOM order enabled.

Setting the reorderElements flag on will have the elements reordered after scroll but it only happens after a slight delay of 500ms so if you swiftly navigate through the items, you might still encounter this issue.

One possible fix could be to enable the reorderElements feature for the rest of the components and make the Virtualizer perform reordering without a delay in case the focus is on the first or the last DOM item.