search

digdir / designsystemet

Designsystemet
https://designsystemet.no
MIT License
68 stars 34 forks source link

Combobox: Virtualization causes JAWS to read the list of options incorrectly #1732

Open hansenalexander opened 3 months ago

hansenalexander commented 3 months ago

Description of the bug

Title basically. If I navigate the combobox dropdown using the arrow keys JAWS will eventually read the order incorrectly. Doesn't seem to matter if I've selected elements or not.

Say you've got 10 elements to choose from. For the first element it may read something like this: Listeboks, Oslo, 1 av 10, bruk piltastene til å flytte til et element

... manually navigating using arrow keys ...

And then: Listeboks, Trondheim, 7 av 8, bruk piltastene til å flytte til et element

Steps To Reproduce

  1. Go to the virtualized example
  2. Navigate the list using JAWS

Additional Information

No response

mimarz commented 3 months ago

Comboboxes are hard with screenreaders :/

We'll have a look at this in not to long and see if we can't improve it somehow.

Are you having the same problem with other combobox components?

hansenalexander commented 3 months ago

Comboboxes are hard with screenreaders :/

We'll have a look at this in not to long and see if we can't improve it somehow.

Are you having the same problem with other combobox components?

Haven't tested any other combobox components in React..

eirikbacker commented 3 weeks ago

https://u-elements.github.io/u-elements/elements/u-datalist solves this, and soon we're adding u-tags as well, creating very good support for designs like https://storybook.designsystemet.no/?path=/story/komponenter-combobox--multiple ☺️