/* global React, Icon */ // ===== סרגל נגישות (WCAG 2.1 AA / ת"י 5568) ===== // Toggles body classes consumed by CSS in index.html. const { useState: useStateA11y, useEffect: useEffectA11y } = React; const A11Y_KEY = 'mln_a11y'; const AccessibilityBar = () => { const [open, setOpen] = useStateA11y(false); const [settings, setSettings] = useStateA11y(() => { try { return JSON.parse(localStorage.getItem(A11Y_KEY)) || {}; } catch (e) { return {}; } }); // Apply classes to + persist useEffectA11y(() => { const b = document.body; b.classList.toggle('a11y-large-text', !!settings.largeText); b.classList.toggle('a11y-xl-text', !!settings.xlText); b.classList.toggle('a11y-high-contrast', !!settings.highContrast); b.classList.toggle('a11y-readable-font', !!settings.readableFont); b.classList.toggle('a11y-spacing', !!settings.spacing); b.classList.toggle('a11y-links', !!settings.highlightLinks); b.classList.toggle('a11y-pause-motion', !!settings.pauseMotion); try { localStorage.setItem(A11Y_KEY, JSON.stringify(settings)); } catch (e) {} }, [settings]); const toggle = (key) => setSettings(s => ({ ...s, [key]: !s[key] })); const reset = () => setSettings({}); const items = [ { key: 'largeText', label: 'הגדלת טקסט', icon: 'plus' }, { key: 'xlText', label: 'טקסט גדול מאוד', icon: 'plus' }, { key: 'highContrast', label: 'ניגודיות גבוהה', icon: 'eye' }, { key: 'readableFont', label: 'גופן קריא', icon: 'edit' }, { key: 'spacing', label: 'ריווח שורות', icon: 'menu' }, { key: 'highlightLinks', label: 'הדגשת קישורים', icon: 'arrowRight' }, { key: 'pauseMotion', label: 'עצירת אנימציות', icon: 'x' }, ]; return ( {/* Toggle button — fixed bottom-start corner */} {/* Panel */} {open && ( )} ); }; window.AccessibilityBar = AccessibilityBar;