Saavutettavuus: dialog, popover ja inert

CSS

HTML

Javascript

/* Koodikoneen Run-painike suorittaa koodin uudelleen, jolloin samat
   käsittelijät liitettäisiin toistamiseen. Elementti korvataan kopiollaan:
   kopio ei peri tapahtumankäsittelijöitä. */
const puhdista = function (elementti) {
  const kopio = elementti.cloneNode(true);
  elementti.replaceWith(kopio);
  return kopio;
};

/* showModal tekee kolme asiaa, jotka jäisivät muuten itse tehtäväksi:
   fokus siirtyy dialogiin ja pysyy siellä, muu dokumentti muuttuu
   toimimattomaksi, ja Esc sulkee dialogin.

Kokeile: avaa dialogi ja yritä liikkua sarkaimella sen ulkopuolelle.
   Sulje se ja katso, mihin fokus palasi. */

const dialogi = document.getElementById("dialogi");
const avaa = puhdista(document.getElementById("avaa"));
const tulos = document.getElementById("tulos");

avaa.addEventListener("click", function () {
  dialogi.showModal();
  console.log("avattiin, fokus:", document.activeElement.textContent.trim());
});

dialogi.addEventListener("close", function () {
  /* returnValue on sen painikkeen value-attribuutti, jolla dialogi
     suljettiin. method="dialog" asettaa sen ilman javascriptia. */
  tulos.textContent = dialogi.returnValue === "" ? "suljettiin Esc-näppäimellä"
                                                 : dialogi.returnValue;

console.log("suljettiin arvolla:", dialogi.returnValue || "(tyhjä)");

/* Fokus palautuu itsestään siihen elementtiin, josta dialogi avattiin */
  console.log("fokus palasi:", document.activeElement.textContent.trim());
});

/* inert on se osa, joka showModalissa tulee valmiina. Jos joudut tekemään
   kerroksen itse, tämä poistaa muun sivun vuorovaikutuksesta: sisältö ei
   saa fokusta, ei reagoi klikkauksiin eikä näy apuvälineille.

Kokeile poistaa kommentit ja aja uudelleen - sen jälkeen mikään
   painike ei toimi. */

// document.getElementById("alue").inert = true;

Kerrokset

Poistetaanko rivi?

CSS

HTML

Javascript

Konsoli