Reach-ui: [Combobox] Accessible virtual list example

[CodingDive]

I'd love to see an example where many ComboboxOptions are rendered within react-window or another virtual-list implementation. One of the problems of solely using such libraries is that all the a11y benefits from @reach/combobox are lost, oftentimes leaving developers to choose between performance and accessibility.
It'd be great to see an example that combines the best of both worlds! 😍

[chaance]

I am not familiar with that library, but if it's helpful and easily achievable then I'd welcome it

My gut reaction is that you really shouldn't have so many items in a combobox that you'd need a virtual list. The whole idea is that you can narrow down options by typing, preventing the need for a huge scrollable list. Do you have a use case you feel justifies this kind of integration?

[CodingDive]

Yes, using the arrow keys without having typed anything 😅

On Sat, Mar 14, 2020, 18:22 Chance Strickland [e-mail]
wrote:

I am not familiar with that library, but if it's helpful and easily
achievable then I'd welcome it

My gut reaction is that you really shouldn't have so many items in a
combobox that you'd need a virtual list. The whole idea is that you can
narrow down options by typing, preventing the need for a huge scrollable
list. Do you have a use case you feel justifies this kind of integration?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/reach/reach-ui/issues/513#issuecomment-599103485, or
unsubscribe
https://github.com/notifications/unsubscribe-auth/AG4BSRYETAFRTU3VN7ADKKDRHO4OLANCNFSM4LJJVVSA
.

[chaance]

If it's a huge list I'd still probably recommend paginating options vs. a virtual list from a UX perspective, but unfortunately I don't get to design everyone's components 😅 I'll have to slap a help-wanted tag for now as I'm just not familiar enough with virtual lists to know what this would look like myself. If you or someone wants to submit a PR, I'll review the work, make sure screen reader response works as expected, and seek some feedback from accessibility folks who may be more familiar with the pattern than myself.

[et]

@CodingDive - I wired up an example here: https://codesandbox.io/s/epic-meninsky-csvqc?file=/src/App.tsx
I'm a rookie when it comes to accessibility but I have to imagine that a 50,000 item list will never be considered accessibly-friendly 😬

@chancestrickland - Check out that example if you have a chance. As you can see, I can had to hack the ref options to programmatically close the popover. It'd be nice if there was a friendlier way to do that.

[CodingDive]

@et thanks for the link! It's not quite accessible as I can't be using the arrow keys to navigate.

[CodingDive]

.

On Wed, Aug 26, 2020, 22:46 stale[bot] [e-mail] wrote:

Closed #513 https://github.com/reach/reach-ui/issues/513.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/reach/reach-ui/issues/513#event-3696549360, or
unsubscribe
https://github.com/notifications/unsubscribe-auth/AG4BSR44UX6K6TGJL4M5PU3SCVX6VANCNFSM4LJJVVSA
.