Elternteil sichtbar halten, während Kind in :focus ist

Nehmen wir an, wir haben ein <div>.

Wir wollen, dass dieser div *nur* sichtbar ist, wenn er gehovert wird, also

div:hover { 
  opacity: 1; 
}

Wir brauchen auch Fokusstile, für die Barrierefreiheit, also

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

Aber Divs können nicht von sich aus fokussiert werden, also benötigen wir

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

In diesem Div gibt es Inhalt. Nicht nur Text, sondern auch Links.

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

Hier wird es knifflig.

Sobald der Fokus vom Div auf den Ankerlink darin wechselt, ist das Div nicht mehr im Fokus, was zu dieser seltsamen und potenziell verwirrenden Situation führt

Eine Lösung hier ist sicherzustellen, dass das Div sichtbar bleibt, wenn etwas darin fokussiert ist. Neue CSS hat uns hier unterstützt

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

GIF funktioniert

Aber die Browserunterstützung für :focus-within ist nicht großartig. Wenn sie perfekt wäre, wäre das alles, was wir brauchen würden. Tatsächlich bräuchten wir nicht einmal :focus, da :focus-within auch das handhabt.

Aber bis dahin brauchen wir vielleicht JavaScript. Wie Sie das genau angehen, hängt davon ab, aber die Idee wäre so etwas wie…

1. Wenn ein Element in den Fokus gerät…
2. Wenn das übergeordnete Element dieses Elements ebenfalls fokussierbar ist, stellen Sie sicher, dass es sichtbar ist
3. Wenn der Link den Fokus verlässt…
4. Was auch immer Sie getan haben, um das übergeordnete Element sichtbar zu machen, wird rückgängig gemacht

Hier gibt es viel zu beachten, wie z. B. welche Elemente Sie tatsächlich beobachten möchten, wie Sie sie sichtbar machen und wie weit nach oben im Baum Sie gehen möchten.

So etwas ist ein sehr grundlegender Ansatz

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");
});

Siehe den Pen :focus-within helpful a11y thing von Chris Coyier (@chriscoyier) auf CodePen.