Tema
/
Interneto svetainių kliento dalies kūrimas JS
📖 Teorija

Namų darbas — prieinamas dialogas

Namų darbas — prieinamas dialogas.

  1. Fokuso gaudymas. Sukurk js/a11y.js su trapFocus ir hideBackground. modal.js openModal/closeModal juos naudok.
  2. Testuok KLAVIATŪRA. Atidaryk modalą, spausk Tab daug kartų — fokusas turi suktis viduje, niekada neišeiti į foną. Uždaryk Esc — fokusas grįžta į mygtuką, kuris atidarė.
  3. Atkurk klaidą. Užkomentuok trapFocus. Tab iš modalo dabar nuveda į navigaciją už jo. Užfiksuok (fokuso rėmelis matomas fone). Grąžink.
  4. Fonas skaitytuvams. Su hideBackground patikrink (DevTools → Elements), kad kiti body vaikai gauna aria-hidden="true", kol modalas atviras, ir netenka jo užvėrus.
  5. Žvaigždučių klaviatūra. makeRadioGroup — rodyklėmis judini, Space renki. Patikrink, kad įvertinimą gali nustatyti be pelės.
  6. Toasts + confirm. Pridėk toast.js (laikinas pranešimas) ir confirm.js (patvirtinimas su tuo pačiu trapFocus).

Privalomi testai:

  • Gaudymo testas: Tab sukasi modale; be trapFocus — pabėga.
  • Grąžinimo testas: užvėrus fokusas grįžta į atidariusį mygtuką.
  • Klaviatūros testas: žvaigždučių įvertinimą nustatai rodyklėmis.

Atsiskaitymui: video (naudojant TIK klaviatūrą): (1) fokusas sukasi modale, (2) grįžta užvėrus, (3) žvaigždutės rodyklėmis; + trumpa pastaba, kodėl tai WCAG, ne „gražumas".

Toliau. Turim visą sąsają — bet ji vis dar viename URL. 14 pamokoje pastatysim maršrutizatorių rankomis: hash maršrutai, gilios nuorodos, veikiantis „Atgal" mygtukas ir paieška, sinchronizuota su URL. Ir suprasi, ką tikras maršrutizatorius daro už tave.