Små interaktioner utan ramverk

Mål

Efter kapitlet ska du kunna...

• bygga en liten interaktion med knapp, event och klass
• uppdatera aria-expanded
• visa, dölja eller byta ett synligt läge

Grundmönster

Tre steg återkommer

Meny

Hitta knappen och menyn

const menuButton =
  document.querySelector(".menu-button");

const menu =
  document.querySelector(".menu");

Variablerna pekar på de två HTML-element som ska samarbeta.

Klick

Lyssna på menyknappen

menuButton.addEventListener("click", function () {
  menu.classList.toggle("is-open");
});

Varje klick växlar klassen is-open.

CSS

Klassen styr synligheten

.menu {
  display: none;
}

.menu.is-open {
  display: grid;
}

JavaScript växlar klassen. CSS visar eller döljer menyn.

Interaktiv meny

Visa och dölj

ARIA

Extra information för hjälpmedel

• ARIA står för Accessible Rich Internet Applications.
• ARIA-attribut hjälper exempelvis skärmläsare att förstå en komponents funktion och läge.
• ARIA skapar inte funktionen. JavaScript öppnar och stänger fortfarande menyn.

aria-controls

Vad styr knappen?

<button aria-controls="main-menu">
  Visa meny
</button>

<nav id="main-menu">...</nav>

aria-controls kopplar knappen till elementet vars id har samma värde.

Tillgängligt läge

aria-expanded beskriver läget

<button aria-expanded="false">
  Visa meny
</button>

• false: det styrda innehållet är stängt.
• true: det styrda innehållet är öppet.

Spara läget

toggle returnerar true eller false

const isOpen =
  menu.classList.toggle("is-open");

isOpen blir true när klassen finns efter växlingen.

isOpen blir false när klassen saknas.

Uppdatera attributet

setAttribute

menuButton.setAttribute(
  "aria-expanded",
  String(isOpen)
);

Attributet får textvärdet "true" eller "false".

Interaktiv aria-expanded

Synligt läge och attribut följs åt

Begripligt läge

Ändra även knappens text

Text, attribut och verkligt läge ska säga samma sak.

Aktiv panel

Lägg till en klass

button.addEventListener("click", function () {
  panel.classList.add("active");
});

Till skillnad från toggle() lägger add() bara till klassen.

CSS-panel

Dold tills active finns

.panel {
  display: none;
}

.panel.active {
  display: block;
}

Interaktiv panel

Visa ett aktivt läge

Samma idé

Flera små komponenter

• En meny visas eller döljs.
• En tab-panel får ett aktivt läge.
• Ett filter eller tema byter klass.

Mönstret är fortfarande: hitta, lyssna och ändra.

Utan ramverk

När räcker vanlig JavaScript?

• Interaktionen är liten.
• Komponenten har ett tydligt ansvar.
• Några få element ändrar läge.

Börja enkelt och bygg mer avancerat först när problemet kräver det.

Prova själv

Bygg en menykomponent

1. Skapa en knapp och en meny.
2. Dölj menyn i CSS.
3. Hämta elementen med querySelector.
4. Växla is-open vid klick.
5. Uppdatera knapptext och aria-expanded.

Sammanfattning

Kom ihåg

• Små interaktioner följer samma grundmönster.
• toggle() växlar en klass.
• add() lägger till en klass.
• aria-expanded ska spegla öppet eller stängt läge.
• Knappens text ska vara begriplig i båda lägena.