Å holde Overordnede Synlig når Barnet i :fokus

0
87

Si vi har en <div>.

Vi bare vil dette div til å være synlig når det er overhengende, slik:

div:hover {
dekkevne: 1;
}

Vi må fokusere stiler, så vel, for tilgjengelighet, slik:

div:hover,
div:fokus {
dekkevne: 1;
}

Men div kan ikke være fokusert på sine egne, så trenger vi:

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

Det er innhold i denne div. Ikke bare tekst, men lenker som godt.

<div tabindex=”0″>
<p>Denne lille grisen gikk til markedet.</p>
<a href=”#markedet”>Gå til markedet</a>
</div>

Det er her det blir vanskelig.

Så snart flyttes fokus fra div til ankeret lenken inn i det, div er ikke lenger i fokus, noe som fører til denne rare og potensielt forvirrende situasjon:

I dette eksemplet :hover avslører div, inkludert linken. Fokus div fungerer også, men så snart du tab for å flytte fokus til koblingen, alt forsvinner. Linken kan motta fokus, men det er visuelt skjult fordi div forelder er visuelt skjult.

En løsning her er å sikre at div er synlig når noe inni det er fokusert. Ny CSS har ryggen vår her:

div:hover,
div:fokus,
div:fokus-i {
dekkevne: 1;
}

GIF arbeider

Men leseren støtter ikke er bra for :fokus-innenfor. Hvis det var perfekt, dette er alt vi trenger. Faktisk ville vi ikke engang trenger :fokus fordi :fokus-innenfor håndterer det også.

Men inntil da, kanskje vi må JavaScript for å hjelpe. Hvordan du faktisk tilnærming avhenger dette, men ideen ville være noe sånt…

  1. Når et element kommer i fokus…
  2. Hvis foreldrene i dette elementet er også fokuserbart, sørg for at den er synlig
  3. Når koblingen forlater fokus…
  4. Uansett hva du gjorde for å sørge for at den overordnede synlig er reversert

Det er mye å vurdere her, som hvilke elementer du faktisk ønsker å se, hvordan å gjøre dem synlige, og hvor langt opp i treet du ønsker å gå.

Noe sånt som dette er en svært grunnleggende tilnærming:

var link = – dokument.querySelector(“.avtale-med-fokus-med-javascript”);

link.addEventListener(“fokus”, function() {
link.parentElement.classList.legge til(“fokus”);
});
link.addEventListener(“blur”, function() {
link.parentElement.classList.fjern(“fokus”);
});

Se Penn :fokus-innen nyttig a11y ting av Chris Coyier (@chriscoyier) på CodePen.