js/a11y.js — fokuso gaudymas

Kodo stulpelyje — js/a11y.js su trapFocus ir hideBackground. Tai — pamokos širdis.

trapFocus(container) daro visus tris dalykus:

Įveda fokusą (initialFocus?.focus()) atsidarant.
Sulaiko jį per Tab klausytoją: suranda pirmą ir paskutinį fokusuojamą elementą; Tab ant paskutinio → grįžta į pirmą, Shift+Tab ant pirmo → į paskutinį.
Grąžina fokusą: prieš atidarant įsimena document.activeElement (mygtuką, kuris atidarė), o release() jį .focus().

export function trapFocus(container, { initialFocus } = {}) {
  const previouslyFocused = document.activeElement;      // kas atidarė

  function onKeydown(e) {
    if (e.key !== 'Tab') return;
    const f = getFocusable(container);
    const first = f[0], last = f[f.length - 1];
    if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
    else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
  }

  container.addEventListener('keydown', onKeydown);
  (initialFocus || getFocusable(container)[0])?.focus();  // (1) įvedam

  return function release() {
    container.removeEventListener('keydown', onKeydown);
    previouslyFocused?.focus();                            // (3) grąžinam
  };
}

getFocusable filtruoja el.offsetParent !== null — praleidžia paslėptus elementus (paslėptas mygtukas neturi būti fokuso stotelė).

hideBackground(dialog) uždeda aria-hidden="true" visiems body vaikams, išskyrus dialogą, ir grąžina funkciją atstatymui. Taip ekrano skaitytuvas „nemato" fono.

Patarimas. Grąžinamos release() / restore() funkcijos — švarus modelis: trapFocus ir hideBackground įjungia elgesį ir grąžina būdą jį atšaukti. Modalas tik iškviečia jas atidarydamas ir jų grąžintas funkcijas — užverdamas. Jokių globalių kintamųjų, jokio „ar dar aktyvu".

a11y.js SUKURTI

Sukurk šį failą kataloge js/

// Accessibility helpers.
//
// The bug these fix: right now you can open a modal, press Tab, and your focus
// escapes to the page BEHIND it. A screen-reader or keyboard user then has no
// idea where they are. Every real dialog must:
//   1. move focus INTO the dialog when it opens
//   2. TRAP focus inside it while it's open
//   3. RESTORE focus to whatever opened it when it closes
// This is not optional polish — it's WCAG 2.1 (2.4.3 Focus Order, 2.1.2 No
// Keyboard Trap). Enterprise apps get audited on it.

const FOCUSABLE = [
  'a[href]', 'button:not([disabled])',
  'input:not([disabled]):not([type="hidden"])',
  'select:not([disabled])', 'textarea:not([disabled])',
  '[tabindex]:not([tabindex="-1"])',
].join(', ');

function getFocusable(container) {
  return [...container.querySelectorAll(FOCUSABLE)]
    .filter(el => el.offsetParent !== null);        // skip hidden elements
}

/** Trap focus in a container. Returns release(), which also RESTORES focus. */
export function trapFocus(container, { initialFocus } = {}) {
  const previouslyFocused = document.activeElement;  // remember who opened us

  function onKeydown(e) {
    if (e.key !== 'Tab') return;
    const focusable = getFocusable(container);
    if (focusable.length === 0) return;
    const first = focusable[0];
    const last = focusable[focusable.length - 1];

    if (e.shiftKey && document.activeElement === first) {      // Shift+Tab on first
      e.preventDefault(); last.focus();                        // → wrap to last
    } else if (!e.shiftKey && document.activeElement === last) { // Tab on last
      e.preventDefault(); first.focus();                       // → wrap to first
    }
  }

  container.addEventListener('keydown', onKeydown);
  (initialFocus || getFocusable(container)[0])?.focus();       // (1) move focus IN

  return function release() {
    container.removeEventListener('keydown', onKeydown);
    if (previouslyFocused instanceof HTMLElement) {
      previouslyFocused.focus();                               // (3) RESTORE focus
    }
  };
}

/** Hide the rest of the page from screen readers while a dialog is open. */
export function hideBackground(dialogEl) {
  const siblings = [...document.body.children].filter(el => el !== dialogEl);
  siblings.forEach(el => el.setAttribute('aria-hidden', 'true'));
  return () => siblings.forEach(el => el.removeAttribute('aria-hidden'));
}