Focus state after being active
So, in my website, I added the tabIndex property so I could tab trough the links, and I added some outline while the button was focused. The problem is that when I was clicking them, so when they were active, the outline would appear. To remove it, I made the link:active with no outline and it fixed the problem.
But, now, if I click the link and drag it outside because I dont want to click it anymore (or for some other reason), and then release, the :focus state is still triggered, how can I fix it, I want the outline only when it's actually needed
https://i.imgur.com/3XqYtPe.gif
6 Replies
hard to tell what is going on without any live code.
But, why do you need tabindex? links already are focusable by defailt
1. DON'T USE TAB-INDEX, unless you need yo change the focus behavior of something (not your case, links and buttons are focussable by default)
2. when doing focus styles, if you want your custom style to come up only on keyboard navigation (mostly
tab) you can use :focus-visible that way if an element receives focus by anything that is not a keyboard navigation, the style won't show up (so mouse clicks and JS .focus() won't trigger it)What I think they actually want is "active" class for the page
https://benmyers.dev/blog/semantic-selectors/ I would read this and use
aria-current="page" for the active class selector. Accessible and style in the same blow
or sorry I'm crazy 🤪 cause it still might be valid >.>;;@markboots. @ragnar_oock , I am using tab index because I cant focus on them, maybe it's because I used the <Link /> tag from nextjs but I also tried in a codepen and I couldnt focus it unless I used tabindex
Also I noticed that websites like youtube use tabindex (with values that are always 0 or -1), and they work in my browser (I use vivaldi, chrome based)
And thanks for the
focus-visible tip
They dont focus without tab index on my browser but in others it doesokay, i get now what you mean, when you drag and let lose, indeed it stays focused (also with anchor tags), but that is normal behavior because the element does get focus on mousedown/pointerdown until another element is focused. We could do some JS to prevent that, but I wonder if it really is an issue that needs to be solved
If you really want too, you should listen for pointerdown events on a link and then check for a pointermove to blur
I think something like this should work, but I didnt fully test it
--edit: pen removed
@lko Do you still need help with this? because i will be removing the pen shortly. Make sure you copy or fork the pen if you still want to use it
Oh yes sorry, you can remove it