Focus States

[00:00:00]
>> Steve Kinney: So let's just talk for a minute a little bit more about focus states and then we'll kind of get into some of the fun things we can do with some of the advanced selectors as well. But first, let's eat our vegetables the same way we did with borders, rings and outlines.

[00:00:16]
There are a few focus states. Again, this is more CSS is awesome than tailwind specifically. Turns out when you take a document viewer just meant for text from the 90s and everyone iterates on it for 30 years, you have a whole bunch of strange properties and new properties that replace those strange properties, so on and so forth.

[00:00:43]
Those are true of css, thereby they are true of tailwind. And here we are. So I just think it's useful to talk about, so there's focus and we'll talk about each one of them. Then there's also focus visible and then there's also focus within, right? Which is both a deep meditative concept as well as a CSS pseudo selector.

[00:01:08]
These again, are not tailwind specific, but if we're going to be playing with this stuff in tailwind, it makes sense if we can spend a moment to disambiguate these so you're not squinting going like, I don't understand when to use what. Let's talk about it. So focus effectively always shows, right?

[00:01:24]
And so it's true both if I tab onto it with a keyboard or if I click on it. If that's the effect that you want, okay, then good, use focus. But if you're like, yo, I had a hover state for the mouse. But I do want to have some accessibility stuff for tabbing to a button or maybe a particular card on the page.

[00:01:47]
Maybe it's something where it's got a tab index so they can tab to it, right? But for people with a mouse, I don't want to just because they clicked on a card or a table row or whatever, show that border. Focus is not going to do what you want because it's always going to show whenever they've anything that's tab indexable, if they've clicked on it, you're going to get the outline.

[00:02:07]
We don't want that. As you can see here, Focus visible is like the successor, cause people are like, I don't want that. So then because you can't change anything about the web ever, you can only add more junk onto it, right? So I was like, I don't like that focus does that, well, they're like, well, we can't change focus, so we just give you another thing on top of it and focus visible is probably what you thought you wanted.

[00:02:38]
If you didn't want the other thing where hover and click, I don't get the ring but if I tab with the keyboard then I do, right?. And stuff where it is you have the keyboard navigation both for accessibility. For the last few years have worked on Developer Tools UIs for developer tools.

[00:03:00]
Turns out you know who else likes to use the keyboard to get around? Developers and so I use this one a lot as well. But I don't always want it if they are just using mouse. Maybe I want a different set of styles. The other one that is fun is focus within.

[00:03:16]
You'll see that I put these inside of a border. Focus within you can see is on the parent element. We will use all of these. Don't worry, we're just doing the thought process. Part of this focus within is on the parent element which is to say you can reverse engineer this from the words.

[00:03:32]
If anything inside of it is focused then it will get that style right. So if you have this, like in this case, imagine this was a form. I just didn't make it a form because I don't actually wanna submit. If anything inside of this is focused, then the entire you know, then this parent is focused as well.

[00:03:52]
So those are three. They're all CSS properties. You have them all to work with. They have the tailwind variants so that instead of making again another pseudo selector every time, you just simply print prefix how you want the classes applied in those given situations.