Currently Focused Element

[00:00:00]
>> Marcy Sutton: A little hack, just something that I use quite often, especially if I'm testing a web page that I don't have control over. Maybe the source code is all bundled and it's obfuscated and I don't even know how to begin debugging this web page. And I can't figure out where focus is going.

[00:00:18]
This event listener, it's document dot body dot add event listener, and it's a focusin listener. And I can pass it a callback function to get a hold of the document dot active element property. And document dot element will tell you which element in the browser is focused. And this is super helpful because I can just copy, open up the devTools console.

[00:00:42]
I can hit paste. It says undefined but it's in the background there. So now, well, I clicked and it told me I'm focused on the wrapper element of this application. And if I hit Tab, it will log to the console every element that has been focused. And sometimes, that's really helpful, because if you can't see the element or maybe there's an extra tab stop in there, and you're trying to figure out, okay, where am I right now?

[00:01:09]
That tool is a hack that, now that I have used it a few times, I just hit document dot body and hit Tab and console, and my browser will just autocomplete. So a lot of times, once you've run it a couple of times, your browser will just remember it if you start typing, so you don't need to always remember yourself.

[00:01:27]
So that's a handy hack no matter what type of website or web application you're using.
>> Marcy Sutton: And if you're in Safari, which is a really important browser to test on the Mac platform, especially with voiceover, cuz it works better together. There is this setting in the Safari preferences that you have to enable this Press Tab to highlight each item on a webpage.

[00:01:51]
It's kind of a silly setting that I don't understand [LAUGH] why it's like that but this question comes up often enough, that if you are just getting started with Safari, you will want to go and check that, to make sure that you can reach everything that's supposed to be reachable.