Tab order of items not updated when sorted

[rifkegribenes]

Shuffle version

5.0.1

Reproduction Link

http://co-ment.glitch.me/posts

Steps to reproduce

Shuffled items tab order still reflects DOM order even when sorted by different criteria. Click Sort by Popular, then try to tab through grid

What is Expected?

Tab order should reflect current sort order

What is actually happening?

Tab order still reflects DOM order instead of sort order

[Vestride]

Is there a good way to handle this without setting a tab index on each tab-able element? I don't want to use the tab index attribute because that would conflict with a site's tab order.

Another way to accomplish this would be to rearrange the DOM elements within the container (likely create a DocumentFragment, appending each element to it, then appending that to the container). I'm worried about the performance of this though. It would also probably warrant a major version bump.

Any suggestions?

[rifkegribenes]

i ended up using this library to solve the issue in my project: https://github.com/redbubble/responsive-tab-order. it does require that you set a data-tabindex attribute on every focusable element on the page, and then it sets the order dynamically (you can trigger a reset on window resize, on scroll, or whatever is necessary, i set it up to reorder tabs on shuffle).

in order to get it to work i also had to add the data-tabindex attribute to my header and footer elements, and then remove them when navigating away from the page where i'm using shuffle.

it would be cool to have something like this integrated into shuffle for optional use. obviously not everybody uses this for interactive elements (a simple image gallery with no links would not need it). but if there are any focusable elements in the shuffle then it's kind of a mess for keyboard-only users.

or if it's not integrated, then maybe add a note in the docs about accessibility to alert developers that if you use this library you're going to have to work out your own solution to make it WCAG compliant.