[combo-box] Not possible to select an element from the list [2 days]

[yuriy-fix]

What is the problem?

On iOS with VoiceOver running and Android with TalkBack running, it is not possible to select an element from the list as, it seems, the options list does not immediately follow the <input> field. Swiping through content after the options list opens instead moves focus to the next available content.

Browsers

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

Screen Readers

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

[vursen]

Here is a fragment of the code where the issue originates from:

https://github.com/vaadin/web-components/blob/05fcc6daa21325753cf528c9c1072ccd8dd1e52e/packages/combo-box/src/vaadin-combo-box-mixin.js#L1076-L1092

For some reason, when using the combo-box in any of the mentioned browser + voice assistant combinations, the browser fires focusout for the combo-box with the first attempt to interact with its dropdown. That in turn triggers _onFocusout which closes the dropdown immediately.

As a workaround, we could add a check on relatedTarget in _onFocusout, forcing the method to return if the related target is a combo-box item or generally any child of the combo-box overlay.

[yuriy-fix]

Let's timebox trying to find the solution for this one.

[web-padawan]

Confirmed that focusout is fired because VoiceOver actually moves focus to the combo-box item. I think we can check for event.relatedTarget and if it's vaadin-combo-box-item, then ignore it.

[rolfsmeds]

According to latest a11y review by TetraLogical, This problem seems to persist in V24.2.alpha4.

[tomivirkki]

According to latest a11y review by TetraLogical, This problem seems to persist in V24.2.alpha4.

Tested the ComboBox example on Vaadin docs (latest 24.2) and didn't have any issues selecting items on TalkBack. Not sure about iOS & VoiceOver

[rolfsmeds]

Yeah iOS/VO is specifically the combo mentioned.

[vursen]

Tested the ComboBox example on Vaadin docs with iOS + VoiceOver.

I didn't have any issues with selecting items, but I did have issues with navigation (scrolling) inside the dropdown:

https://github.com/vaadin/web-components/assets/5039436/a8191740-2e59-4624-9457-a35a87df1d12

I tried various gestures but none of them worked well, except for 3-finger swipe up and down, which more or less consistently navigated me between pages. I wonder if this is what Tetralogical actually had in mind when saying "it's still not possible to select items".

[vursen]

My latest 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) or right (prev). You can see that the list loses focus at some point even though I haven't reached the end of the list.

At the end, I also try to scroll with one-finger tap + 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

[rolfsmeds]

Makes sense. I wonder if we have the same issue with Grid?

[vursen]

Makes sense. I wonder if we have the same issue with Grid?

Yes, I've just confirmed that the issue is reproducible with Grid as well:

https://github.com/vaadin/web-components/assets/5039436/82a9826e-bfd7-4b90-b4a5-6926e4024f47