I'm having trouble with an issue in my web app where a blue border shows up around form elements like inputs and text areas when I click on them. After some intense debugging, I found that this has to do with the `:focus-visible` pseudo-class that gets applied. I realized I could style it specifically, like `input:focus-visible {outline:1px solid red;}`.
What's puzzling is that this outline appears on one page, but not on any others. When I check the styles in the inspector, I can see `:focus-visible` can be activated manually, so it's like it exists, but not as expected when I interact with the inputs. I created a test page that only has a simple form and an input to rule out any events that might prevent `:focus-visible`, and I confirmed there's no such event affecting it.
Everything appears the same across these pages since they all share similar CSS and JS. I'm at a loss and really need help figuring out why `:focus-visible` isn't triggering on those other pages. Any insights or suggestions would be appreciated!
1 Answer
:focus-visible is a pseudo-class that focuses primarily on accessibility, and it doesn't always trigger with mouse clicks. Generally, it's activated when navigating via keyboard (like using the Tab key). Here are a few things to consider:
- If you click with your mouse, `:focus-visible` won't activate.
- If you use the Tab key, it should show up.
You might also want to check if:
- An element is already focused in the keyboard focus order.
- JavaScript is programmatically focusing an item which can confuse the browser.
For debugging, try these:
- Compare using the mouse vs. Tab key.
- Style both `:focus` and `:focus-visible` to see how they behave differently.
- Look out for places where `preventDefault()` or custom focus handling might be interfering.
Thanks for your input!
I checked both mouse clicks and Tab key usage, and it turns out that it doesn’t get set on those other pages, whether I click or tab. But on the page where it does work, it activates from both interactions.
When I tested the styles, I discovered that while no blue outline showed up initially, when I checked `:focus-visible` in the inspector, it did appear. After I added a style rule for `input:focus-visible`, it worked for both inputs. This leads me to believe it’s being set somehow, but I’m puzzled why the blue border doesn’t appear unless it's checked in the inspector. I guess I need to dig deeper!