Halten Eltern Sichtbar Beim Kind :Fokus

0
21

Sagen wir, wir haben ein <div>.

Wir wollen nur das div zu sehen sein, wenn es schwebte, so:

div:hover {
opacity: 1;
}

Wir brauchen Fokus Stile als auch, aus Gründen der Barrierefreiheit so:

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

Aber div kann nicht fokussiert werden, auf Ihre eigenen, so wir von Ihnen benötigen:

<div tabindex=”0″>
</div>

Es ist der Inhalt in diesem div. Nicht nur text, sondern auch links.

<div tabindex=”0″>
<p>Dieses kleine Schweinchen ging auf den Markt.</p>
<a href=”#Markt”>Markt</a>
</div>

Dies ist, wo es schwierig wird.

Sobald der Fokus verschiebt sich von den div um die Anker-link drin, der div ist nicht mehr im Fokus, die dazu führt, das seltsam und potenziell verwirrende situation:

In diesem Beispiel :hover zeigt das div mit dem link drin. Der Schwerpunkt der div funktioniert auch, aber sobald Sie tab, um den Fokus auf die Verbindung, verschwindet alles. Der link drinnen kann Fokus erhalten, aber es ist optisch versteckt, weil die div Elternteil ist optisch versteckt.

Eine Lösung ist hier, um sicherzustellen, dass das div sichtbar bleibt, wenn alles, was in der it fokussiert ist. Neue CSS hat unsere wieder hier:

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

GIF arbeitet

Aber die browser-Unterstützung ist nicht so toll für :focus-in. Wenn es perfekt war, das ist alles, was wir brauchen. In der Tat, die wir gar nicht benötigen :Ausrichtung, weil :der Fokus-Rahmen-Griffe, die auch.

Aber bis dahin, vielleicht brauchen wir, JavaScript zu helfen. Wie Sie tatsächlich Ansatz dieses hängt, aber die Idee wäre so etwas wie…

  1. Wenn ein element rückt in den Fokus…
  2. Wenn der parent des Elements auch Isoliertes, stellen Sie sicher, es ist sichtbar
  3. Wenn der link hinterlässt Fokus…
  4. Was auch immer Sie getan haben, um sicherzustellen, dass die Eltern sichtbar ist Umgekehrt

Es gibt viel zu beachten hier, wie die Elemente, die Sie wirklich wollen, um zu sehen, wie um Sie sichtbar zu machen, und wie weit oben auf dem Baum, die Sie gehen wollen.

So etwas wie dieses ist ein sehr grundlegender Ansatz:

var link = document.querySelector(“.deal-mit-Schwerpunkt-mit-javascript”);

link.addEventListener(“focus”, function() {
link.parentElement.classList.fügen Sie(“focus”);
});
link.addEventListener(“blur”, function() {
link.parentElement.classList.entfernen(“focus”);
});

Siehe Stift :focus-in hilfreich a11y Sache von Chris Coyier (@chriscoyier) auf CodePen.