GroupedVirtuoso sticky 'virtuoso-top-item-list' is last in order within 'virtuoso-scroller'. Possible to change somehow?

[lifter035]

Hi,

I am working on accessibility and GroupedVirtuoso headers also have selection checkboxes to select/deselect the whole group.
Unfortunately top group header which is housed in 'virtuoso-top-item-list' is last in dom so while tabbing through interactive elements that sticky header is actually last in the tab order.

Is there a way to configure this so that 'virtuoso-top-item-list' is first in dom within 'virtuoso-scroller'?

Yes I know I can add tabIndex values to all headers and items within groups (they also have selection checkboxes) but that's not really advisable when doing accessibility.

Thank you in advance,

Eddie

[petyosi]

Unfortunately, no. Not without reworking the measurements logic of the component. It's a mistake I've made when doing the HTML structure, but it's too costly to fix.

[lifter035]

Thanks for the prompt reply Petyo. Will try and work around it

[lifter035]

I actually managed to swap their order using scrollerRef and waiting for both sticky and viewport elements to get rendered.
Everything works as expected with multipage dynamic data and infinite scroll