Loading…
24
Vent: figuring out accessible focus indicators for a custom dropdown
I built a custom dropdown for a client's site and thought it was done. Then I tested it with a keyboard and screen reader, and the focus just vanished inside the menu. I spent about 4 hours trying to fix it, reading docs and testing different CSS rules. The issue was the container had `overflow: hidden` which was cutting off the focus outline. I had to change the structure to let the outline show and add a clear `:focus-visible` style. Has anyone else run into focus getting trapped by overflow settings?
4 comments
Log in to join the discussion
Log In4 Comments
sean_dixon965mo ago
Ugh, that sounds so frustrating... I've totally been there with overflow hidden eating focus outlines. Did you also have to mess with z-index to get it to sit right after fixing the overflow? It's wild how one little style can break the whole keyboard flow. Those invisible traps are the worst to track down.
9
jessicab705mo ago
Remember when you finally fix the overflow and then the focus outline appears behind the next element? I spent an hour on a modal once where the close button outline was hiding under the header. You get the visual focus back, but it's like playing whack-a-mole with the stacking order.
5
the_piper4mo ago
Yeah the "invisible traps" thing is real. I once had a dropdown where the focus ring was perfectly visible but it was on the wrong layer, so clicking did nothing. Felt like a ghost in the machine.
1