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?

2 comments

2 Comments

sean_dixon9613d 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.

jessicab7013d 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.