Hi,
My first question is about this piece of text: “If we didn’t move focus, they could end up in a situation where hitting the tab key sends them back up the the navigation!”. In what situation could this happen?
The other thing is, what’s the reason for including two border-bottom rules for .site-head?
How the invisible, overriden border levels things out optically?
Howdy!
So firstly, the border one was a typo. Thanks for alerting me to that.
To answer your question about tabbing: imagine you were sent to https://my-website.com#main-content, with that #main-content being the <main> element. If you were to press tab, there’s a risk that the first element that would get focus would be right up in the main navigation or site logo. By sending focus to the <main>, we’re also setting the tab index to be more predictable, too.
Another one!
In burger-menu.js there is a const self = this; line. Is this really needed? It is just used on self.processStateChange();, which still works with this in place of self. Am I missing something?
Definitely not required, for sure, but it’s just a personal preference of mine to reference the outer scope like this when in a new scope, like new Proxy. It helps me remember what’s going on when I come to maintain code X months/years down the line 