Carousel - Adding keyboard interaction

Bereits jetzt können wir durch das Carousel tabben. Sichtbar ist das allerdings nur zum Teil, denn wir können den Fokus der Slides nicht sehen.

Showing a focus style

Der Fokus wird durch overflow: hidden des .carousel-contents-container verdeckt. Auf overflow: hidden können wir nicht verzichten, weil wir sonst alle Slides sehen würden. Um den Fokus trotzdem anzuzeigen, haben wir zwei Möglichkeiten:

einen inset-box-shadow für jeden fokussierten Slide
einen box-shadow für .carousel-contents-container einrichten, wenn ein Kindelement des Containers im Fokus ist

Wir entscheiden uns für die zweite Option, weil der Fokus damit beim Wechseln der Slides besser aussieht.

Mit der Pseudoklasse :focus-within können wir feststellen, wenn ein Kindelement einen Fokus erhält.

.carousel-contents-container:focus-within {
  box-shadow: 0 0 0 0.5rem lightskyblue;
}

Moving past the carousel

Wenn ein Slider mit einer mehr oder weniger großen Anzahl an Slides auf einer Website eingebaut ist, brauchen wir eine Möglichkeit, den Slider als ganzes zu umgehen. Sonst tabbt man sich blöde.

Dafür setzen wir beim Vorwärts- und Zurück-Button den tabindex auf -1.

<section class="carousel">
  <button class="carousel-button previous-button" hidden tabindex="-1">...</button>
  <div class="carousel-contents-container">...</div>
  <button class="carousel-button next-button" tabindex="-1">...</button>
</section>