ngp-accessibility 1.0.2 → 1.0.5

package/dist/index.esm.js

@@ -2,46 +2,81 @@ import React, { createContext, useState, useEffect, useContext } from 'react';
 
 const translations = {
     en: {
-        increaseText: 'Increase Text',
-        decreaseText: 'Decrease Text',
-        highContrast: 'High Contrast',
-        negativeContrast: 'Negative Contrast',
-        lightBackground: 'Light Background',
-        underlineLinks: 'Underline Links',
-        readableFont: 'Readable Font',
-        voiceCommand: 'Voice Command',
+        increaseText: "Increase Text",
+        decreaseText: "Decrease Text",
+        textMagnifier: "Text Magnifier",
+        highContrast: "High Contrast",
+        negativeContrast: "Negative Contrast",
+        lightBackground: "Light Background",
+        underlineLinks: "Underline Links",
+        highlightTitles: "Highlight Titles",
+        readableFont: "Readable Font",
+        pauseAnimations: "Pause Animations",
+        readingGuide: "Reading Guide",
+        voiceCommand: "Voice Command",
     },
     tl: {
-        increaseText: 'Palakihin ang Teksto',
-        decreaseText: 'Paliitin ang Teksto',
-        highContrast: 'Mataas na Contrast',
-        negativeContrast: 'Negatibong Contrast',
-        lightBackground: 'Maliwanag na Background',
-        underlineLinks: 'May Guhit na Links',
-        readableFont: 'Madaling Basahin na Font',
-        voiceCommand: 'Voice Command',
+        increaseText: "Palakihin ang Teksto",
+        decreaseText: "Paliitin ang Teksto",
+        textMagnifier: "Text Magnifier",
+        highContrast: "Mataas na Contrast",
+        negativeContrast: "Negatibong Contrast",
+        lightBackground: "Maliwanag na Background",
+        underlineLinks: "May Guhit na Links",
+        highlightTitles: "I-highlight ang Mga Pamagat",
+        readableFont: "Madaling Basahin na Font",
+        pauseAnimations: "I-pause ang mga Animation",
+        readingGuide: "Reading Guide",
+        voiceCommand: "Voice Command",
     },
     ceb: {
-        increaseText: 'Padak-on ang Teksto',
-        decreaseText: 'Pagamay-on ang Teksto',
-        highContrast: 'Taas nga Contrast',
-        negativeContrast: 'Negatibo nga Contrast',
-        lightBackground: 'Hayag nga Background',
-        underlineLinks: 'Linya sa Ubos sa Links',
-        readableFont: 'Sayon Basahon nga Font',
-        voiceCommand: 'Voice Command',
+        increaseText: "Padak-on ang Teksto",
+        decreaseText: "Pagamay-on ang Teksto",
+        textMagnifier: "Text Magnifier",
+        highContrast: "Taas nga Contrast",
+        negativeContrast: "Negatibo nga Contrast",
+        lightBackground: "Hayag nga Background",
+        underlineLinks: "Linya sa Ubos sa Links",
+        highlightTitles: "I-highlight ang mga Ulohan",
+        readableFont: "Sayon Basahon nga Font",
+        pauseAnimations: "Ihunong ang mga Animation",
+        readingGuide: "Reading Guide",
+        voiceCommand: "Voice Command",
     },
 };
 
+const normalizeMagnifierText = (value) => value.replace(/\s+/g, " ").trim();
+const magnifierSelector = "p, li, button, h1, h2, h3, h4, h5, h6, [role=heading]";
+const getMagnifierElement = (target) => {
+    if (!(target instanceof HTMLElement))
+        return null;
+    if (target.closest(".a11y-root"))
+        return null;
+    const element = target.closest(magnifierSelector);
+    return element instanceof HTMLElement ? element : null;
+};
+const getMagnifierText = (target) => {
+    const element = getMagnifierElement(target);
+    if (!element)
+        return "";
+    const ariaLabel = normalizeMagnifierText(element.getAttribute("aria-label") || "");
+    if (ariaLabel)
+        return ariaLabel;
+    return normalizeMagnifierText(element.innerText || element.textContent || "");
+};
 const AccessibilityContext = createContext(undefined);
