Skip Links Solution

[00:00:00]
>> Marcy Sutton: So we're back and we found a bug in the implementation of focus visible which we talked about right before the break. It was my error, all we need to do is in the CSS. So to make sure that the focus being turned off for everyone [LAUGH] problem is fixed by limiting it to when the polyfill actually matches.

[00:00:22]
So we're sort of back-filling support that isn't everywhere, including in Chrome apparently. I don't what setting I have enabled, but I will commit this to the code and push it up. And you can learn more about how to use the focus-visible polyfill on the, let's go pull it up.

[00:00:40]
Focus visible, the web incubator community group is the one that I'm getting the polyfill from. This is on GitHub. And they have usage, and information, and explainers, and all kinds of good stuff. So if you're curious about how to get to that, it's GitHub.com/wicg/focus-visible. Okay, so client-side routing, how did the the routing go for everyone?

[00:01:07]
Sort of an abstract thing, but hopefully we can bake some of the stuff into frameworks to make it a little bit easier. It does help to know what's going on. And I'm gonna pull up the vanilla JS version that I had added. I'll zoom in a little bit.

[00:01:26]
So I added a similar option with a route skip link. And the answer is linked in the slides. But it's pretty similar, I'm adding a lot of the same stuff, like having it skip back to the navigation. Giving an RA label back to navigation. And then in the init route area of this little prototype is where I'm going in a pending list.

[00:01:52]
So in each route element, I can go and find the h1 and I can just insert this little link. So now it's down here next to the H1. And if I tab in here and go to the next route it will do that focused management for me. It's sort of a lo fi way to prototype routing outside of any framework.

[00:02:14]
So that's where that lives. I think, there is a little more logic in the online 36, I don't know what line it was in the vanilla JS version, it was line 26. There's a little bit of logic here to check whether I'm loading a route the first time or whether the users clicking through.

[00:02:38]
And just making sure that if there is one of those route skip links, that's where I'm handling, sending focus to it.
>> Marcy Sutton: Okay, so that's some routing. Think no matter what solution you decide on, the sort of thing to land on is that we have to manage focus in our applications.

[00:02:57]
Because they're client rendered and so I think there will be more evolution with that to come.