Something went wrong. Try again.
interactive intro to open social at-me.zzstoatzz.io
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263export function initDialogAccessibility() { const definitions = [ ['detail', element => element.classList.contains('visible'), () => document.querySelector('#detail .detail-close')?.click()], ['infoModal', element => element.classList.contains('visible'), () => document.getElementById('closeInfo').click()], ['guestbookModal', element => element.classList.contains('visible'), () => document.getElementById('guestbookClose').click()], ['onboardingOverlay', element => element.hasAttribute('data-active'), null], ].map(([id, isOpen, close]) => ({ element: document.getElementById(id), isOpen, close, open: false, opener: null })); let active; let lastTrigger; const inertStates = new Map(); document.addEventListener('click', event => { lastTrigger = event.target.closest('button, a, [role="button"]'); }, true); const focusable = element => [...element.querySelectorAll('button, a[href], input, textarea, select, summary, [tabindex]')] .filter(node => !node.disabled && node.tabIndex >= 0 && node.getClientRects().length && !node.closest('[inert]')); function sync() { let closed; for (const entry of definitions) { const open = entry.isOpen(entry.element); if (open && !entry.open) { entry.opener = entry.element.contains(document.activeElement) ? lastTrigger : document.activeElement; active = entry; } else if (!open && entry.open && active === entry) { closed = entry; active = null; } entry.open = open; } active ||= definitions.findLast(entry => entry.open); for (const [element, inert] of inertStates) element.inert = inert; inertStates.clear(); if (active) { const dialog = active.element; dialog.setAttribute('role', 'dialog'); dialog.setAttribute('aria-modal', 'true'); if (dialog.id === 'detail') dialog.setAttribute('aria-label', dialog.querySelector('h3')?.textContent || 'Account details'); for (const child of document.body.children) { if (child === dialog || child.classList.contains('detail-scrim') || child.id === 'overlay') continue; inertStates.set(child, child.inert); child.inert = true; } if (!dialog.contains(document.activeElement)) focusable(dialog)[0]?.focus({ preventScroll: true }); } else if (closed?.opener?.isConnected) { closed.opener.focus({ preventScroll: true }); } } for (const { element } of definitions) new MutationObserver(sync).observe(element, { attributes: true, attributeFilter: ['class', 'data-active'] }); document.addEventListener('keydown', event => { if (!active) return; if (event.key === 'Escape' && active.close) { event.preventDefault(); event.stopImmediatePropagation(); active.close(); } if (event.key !== 'Tab') return; const items = focusable(active.element); const index = items.indexOf(document.activeElement); if (!items.length) { event.preventDefault(); return; } if (event.shiftKey ? index <= 0 : index === items.length - 1 || index < 0) { event.preventDefault(); items[event.shiftKey ? items.length - 1 : 0].focus(); } }, true);}