CDK Virtual Scroll Viewport with CDK A11y ActiveDescendantKeyManager

[cedvdb]

What is the expected behavior?

Virtual Scroll to work with CDK A11y ActiveDescendantKeyManager

What is the current behavior?

Since virtual scroll only loads partial information and loads more when you scroll (recycling the view), ActiveDescendantKeyManager only get the indexes of the current items loaded by the . As I load more, the indexes repeats themselves, since the virtual scroll adds and deletes items

What are the steps to reproduce?

https://stackblitz.com/edit/angular-zmawwx

[yuriyward]

Any updates or workaround?

[mmalerba]

Yeah this is definitely not something that will work out of the box currently. Will need some design work

[Jordan-Hall]

@Victorward no real way around it, however, I solved the issue by creating a new QueryList which has the items in and not the elements. Whenever the value for the for loop changes. I use .reset() and then pass in the item which controls the state

[huantaoliu]

@Victorward no real way around it, however, I solved the issue by creating a new QueryList which has the items in and not the elements. Whenever the value for the for loop changes. I use .reset() and then pass in the item which controls the state

Are you relying on the ViewChildren.change event? I didn't change the item value, but when I scroll down the list, theViewChildren.change event triggered occationally, I am not sure what's the reason that can trigger the change event. Maybe it's when the items of virtualScroll changes when I scroll down?

[yuriyward]

@Victorward no real way around it, however, I solved the issue by creating a new QueryList which has the items in and not the elements. Whenever the value for the for loop changes. I use .reset() and then pass in the item which controls the state

Are you relying on the ViewChildren.change event? I didn't change the item value, but when I scroll down the list, theViewChildren.change event triggered occationally, I am not sure what's the reason that can trigger the change event. Maybe it's when the items of virtualScroll changes when I scroll down?

Forget to update, but I found some workaround some time ago :) So in my case is important that I create a KeyManager only once with options:

@ViewChildren(OptionComponent) options: QueryList<OptionComponent>;

this._keyboardEventManager = new ActiveDescendantKeyManager<OptionComponent>(options);

Then on every keyboard event I set locally active item this._activeItem = this._keyboardEventManager.activeItem;, thanks to that I have always active item which I can set on every new data that comes to component. I don't need to update or reset a options of the keyManeger. But when new data comes I just set active item inside keyManager this._keyboardEventManager.setActiveItem(this._activeItem). It looks that it works, but there is also important that virtaul-scroll should have enough big minBufferPx size to render new options, otherwise it can loose current position

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[Jordan-Hall]

@mmalerba is this a feature or more of a bug. I know its not something that currently works with a11y but it feels more like an oversight. Just wondering if it really needs voting on

[mmalerba]

I'd consider it a little bit of both. I think designing and implementing APIs that allow people to create accessible virtual scroll experiences (especially when it comes to interactive content) is quite a tricky problem, so this is going to need a lot of thought and a design document. For that reason I've marked it as a feature