New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[combo-box] Not possible to select an element from the list [2 days] #3363
Comments
Here is a fragment of the code where the issue originates from: web-components/packages/combo-box/src/vaadin-combo-box-mixin.js Lines 1076 to 1092 in 05fcc6d
For some reason, when using the combo-box in any of the mentioned browser + voice assistant combinations, the browser fires As a workaround, we could add a check on |
Let's timebox trying to find the solution for this one. |
Confirmed that |
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 |
Yeah iOS/VO is specifically the combo mentioned. |
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: RPReplay_Final1699962786.MP4I 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". |
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. RPReplay_Final1703158785.MP4 |
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: RPReplay_Final1703170141.MP4 |
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
Screen Readers
The text was updated successfully, but these errors were encountered: