Att hålla Förälder Synliga Medan Barn i fokus

0
815

Säga att vi har en <div>.

Vi vill bara att denna div vara synlig när den svävade, så:

div:hover {
opacitet: 1;
}

Vi behöver fokusera stilar också, för tillgänglighet, så:

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

Men div ‘ s kan inte vara fokuserade på sina egna, så vi kommer att behöva:

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

Det är innehållet i div. Inte bara text, men länkar också.

<div tabindex=”0″>
<p>den Här lilla grisen gick till marknaden.</p>
<a href=”#marknaden”>Gå till marknaden</a>
</div>

Det är där det blir knepigt.

Så fort fokus flyttas från div till ankaret länk inuti div-är inte längre i fokus, vilket leder till att denna konstiga och potentiellt förvirrande situation:

I detta exempel :hover visar div, inklusive länk inuti. Fokusera div fungerar också, men så fort du tabb för att flytta fokus till länken, allt försvinner. Länken inne kan få fokus, men det är visuellt dolda eftersom div förälder är visuellt dolda.

En lösning är att se till att div förblir synlig när allt inuti den är fokuserad. Nya CSS har vårt tillbaka här:

div:hover,
div:fokus,
div:fokus-inom {
opacitet: 1;
}

GIF fungerar

Men webbläsare stöder inte är bra för att :fokus-inom. Om det var perfekt, detta är allt som vi skulle behöva. I själva verket skulle vi inte ens behöver :fokus på grund av att :fokus-inom hanterar det också.

Men tills dess, vi kanske måste ha JavaScript för att hjälpa till. Hur du faktiskt närma sig detta beror på, men tanken skulle vara något som…

  1. När en del kommer i fokus…
  2. Om den förälder som för den delen är också tabbindexvärden, se till att den är synlig
  3. När länken lämnar fokus…
  4. Vad du gjorde för att se till moderbolagets synliga reverseras

Det finns en hel del att tänka på här, liksom vilka element som du faktiskt vill titta på, hur man gör dem synliga, och hur långt upp i trädet du vill åka till.

Något som det här är en mycket grundläggande tillvägagångssätt:

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

länk.addEventListener(“fokus”, function() {
länk.parentElement.classList.lägga till(“fokus”);
});
länk.addEventListener(“blur”, function() {
länk.parentElement.classList.ta bort(“fokus”);
});

Se Pennan :fokus-inom hjälpsam a11y sak av Chris Coyier (@chriscoyier) på CodePen.