Run Sa11y on another checkRoot

[RobLoach]

Is it possible to run Sa11y on a different element?

I tried setting he checkRoot to something like .sa11y-active, and then changing where the class is, and then running...

sa11y.resetAll();
sa11y.checkAll();

But it doesn't seem to see that the active element moved and that there's a new target checkRoot.

[adamchaboryk]

Hi @RobLoach, as of 3.1.4 it will be! Thank you for the suggestion; I can see how this could be beneficial for SPAs.

I will also include the ability to pass in alternative selectors into checkRoot after instantiation. E.g.

const sa11y = new Sa11y.Sa11y({
    checkRoot: '.sa11y-active',
});

setTimeout(() => {
      sa11y.resetAll(false);
      sa11y.checkAll("main", "main"); // Updates checkRoot and readabilityRoot
}, 800);

P.S. if you pass in false into resetAll(false) the panel won't re-paint.

Here's a little demo:

Video alt: Anytime checkAll(); is called, Sa11y will re-check the specified selector within checkRoot, even as the selector moves from one element to another. The blue border represents the current target area.

https://github.com/ryersondmp/sa11y/assets/26335725/2f7bfae8-c51a-49e4-a01f-23451b109119

[RobLoach]

That's great to hear! I'll be able to do some testing on the 3.1.4-dev branch you have up next week :+1:

Is there anything else you'd like help with?

[adamchaboryk]

Great! I'll hold off on releasing 3.1.4 if you'd like to do some testing yourself then. Here's my test page specifically for this: http://localhost:8080/docs/demo/en/traveling-root.html

Is there anything else you'd like help with?

Nothing that I can think of at the moment. Thank you for asking!

[RobLoach]

It worked! Beautifully done.

Set Sa11y to run on .sa11y-active, and then changed where .sa11y-active is targeting, and then ran the the following, and it worked perfectly. Thanks so much, @adamchaboryk!

sa11y.resetAll();
sa11y.checkAll();

[adamchaboryk]

Shipped! Thank you for the suggestion, @RobLoach.