-const AccessibilityProvider = ({ children, translations: customTranslations }) => {
+const AccessibilityProvider = ({ children, translations: customTranslations, }) => {
     const [state, setState] = useState({
-        language: 'en',
+        language: "en",
         textSize: 100,
+        textMagnifier: false,
+        pauseAnimations: false,
+        readingGuide: false,
         highContrast: false,
         negativeContrast: false,
         lightBackground: false,
         underlineLinks: false,
+        highlightTitles: false,
         readableFont: false,
         voiceEnabled: false,
     });
@@ -49,57 +84,258 @@ const AccessibilityProvider = ({ children, translations: customTranslations }) =
     useEffect(() => {
         const root = document.documentElement;
         root.style.fontSize = `${state.textSize}%`;
-        root.classList.toggle('high-contrast', state.highContrast);
-        root.classList.toggle('negative-contrast', state.negativeContrast);
-        root.classList.toggle('light-background', state.lightBackground);
-        root.classList.toggle('underline-links', state.underlineLinks);
-        root.classList.toggle('readable-font', state.readableFont);
+        root.classList.toggle("high-contrast", state.highContrast);
+        root.classList.toggle("negative-contrast", state.negativeContrast);
+        root.classList.toggle("light-background", state.lightBackground);
+        root.classList.toggle("underline-links", state.underlineLinks);
+        root.classList.toggle("highlight-titles", state.highlightTitles);
+        root.classList.toggle("readable-font", state.readableFont);
+        root.classList.toggle("pause-animations", state.pauseAnimations);
     }, [state]);
     useEffect(() => {
-        if (!state.voiceEnabled || !('webkitSpeechRecognition' in window || 'SpeechRecognition' in window))
+        if (!state.readingGuide)
+            return;
+        const guide = document.createElement("div");
+        guide.className = "a11y-reading-guide";
+        guide.setAttribute("aria-hidden", "true");
+        guide.innerHTML = `
+      <div class="a11y-reading-guide-top"></div>
+      <div class="a11y-reading-guide-focus"></div>
+      <div class="a11y-reading-guide-line"></div>
+      <div class="a11y-reading-guide-bottom"></div>
+    `;
+        document.body.appendChild(guide);
+        const topMask = guide.querySelector(".a11y-reading-guide-top");
+        const focusBand = guide.querySelector(".a11y-reading-guide-focus");
+        const focusLine = guide.querySelector(".a11y-reading-guide-line");
+        const bottomMask = guide.querySelector(".a11y-reading-guide-bottom");
+        const bandHeight = 72;
+        const halfBandHeight = bandHeight / 2;
+        const updateGuide = (clientY) => {
+            const safeY = Math.min(Math.max(halfBandHeight + 12, clientY), window.innerHeight - halfBandHeight - 12);
+            const top = Math.max(0, safeY - halfBandHeight);
+            const bottom = Math.min(window.innerHeight, safeY + halfBandHeight);
+            topMask.style.height = `${top}px`;
+            focusBand.style.top = `${top}px`;
+            focusBand.style.height = `${bottom - top}px`;
+            focusLine.style.top = `${safeY}px`;
+            bottomMask.style.top = `${bottom}px`;
+            bottomMask.style.height = `${Math.max(0, window.innerHeight - bottom)}px`;
+        };
+        const resetGuide = () => updateGuide(window.innerHeight / 2);
+        const handleMouseMove = (event) => updateGuide(event.clientY);
+        const handleTouchStart = (event) => {
+            const touch = event.touches[0];
+            if (touch)
+                updateGuide(touch.clientY);
+        };
+        const handleTouchMove = (event) => {
+            const touch = event.touches[0];
+            if (touch)
+                updateGuide(touch.clientY);
+        };
+        resetGuide();
+        document.addEventListener("mousemove", handleMouseMove, true);
+        document.addEventListener("touchstart", handleTouchStart, true);
+        document.addEventListener("touchmove", handleTouchMove, true);
+        window.addEventListener("resize", resetGuide);
+        return () => {
+            document.removeEventListener("mousemove", handleMouseMove, true);
+            document.removeEventListener("touchstart", handleTouchStart, true);
+            document.removeEventListener("touchmove", handleTouchMove, true);
+            window.removeEventListener("resize", resetGuide);
+            guide.remove();
+        };
+    }, [state.readingGuide]);
+    useEffect(() => {
+        if (!state.textMagnifier)
+            return;
+        const tooltip = document.createElement("div");
+        tooltip.className = "a11y-text-magnifier-tooltip";
+        tooltip.setAttribute("aria-hidden", "true");
+        document.body.appendChild(tooltip);
+        const hideTooltip = () => {
+            tooltip.removeAttribute("data-visible");
+            tooltip.textContent = "";
+        };
+        const showTooltip = (text) => {
+            tooltip.textContent = text;
+            tooltip.setAttribute("data-visible", "true");
+        };
+        const updateTooltipPosition = (clientX, clientY) => {
+            const tooltipWidth = tooltip.offsetWidth || 320;
+            const tooltipHeight = tooltip.offsetHeight || 56;
+            const left = Math.min(Math.max(12, clientX + 18), window.innerWidth - tooltipWidth - 12);
+            const top = clientY + tooltipHeight + 18 > window.innerHeight
+                ? Math.max(12, clientY - tooltipHeight - 18)
+                : clientY + 18;
+            tooltip.style.left = `${left}px`;
+            tooltip.style.top = `${top}px`;
+        };
+        const handleMouseMove = (event) => {
+            const text = getMagnifierText(event.target);
+            if (!text) {
+                hideTooltip();
+                return;
+            }
+            showTooltip(text);
+            updateTooltipPosition(event.clientX, event.clientY);
+        };
+        let touchTimer = null;
+        let activeTouchId = null;
+        let activeText = "";
+        let pressPoint = null;
+        const clearTouchTimer = () => {
+            if (touchTimer !== null) {
+                window.clearTimeout(touchTimer);
+                touchTimer = null;
+            }
+        };
+        const resetTouchState = () => {
+            clearTouchTimer();
+            activeTouchId = null;
+            activeText = "";
+            pressPoint = null;
+            hideTooltip();
+        };
+        const getTrackedTouch = (touches) => {
+            if (activeTouchId === null)
+                return null;
+            for (const touch of Array.from(touches)) {
+                if (touch.identifier === activeTouchId)
+                    return touch;
+            }
+            return null;
+        };
+        const handleTouchStart = (event) => {
+            const touch = event.changedTouches[0];
+            if (!touch)
+                return;
+            const text = getMagnifierText(event.target);
+            if (!text) {
+                resetTouchState();
+                return;
+            }
+            clearTouchTimer();
+            activeTouchId = touch.identifier;
+            activeText = text;
+            pressPoint = { x: touch.clientX, y: touch.clientY };
+            touchTimer = window.setTimeout(() => {
+                showTooltip(activeText);
+                updateTooltipPosition(touch.clientX, touch.clientY);
+                touchTimer = null;
+            }, 450);
+        };
+        const handleTouchMove = (event) => {
+            const touch = getTrackedTouch(event.touches);
+            if (!touch)
+                return;
+            if (!tooltip.hasAttribute("data-visible")) {
+                if (pressPoint &&
+                    (Math.abs(touch.clientX - pressPoint.x) > 10 ||
+                        Math.abs(touch.clientY - pressPoint.y) > 10)) {
+                    resetTouchState();
+                }
+                return;
+            }
+            updateTooltipPosition(touch.clientX, touch.clientY);
+        };
+        const handleTouchEnd = () => resetTouchState();
+        const handleTouchCancel = () => resetTouchState();
+        const handlePointerLeave = () => hideTooltip();
+        document.addEventListener("mousemove", handleMouseMove, true);
+        document.addEventListener("touchstart", handleTouchStart, true);
+        document.addEventListener("touchmove", handleTouchMove, true);
+        document.addEventListener("touchend", handleTouchEnd, true);
+        document.addEventListener("touchcancel", handleTouchCancel, true);
+        document.addEventListener("scroll", hideTooltip, true);
+        window.addEventListener("blur", handlePointerLeave);
+        return () => {
+            document.removeEventListener("mousemove", handleMouseMove, true);
+            document.removeEventListener("touchstart", handleTouchStart, true);
+            document.removeEventListener("touchmove", handleTouchMove, true);
+            document.removeEventListener("touchend", handleTouchEnd, true);
+            document.removeEventListener("touchcancel", handleTouchCancel, true);
+            document.removeEventListener("scroll", hideTooltip, true);
+            window.removeEventListener("blur", handlePointerLeave);
+            clearTouchTimer();
+            tooltip.remove();
+        };
+    }, [state.textMagnifier]);
+    useEffect(() => {
+        if (!state.voiceEnabled ||
+            !("webkitSpeechRecognition" in window || "SpeechRecognition" in window))
             return;
-        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+        const SpeechRecognition = window.SpeechRecognition ||
+            window.webkitSpeechRecognition;
         const recognition = new SpeechRecognition();
         recognition.continuous = true;
-        recognition.lang = state.language === 'tl' ? 'tl-PH' : state.language === 'ceb' ? 'ceb-PH' : 'en-US';
+        recognition.lang =
+            state.language === "tl"
+                ? "tl-PH"
+                : state.language === "ceb"
+                    ? "ceb-PH"
+                    : "en-US";
         recognition.onresult = (event) => {
             const transcript = event.results[event.results.length - 1][0].transcript.toLowerCase();
-            if (transcript.includes('increase text') || transcript.includes('palakihin'))
+            if (transcript.includes("increase text") ||
+                transcript.includes("palakihin"))
                 increaseText();
-            if (transcript.includes('decrease text') || transcript.includes('paliitin'))
+            if (transcript.includes("decrease text") ||
+                transcript.includes("paliitin"))
                 decreaseText();
-            if (transcript.includes('high contrast') || transcript.includes('mataas'))
+            if (transcript.includes("high contrast") || transcript.includes("mataas"))
                 toggleHighContrast();
-            if (transcript.includes('negative contrast') || transcript.includes('negatibo'))
+            if (transcript.includes("negative contrast") ||
+                transcript.includes("negatibo"))
                 toggleNegativeContrast();
-            if (transcript.includes('light background') || transcript.includes('maliwanag'))
+            if (transcript.includes("light background") ||
+                transcript.includes("maliwanag"))
                 toggleLightBackground();
-            if (transcript.includes('underline') || transcript.includes('guhit'))
+            if (transcript.includes("underline") || transcript.includes("guhit"))
                 toggleUnderlineLinks();
-            if (transcript.includes('readable font') || transcript.includes('madaling'))
+            if (transcript.includes("highlight titles") ||
+                transcript.includes("title highlight"))
+                toggleHighlightTitles();
+            if (transcript.includes("pause animations") ||
+                transcript.includes("stop animations"))
+                togglePauseAnimations();
+            if (transcript.includes("reading guide") ||
+                transcript.includes("reading line"))
+                toggleReadingGuide();
+            if (transcript.includes("readable font") ||
+                transcript.includes("madaling"))
                 toggleReadableFont();
         };
         recognition.start();
         return () => recognition.stop();
     }, [state.voiceEnabled, state.language]);
-    const setLanguage = (lang) => setState(s => (Object.assign(Object.assign({}, s), { language: lang })));
-    const increaseText = () => setState(s => (Object.assign(Object.assign({}, s), { textSize: Math.min(s.textSize + 10, 200) })));
-    const decreaseText = () => setState(s => (Object.assign(Object.assign({}, s), { textSize: Math.max(s.textSize - 10, 80) })));
-    const toggleHighContrast = () => setState(s => (Object.assign(Object.assign({}, s), { highContrast: !s.highContrast, negativeContrast: false })));
-    const toggleNegativeContrast = () => setState(s => (Object.assign(Object.assign({}, s), { negativeContrast: !s.negativeContrast, highContrast: false })));
-    const toggleLightBackground = () => setState(s => (Object.assign(Object.assign({}, s), { lightBackground: !s.lightBackground })));
-    const toggleUnderlineLinks = () => setState(s => (Object.assign(Object.assign({}, s), { underlineLinks: !s.underlineLinks })));
-    const toggleReadableFont = () => setState(s => (Object.assign(Object.assign({}, s), { readableFont: !s.readableFont })));
-    const toggleVoice = () => setState(s => (Object.assign(Object.assign({}, s), { voiceEnabled: !s.voiceEnabled })));
+    const setLanguage = (lang) => setState((s) => (Object.assign(Object.assign({}, s), { language: lang })));
+    const increaseText = () => setState((s) => (Object.assign(Object.assign({}, s), { textSize: Math.min(s.textSize + 10, 200) })));
+    const decreaseText = () => setState((s) => (Object.assign(Object.assign({}, s), { textSize: Math.max(s.textSize - 10, 80) })));
+    const toggleTextMagnifier = () => setState((s) => (Object.assign(Object.assign({}, s), { textMagnifier: !s.textMagnifier })));
+    const togglePauseAnimations = () => setState((s) => (Object.assign(Object.assign({}, s), { pauseAnimations: !s.pauseAnimations })));
+    const toggleReadingGuide = () => setState((s) => (Object.assign(Object.assign({}, s), { readingGuide: !s.readingGuide })));
+    const toggleHighContrast = () => setState((s) => (Object.assign(Object.assign({}, s), { highContrast: !s.highContrast, negativeContrast: false })));
+    const toggleNegativeContrast = () => setState((s) => (Object.assign(Object.assign({}, s), { negativeContrast: !s.negativeContrast, highContrast: false })));
+    const toggleLightBackground = () => setState((s) => (Object.assign(Object.assign({}, s), { lightBackground: !s.lightBackground })));
+    const toggleUnderlineLinks = () => setState((s) => (Object.assign(Object.assign({}, s), { underlineLinks: !s.underlineLinks })));
+    const toggleHighlightTitles = () => setState((s) => (Object.assign(Object.assign({}, s), { highlightTitles: !s.highlightTitles })));
+    const toggleReadableFont = () => setState((s) => (Object.assign(Object.assign({}, s), { readableFont: !s.readableFont })));
+    const toggleVoice = () => setState((s) => (Object.assign(Object.assign({}, s), { voiceEnabled: !s.voiceEnabled })));
     const translate = (key) => translations[state.language][key];
     const t = (key) => { var _a; return ((_a = allTranslations[state.language]) === null || _a === void 0 ? void 0 : _a[key]) || key; };
     return (React.createElement(AccessibilityContext.Provider, { value: Object.assign(Object.assign({}, state), { setLanguage,
             increaseText,
             decreaseText,
+            toggleTextMagnifier,
+            togglePauseAnimations,
+            toggleReadingGuide,
             toggleHighContrast,
             toggleNegativeContrast,
             toggleLightBackground,
             toggleUnderlineLinks,
+            toggleHighlightTitles,
             toggleReadableFont,
             toggleVoice,
             translate,
@@ -108,61 +344,91 @@ const AccessibilityProvider = ({ children, translations: customTranslations }) =
 const useAccessibility = () => {
     const context = useContext(AccessibilityContext);
     if (!context)
-        throw new Error('useAccessibility must be used within AccessibilityProvider');
+        throw new Error("useAccessibility must be used within AccessibilityProvider");
     return context;
 };
 
-const AccessibilityToolbar = () => {
-    const { language, setLanguage, increaseText, decreaseText, toggleHighContrast, toggleNegativeContrast, toggleLightBackground, toggleUnderlineLinks, toggleReadableFont, toggleVoice, translate, highContrast, negativeContrast, lightBackground, underlineLinks, readableFont, voiceEnabled, } = useAccessibility();
-    return (React.createElement("div", { className: "accessibility-toolbar" },
-        React.createElement("select", { value: language, onChange: (e) => setLanguage(e.target.value) },
+const cn$1 = (...parts) => parts.filter(Boolean).join(" ");
+const AccessibilityToolbar = ({ className, style, classes, }) => {
+    const { language, setLanguage, increaseText, decreaseText, toggleTextMagnifier, togglePauseAnimations, toggleReadingGuide, toggleHighContrast, toggleNegativeContrast, toggleLightBackground, toggleUnderlineLinks, toggleHighlightTitles, toggleReadableFont, toggleVoice, translate, textMagnifier, pauseAnimations, readingGuide, highContrast, negativeContrast, lightBackground, underlineLinks, highlightTitles, readableFont, voiceEnabled, } = useAccessibility();
+    return (React.createElement("div", { className: cn$1("accessibility-toolbar", classes === null || classes === void 0 ? void 0 : classes.root, className), style: style },
+        React.createElement("select", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.select), value: language, onChange: (e) => setLanguage(e.target.value) },
             React.createElement("option", { value: "en" }, "English"),
             React.createElement("option", { value: "tl" }, "Tagalog"),
             React.createElement("option", { value: "ceb" }, "Cebuano")),
-        React.createElement("button", { onClick: increaseText },
+        React.createElement("button", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.button), onClick: increaseText },
             "+ ",
-            translate('increaseText')),
-        React.createElement("button", { onClick: decreaseText },
+            translate("increaseText")),
+        React.createElement("button", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.button), onClick: decreaseText },
             "- ",
-            translate('decreaseText')),
-        React.createElement("button", { onClick: toggleHighContrast, className: highContrast ? 'active' : '' }, translate('highContrast')),
-        React.createElement("button", { onClick: toggleNegativeContrast, className: negativeContrast ? 'active' : '' }, translate('negativeContrast')),
-        React.createElement("button", { onClick: toggleLightBackground, className: lightBackground ? 'active' : '' }, translate('lightBackground')),
-        React.createElement("button", { onClick: toggleUnderlineLinks, className: underlineLinks ? 'active' : '' }, translate('underlineLinks')),
-        React.createElement("button", { onClick: toggleReadableFont, className: readableFont ? 'active' : '' }, translate('readableFont')),
-        React.createElement("button", { onClick: toggleVoice, className: voiceEnabled ? 'active' : '' },
+            translate("decreaseText")),
+        React.createElement("button", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.button, textMagnifier && "active", textMagnifier && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": textMagnifier, onClick: toggleTextMagnifier }, translate("textMagnifier")),
+        React.createElement("button", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.button, highContrast && "active", highContrast && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": highContrast, onClick: toggleHighContrast }, translate("highContrast")),
+        React.createElement("button", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.button, negativeContrast && "active", negativeContrast && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": negativeContrast, onClick: toggleNegativeContrast }, translate("negativeContrast")),
+        React.createElement("button", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.button, lightBackground && "active", lightBackground && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": lightBackground, onClick: toggleLightBackground }, translate("lightBackground")),
+        React.createElement("button", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.button, underlineLinks && "active", underlineLinks && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": underlineLinks, onClick: toggleUnderlineLinks }, translate("underlineLinks")),
+        React.createElement("button", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.button, highlightTitles && "active", highlightTitles && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": highlightTitles, onClick: toggleHighlightTitles }, translate("highlightTitles")),
+        React.createElement("button", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.button, readableFont && "active", readableFont && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": readableFont, onClick: toggleReadableFont }, translate("readableFont")),
+        React.createElement("button", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.button, pauseAnimations && "active", pauseAnimations && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": pauseAnimations, onClick: togglePauseAnimations }, translate("pauseAnimations")),
+        React.createElement("button", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.button, readingGuide && "active", readingGuide && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": readingGuide, onClick: toggleReadingGuide }, translate("readingGuide")),
+        React.createElement("button", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.button, classes === null || classes === void 0 ? void 0 : classes.voiceButton, voiceEnabled && "active", voiceEnabled && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": voiceEnabled, onClick: toggleVoice },
             "\uD83C\uDFA4 ",
-            translate('voiceCommand'))));
+            translate("voiceCommand"))));
 };
 
-const AccessibilityDropdown = () => {
+const cn = (...parts) => parts.filter(Boolean).join(" ");
+const AccessibilityDropdown = ({ className, style, classes, triggerLabel = "♿ Accessibility", renderTrigger, }) => {
     const [isOpen, setIsOpen] = useState(false);
-    const { language, setLanguage, increaseText, decreaseText, toggleHighContrast, toggleNegativeContrast, toggleLightBackground, toggleUnderlineLinks, toggleReadableFont, toggleVoice, translate, highContrast, negativeContrast, lightBackground, underlineLinks, readableFont, voiceEnabled, } = useAccessibility();
-    return (React.createElement("div", { className: "accessibility-dropdown" },
-        React.createElement("button", { className: "accessibility-dropdown-toggle", onClick: () => setIsOpen(!isOpen) }, "\u267F Accessibility"),
-        isOpen && (React.createElement("div", { className: "accessibility-dropdown-menu" },
-            React.createElement("div", { className: "accessibility-dropdown-section" },
-                React.createElement("label", null, "Language:"),
-                React.createElement("select", { value: language, onChange: (e) => setLanguage(e.target.value) },
+    const { language, setLanguage, textSize, increaseText, decreaseText, toggleTextMagnifier, togglePauseAnimations, toggleReadingGuide, toggleHighContrast, toggleNegativeContrast, toggleLightBackground, toggleUnderlineLinks, toggleHighlightTitles, toggleReadableFont, toggleVoice, translate, textMagnifier, pauseAnimations, readingGuide, highContrast, negativeContrast, lightBackground, underlineLinks, highlightTitles, readableFont, voiceEnabled, } = useAccessibility();
+    const toggle = () => setIsOpen(!isOpen);
+    const closePanel = () => setIsOpen(false);
+    const textScaleDelta = textSize - 100;
+    const textScaleLabel = textScaleDelta === 0
+        ? "Default"
+        : `${textScaleDelta > 0 ? "+" : ""}${textScaleDelta}%`;
+    return (React.createElement("div", { className: cn("a11y-root", classes === null || classes === void 0 ? void 0 : classes.root, className), style: style },
+        renderTrigger ? (renderTrigger({
+            isOpen,
+            toggle,
+            className: cn("a11y-trigger", classes === null || classes === void 0 ? void 0 : classes.trigger),
+        })) : (React.createElement("button", { className: cn("a11y-trigger", classes === null || classes === void 0 ? void 0 : classes.trigger), onClick: toggle }, triggerLabel)),
+        isOpen && (React.createElement("div", { className: cn("a11y-panel", classes === null || classes === void 0 ? void 0 : classes.panel) },
+            React.createElement("div", { className: cn("a11y-panel-header", classes === null || classes === void 0 ? void 0 : classes.panelHeader) },
+                React.createElement("div", { className: "a11y-panel-heading" },
+                    React.createElement("span", { className: "a11y-panel-eyebrow" }, "NGP"),
+                    React.createElement("label", { className: "a11y-panel-title" }, "Accessibility Options")),
+                React.createElement("button", { type: "button", className: cn("a11y-panel-close", classes === null || classes === void 0 ? void 0 : classes.closeButton), onClick: closePanel, "aria-label": "Close accessibility panel" }, "\u00D7")),
+            React.createElement("div", { className: "a11y-language" },
+                React.createElement("label", { htmlFor: "a11y-language-select" }, "Language"),
+                React.createElement("select", { id: "a11y-language-select", value: language, onChange: (e) => setLanguage(e.target.value) },
                     React.createElement("option", { value: "en" }, "English"),
                     React.createElement("option", { value: "tl" }, "Tagalog"),
                     React.createElement("option", { value: "ceb" }, "Cebuano"))),
-            React.createElement("div", { className: "accessibility-dropdown-section" },
-                React.createElement("button", { onClick: increaseText },
-                    "+ ",
-                    translate('increaseText')),
-                React.createElement("button", { onClick: decreaseText },
-                    "- ",
-                    translate('decreaseText'))),
-            React.createElement("div", { className: "accessibility-dropdown-section" },
-                React.createElement("button", { onClick: toggleHighContrast, className: highContrast ? 'active' : '' }, translate('highContrast')),
-                React.createElement("button", { onClick: toggleNegativeContrast, className: negativeContrast ? 'active' : '' }, translate('negativeContrast')),
-                React.createElement("button", { onClick: toggleLightBackground, className: lightBackground ? 'active' : '' }, translate('lightBackground')),
-                React.createElement("button", { onClick: toggleUnderlineLinks, className: underlineLinks ? 'active' : '' }, translate('underlineLinks')),
-                React.createElement("button", { onClick: toggleReadableFont, className: readableFont ? 'active' : '' }, translate('readableFont')),
-                React.createElement("button", { onClick: toggleVoice, className: voiceEnabled ? 'active' : '' },
-                    "\uD83C\uDFA4 ",
-                    translate('voiceCommand')))))));
+            React.createElement("section", { className: "a11y-section" },
+                React.createElement("h3", { className: "a11y-section-title" }, "Content Adjustments"),
+                React.createElement("div", { className: "a11y-card" },
+                    React.createElement("span", { className: "a11y-card-title" }, "Content Scaling"),
+                    React.createElement("div", { className: "a11y-stepper" },
+                        React.createElement("button", { onClick: decreaseText }, "\u2212"),
+                        React.createElement("span", { className: "a11y-stepper-value" }, textScaleLabel),
+                        React.createElement("button", { onClick: increaseText }, "+"))),
+                React.createElement("div", { className: "a11y-grid" },
+                    React.createElement("button", { className: cn("a11y-card", textMagnifier && "active"), onClick: toggleTextMagnifier }, translate("textMagnifier")),
+                    React.createElement("button", { className: cn("a11y-card", readableFont && "active"), onClick: toggleReadableFont }, "Readable Font"),
+                    React.createElement("button", { className: cn("a11y-card", underlineLinks && "active"), onClick: toggleUnderlineLinks }, "Highlight Links"),
+                    React.createElement("button", { className: cn("a11y-card", highlightTitles && "active"), onClick: toggleHighlightTitles }, "Highlight Titles"))),
+            React.createElement("section", { className: "a11y-section" },
+                React.createElement("h3", { className: "a11y-section-title" }, "Color Adjustments"),
+                React.createElement("div", { className: "a11y-grid" },
+                    React.createElement("button", { className: cn("a11y-card", highContrast && "active"), onClick: toggleHighContrast }, translate("highContrast")),
+                    React.createElement("button", { className: cn("a11y-card", negativeContrast && "active"), onClick: toggleNegativeContrast }, translate("negativeContrast")),
+                    React.createElement("button", { className: cn("a11y-card", lightBackground && "active"), onClick: toggleLightBackground }, translate("lightBackground")))),
+            React.createElement("section", { className: "a11y-section" },
+                React.createElement("h3", { className: "a11y-section-title" }, "Accessibility Tools"),
+                React.createElement("div", { className: "a11y-grid" },
+                    React.createElement("button", { className: cn("a11y-card", pauseAnimations && "active"), onClick: togglePauseAnimations }, translate("pauseAnimations")),
+                    React.createElement("button", { className: cn("a11y-card", readingGuide && "active"), onClick: toggleReadingGuide }, translate("readingGuide")),
+                    React.createElement("button", { className: cn("a11y-card", voiceEnabled && "active"), onClick: toggleVoice }, translate("voiceCommand"))))))));
 };
 
 const T = ({ k, children }) => {