Het houden van Ouders Zichtbaar, Terwijl het Kind in :focus

0
45

Stel, we hebben een <div>.

Wij willen alleen dit div zichtbaar is wanneer het zweefde, dus:

div:hover {
dekking: 1;
}

We moeten de focus stijlen, zoals de toegankelijkheid, dus:

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

Maar de div ‘ s kan niet worden gericht op hun eigen, dus moeten we:

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

Er is inhoud in deze div. Niet alleen tekst, maar links.

<div tabindex=”0″>
<p>Deze kleine varkentje ging naar de markt.</p>
<a href=”#markt”>Ga naar de markt</a>
</div>

Dit is waar het lastig wordt.

Als u de focus verplaatst van de div om het anker link in de div is niet meer in focus, die leidt tot deze vreemde en mogelijk verwarrende situatie:

In dit voorbeeld :hover onthult de div, met inbegrip van de link in. De nadruk van de div werkt ook, maar zodra u met de tab om de focus te verplaatsen naar de koppeling verdwijnt alles. De link in ontvangt te richten, maar het is visueel verborgen omdat het div ouder is visueel verborgen.

Een oplossing hier is om ervoor te zorgen dat de div zichtbaar blijft wanneer alles binnen is gericht. Nieuwe CSS heeft ons hier terug:

div:hover,
div:focus,
div:focus-in {
dekking: 1;
}

GIF werkt

Maar steun van de browser is niet geweldig voor :focus-in. Als het was perfect, dit is alles wat we nodig zouden hebben. In feite zouden we niet eens nodig :focus, omdat :focus-in verwerkt die ook.

Maar tot dan kunnen we misschien heeft JavaScript nodig om te helpen. Hoe je eigenlijk aanpak hangt dit af, maar het idee zou het iets van…

  1. Wanneer een element komt in beeld…
  2. Als de ouder van dat element is ook te focussen, zorg ervoor dat het zichtbaar is
  3. Wanneer de koppeling bladeren focus…
  4. Wat je ook deed, zorg ervoor dat de bovenliggende zichtbaar is omgekeerd

Er is veel te overwegen, zoals die elementen die u eigenlijk wilt kijken, hoe om ze zichtbaar te maken, en hoe ver van de boom die u wilt gaan.

Iets als dit is een zeer fundamentele aanpak:

var link = document.querySelector(“.deal-met-aandacht-met-javascript”);

de link.addEventListener(“focus”, function() {
de link.parentElement.classList.toevoegen(“focus”);
});
de link.addEventListener(“blur”, function() {
de link.parentElement.classList.verwijderen(“focus”);
});

Zie de Pen :focus-in handige a11y ding door Chris Coyier (@chriscoyier) op CodePen.