Keeping Parent Visible While Child in :focus

Say we have a <div>.

We only want this div to be visible when it’s hovered, so:

div:hover { 
  opacity: 1; 
}

We need focus styles as well, for accessibility, so:

div:hover,
div:focus { 
  opacity: 1; 
}

But div’s can’t be focused on their own, so we’ll need:

<div tabindex="0">
</div>

There is content in this div. Not just text, but links as well.

<div tabindex="0">
  <p>This little piggy went to market.</p>
  <a href="#market">Go to market</a>
</div>

This is where it gets tricky.

As soon as focus moves from the div to the anchor link inside it, the div is no longer in focus, which leads to this weird and potentially confusing situation:

One solution here is to ensure that the div remains visible when anything inside of it is focused. New CSS has our back here:

div:hover,
div:focus,
div:focus-within { 
  opacity: 1; 
}

GIF working

But browser support isn’t great for :focus-within. If it was perfect, this is all we would need. In fact we wouldn’t even need :focus because :focus-within handles that also.

But until then, we might need JavaScript to help. How you actually approach this depends, but the idea would be something like…

1. When a element comes into focus…
2. If the parent of that element is also focusable, make sure it is visible
3. When the link leaves focus…
4. Whatever you did to make sure the parent visible is reversed

There is a lot to consider here, like which elements you actually want to watch, how to make them visible, and how far up the tree you want to go.

Something like this is a very basic approach:

var link = document.querySelector(".deal-with-focus-with-javascript");

link.addEventListener("focus", function() {
  link.parentElement.classList.add("focus");
});
link.addEventListener("blur", function() {
  link.parentElement.classList.remove("focus");
});

See the Pen :focus-within helpful a11y thing by Chris Coyier (@chriscoyier) on CodePen.