Hmm, it looks like this is failing the tests because it will change the focus anytime Layout.html is created, which basically means anytime we navigate between different pages. In some cases we want the focus to be something else (e.g. you click a toot, you navigate from a timeline view to a thread view, you press the back button, and now you're still focused on the toot).

Is there a way to do this without JavaScript? If not, maybe the most practical thing is to put the focus() in main.js so that it only runs only when the very first page is loaded, and not during in-app navigations.

Oh, I see. I'll look into that.

Another option: I just added a change to LazyPage.html (which loads for all routes) to detect first load versus every subsequent load. We could use the same trick in Layout.html.

I may be best to do this in Layout.html because we don't even need to call querySelectorAll('.container'): you can use ref:node and then this.refs.node in Svelte to get the node of a rendered element.

Thanks for the lead on this. Now, I'll try to make this work!

That's odd; the code looks correct to me but some tests are failing. I'll look into this when I get a chance!

I tried to reproduce those failing tests locally, and it worked (it produced the expected result). So, I'm kinda lost on this one.

Hmmm, I can reproduce using Chrome on Mac with the command:

npx testcafe --hostname localhost chrome --skip-js-errors tests/spec/010-focus.js

Oddly though I can't reproduce manually when using Chrome. It seems there may be some timing issue in a11y-dialog that causes it to think the previous focused element was .container rather than the .play-video-button (when clicking that button).

^ I couldn't push to your branch for some reason, here's my attempted fix

Thank you for the support @nolanlawson!