js/components/modal.js — prieinamas modalas

Kodo stulpelyje — js/components/modal.js. Visas prieinamumas — dviejose funkcijose:

export function openModal(date) {
  overlay.classList.remove('hidden');
  restoreBackground = hideBackground(overlay);              // paslėpk foną
  releaseFocus = trapFocus(overlay, { initialFocus: notesInput });   // įvesk + sulaikyk
}

export function closeModal() {
  overlay.classList.add('hidden');
  restoreBackground?.();
  releaseFocus?.();          // grąžina fokusą mygtukui, kuris atidarė
}

Plius Esc uždaro ir fono (backdrop) paspaudimas uždaro:

overlay.addEventListener('click', (e) => { if (e.target === overlay) closeModal(); });
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && !overlay.classList.contains('hidden')) closeModal();
});

(Fono paspaudimas: e.target === overlay — jei spustelėta pati perdanga, ne modalas viduje.)

Patvirtinimo dialogas (confirm.js) ir pranešimai (toast.js) — tas pats modelis: confirm.js naudoja tą patį trapFocus; toast.js tiesiog prideda laikiną <div>, kuris pats pranyksta po ~2,6 s.

Žvaigždučių klaviatūra (makeRadioGroup iš a11y.js) — rodyklių klavišai judina, Space/Enter renka:

makeRadioGroup(starsEl, { onSelect: (value) => { draftRating = value; renderStars(); } });
// role="radio", tabIndex valdymas, ArrowLeft/Right → kita žvaigždutė

Patikrink (klaviatūra, ne pele!).

1. Atidaryk modalą → fokusas jau viduje (pastabų lauke).
2. Spausk Tab keliskart → fokusas SUKASI modalo viduje, neišeina.
3. Uždaryk (Esc) → fokusas grįžta į „Edit" mygtuką, iš kurio atėjai.
4. Žvaigždutės: rodyklėmis judini, Space parenki — be pelės.

Spąstai (fokusas pabėga). openModal užkomentuok trapFocus eilutę. Atidaryk modalą ir spausk Tab — fokusas iškeliaus į navigacijos nuorodas už modalo (matysi fokuso rėmelį ne ten). Klaviatūros vartotojas dabar „dingo" fone. Grąžink trapFocus — fokusas vėl sukasi viduje. Kiekvienas modalas privalo gaudyti fokusą; be to jis prieinamai sulūžęs, net jei pele atrodo gerai.

modal.js SUKURTI

Sukurk šį failą kataloge js/components/

// The "edit entry" modal. The accessibility work is in openModal/closeModal:
// trap focus on open, restore it on close, hide the background, close on Esc or
// a backdrop click. (Form fields / star rating trimmed to focus on the a11y.)

import { trapFocus, hideBackground } from '../a11y.js';

const overlay = document.getElementById('modal-overlay');
const notesInput = document.getElementById('notes');

let releaseFocus = null;        // returned by trapFocus()
let restoreBackground = null;   // returned by hideBackground()

export function openModal(date) {
  // ...fill the form from the favorite for `date`...
  overlay.classList.remove('hidden');

  // (1) hide the page behind from screen readers, (2) trap focus in the dialog,
  // and remember what to focus when we close.
  restoreBackground = hideBackground(overlay);
  releaseFocus = trapFocus(overlay, { initialFocus: notesInput });
}

export function closeModal() {
  overlay.classList.add('hidden');
  restoreBackground?.();
  releaseFocus?.();             // also restores focus to the button that opened us
  restoreBackground = null;
  releaseFocus = null;
}

export function initModal() {
  // backdrop click closes (but a click INSIDE the modal must not)
  overlay.addEventListener('click', (e) => {
    if (e.target === overlay) closeModal();
  });

  // Escape always closes an open dialog
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && !overlay.classList.contains('hidden')) {
      closeModal();
    }
  });
}