ngp-accessibility 1.0.5 → 1.0.6

package/README.md

@@ -5,6 +5,7 @@ React accessibility package with translation, text sizing, contrast modes, and v
 ## Features
 
 - 🌐 Multi-language support (English, Tagalog, Cebuano/Visayan)
+- 🌐 Google auto-translation for page content with manual UI fallback
 - 📏 Text size adjustment (increase/decrease)
 - 🎨 High contrast mode
 - 🔄 Negative contrast mode
@@ -31,9 +32,11 @@ import "ngp-accessibility/dist/styles.css";
 
 function App() {
   return (
-    <AccessibilityProvider>
+    <AccessibilityProvider googleTranslateTargetSelector="main">
       <AccessibilityToolbar />
-      <YourContent />
+      <main>
+        <YourContent />
+      </main>
     </AccessibilityProvider>
   );
 }
@@ -50,11 +53,13 @@ import "ngp-accessibility/dist/styles.css";
 
 function App() {
   return (
-    <AccessibilityProvider>
+    <AccessibilityProvider googleTranslateTargetSelector="#page-content">
       <div style={{ textAlign: "right", padding: "10px" }}>
         <AccessibilityDropdown />
       </div>
-      <YourContent />
+      <section id="page-content">
+        <YourContent />
+      </section>
     </AccessibilityProvider>
   );
 }
@@ -78,11 +83,102 @@ When voice command is enabled, you can use:
 
 Wrap your app with this provider.
 
+Props:
+
+- `translations`: Manual translations for your own keyed content through `t()`.
+- `googleTranslateTargetSelector`: CSS selector for the DOM subtree that should be eligible for Google auto-translation. Defaults to `main`.
+
+Example:
+
+```tsx
+<AccessibilityProvider googleTranslateTargetSelector="#article-content">
+  <Header />
+  <AccessibilityDropdown />
+  <div id="article-content">
+    <ArticlePage />
+  </div>
+</AccessibilityProvider>
+```
+
+Only the subtree matched by `googleTranslateTargetSelector` should contain the content you want Google to translate. Elements outside that path are marked as `notranslate`.
+
+### Language Behavior
+
+`setLanguage(lang)` updates the current language state once, and the package applies that language in 3 different ways:
+
+1. Toolbar and dropdown UI labels use `translate(key)`.
+2. Your app's keyed content uses `t(key)`.
+3. Google Translate auto-translates the subtree matched by `googleTranslateTargetSelector`.
+
+This means the package now supports 2 language modes:
+
+- Manual UI language: If the selected language exists in the built-in package dictionary, the accessibility controls use those manual labels.
+- Google-only language: If the selected language does not have a built-in package dictionary, the accessibility controls fall back to English while Google still translates the page content.
+
+Example:
+
+- `tl`: package UI uses manual Tagalog labels, and page content can also be translated.
+- `ja`: package UI falls back to English unless you add manual Japanese labels, while Google translates the selected page subtree to Japanese.
+
+### Manual Translation For Specific Content
+
+Yes, this setup is more flexible when you want manual translations only for specific components or content.
+
+Use `translations` plus `t(key)` when you want full control over exact wording in your own app content. Use Google Translate for the rest of the page content inside your translation target.
+
+Example:
+
+```tsx
+const myTranslations = {
+  en: {
+    heroTitle: "Welcome",
+    heroBody: "This section is manually translated.",
+  },
+  ja: {
+    heroTitle: "ようこそ",
+    heroBody: "このセクションは手動で翻訳されています。",
+  },
+};
+
+function Hero() {
+  const { t } = useAccessibility();
+
+  return (
+    <section>
+      <h1>{t("heroTitle")}</h1>
+      <p>{t("heroBody")}</p>
+    </section>
+  );
+}
+
+function App() {
+  return (
+    <AccessibilityProvider
+      translations={myTranslations}
+      googleTranslateTargetSelector="main"
+    >
+      <AccessibilityDropdown />
+      <main>
+        <Hero />
+        <OtherPageContent />
+      </main>
+    </AccessibilityProvider>
+  );
+}
+```
+
+In that setup:
+
+- `Hero` can use your manual translations through `t(key)`.
+- other content inside `main` can still be translated by Google.
+- the accessibility toolbar/dropdown uses built-in package labels when available, otherwise English fallback.
+
 ### useAccessibility()
 
 Hook that returns:
 
 - `language`, `setLanguage(lang)`
+- `hasManualTranslations`
 - `textSize`, `increaseText()`, `decreaseText()`
 - `highContrast`, `toggleHighContrast()`
 - `negativeContrast`, `toggleNegativeContrast()`
@@ -90,7 +186,8 @@ Hook that returns:
 - `underlineLinks`, `toggleUnderlineLinks()`
 - `readableFont`, `toggleReadableFont()`
 - `voiceEnabled`, `toggleVoice()`
-- `translate(key)` - Get translated text
+- `translate(key)` - Get translated package UI text with English fallback
+- `t(key)` - Get your app-specific manual text for the current language, then fall back to English, then the raw key
 
 ### AccessibilityToolbar
 

package/dist/AccessibilityContext.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactNode } from "react";
 import { Language, TranslationKey } from "./translations";
+export type ColorBlindMode = "none" | "protanopia" | "deuteranopia" | "tritanopia";
 interface AccessibilityState {
     language: Language;
     textSize: number;
@@ -13,6 +14,9 @@ interface AccessibilityState {
     highlightTitles: boolean;
     readableFont: boolean;
     voiceEnabled: boolean;
+    readAloud: boolean;
+    colorBlindMode: ColorBlindMode;
+    focusIndicator: boolean;
 }
 interface AccessibilityContextType extends AccessibilityState {
     setLanguage: (lang: Language) => void;
@@ -28,12 +32,19 @@ interface AccessibilityContextType extends AccessibilityState {
     toggleHighlightTitles: () => void;
     toggleReadableFont: () => void;
     toggleVoice: () => void;
+    toggleReadAloud: () => void;
+    setColorBlindMode: (mode: ColorBlindMode) => void;
+    toggleFocusIndicator: () => void;
+    hasManualTranslations: boolean;
     translate: (key: TranslationKey) => string;
     t: (key: string) => string;
 }
-interface AccessibilityProviderProps {
+export interface AccessibilityProviderProps {
     children: ReactNode;
     translations?: Partial<Record<Language, Record<string, string>>>;
+    googleTranslateTargetSelector?: string;
+    /** @deprecated Use googleTranslateTargetSelector instead. */
+    translationTargetSelector?: string;
 }
 export declare const AccessibilityProvider: React.FC<AccessibilityProviderProps>;
 export declare const useAccessibility: () => AccessibilityContextType;

package/dist/AccessibilityDropdown.d.ts

@@ -1,4 +1,28 @@
 import React from "react";
+export interface AccessibilityDropdownClasses {
+    root?: string;
+    title?: string;
+    trigger?: string;
+    panel?: string;
+    toggle?: string;
+    section?: string;
+    sectionHeader?: string;
+    button?: string;
+    activeButton?: string;
+    select?: string;
+    menu?: string;
+}
+export interface AccessibilityDropdownProps {
+    className?: string;
+    style?: React.CSSProperties;
+    classes?: AccessibilityDropdownClasses;
+    triggerLabel?: string;
+    renderTrigger?: (props: {
+        isOpen: boolean;
+        toggle: () => void;
+        className: string;
+    }) => React.ReactNode;
+}
 export interface AccessibilityDropdownClasses {
     root?: string;
     trigger?: string;

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export { AccessibilityToolbar } from "./AccessibilityToolbar";
 export { AccessibilityDropdown } from "./AccessibilityDropdown";
 export { T } from "./T";
 export { translations, type Language, type TranslationKey, } from "./translations";
+export type { AccessibilityProviderProps } from "./AccessibilityContext";
 export type { AccessibilityToolbarProps, AccessibilityToolbarClasses, } from "./AccessibilityToolbar";
 export type { AccessibilityDropdownProps, AccessibilityDropdownClasses, } from "./AccessibilityDropdown";
 export type { default as React } from "react";

package/dist/index.esm.js

@@ -2,6 +2,7 @@ import React, { createContext, useState, useEffect, useContext } from 'react';
 
 const translations = {
     en: {
+        language: "Language",
         increaseText: "Increase Text",
         decreaseText: "Decrease Text",
         textMagnifier: "Text Magnifier",
@@ -14,8 +15,12 @@ const translations = {
         pauseAnimations: "Pause Animations",
         readingGuide: "Reading Guide",
         voiceCommand: "Voice Command",
+        readAloud: "Read Aloud",
+        colorBlindMode: "Color Blind Mode",
+        focusIndicator: "Focus Indicator",
     },
     tl: {
+        language: "Wika",
         increaseText: "Palakihin ang Teksto",
         decreaseText: "Paliitin ang Teksto",
         textMagnifier: "Text Magnifier",
@@ -28,8 +33,12 @@ const translations = {
         pauseAnimations: "I-pause ang mga Animation",
         readingGuide: "Reading Guide",
         voiceCommand: "Voice Command",
+        readAloud: "Basahin nang Malakas",
+        colorBlindMode: "Color Blind Mode",
+        focusIndicator: "Focus Indicator",
     },
     ceb: {
+        language: "Pinulongan",
         increaseText: "Padak-on ang Teksto",
         decreaseText: "Pagamay-on ang Teksto",
         textMagnifier: "Text Magnifier",
@@ -42,9 +51,38 @@ const translations = {
         pauseAnimations: "Ihunong ang mga Animation",
         readingGuide: "Reading Guide",
         voiceCommand: "Voice Command",
+        readAloud: "Basaha og Kusog",
+        colorBlindMode: "Color Blind Mode",
+        focusIndicator: "Focus Indicator",
     },
 };
 
+const GOOGLE_TRANSLATE_COOKIE_NAME = "googtrans";
+const GOOGLE_TRANSLATE_SOURCE_LANGUAGE = "en";
+const getCookieDomains = () => {
+    const domains = new Set([window.location.hostname]);
+    const hostnameParts = window.location.hostname.split(".");
+    if (hostnameParts.length > 2) {
+        domains.add(hostnameParts.slice(-2).join("."));
+    }
+    return Array.from(domains);
+};
+const setGoogleTranslateCookie = (targetLanguage) => {
+    const cookieValue = `/${GOOGLE_TRANSLATE_SOURCE_LANGUAGE}/${targetLanguage}`;
+    document.cookie = `${GOOGLE_TRANSLATE_COOKIE_NAME}=${cookieValue}; path=/; SameSite=Lax`;
+    for (const domain of getCookieDomains()) {
+        document.cookie = `${GOOGLE_TRANSLATE_COOKIE_NAME}=${cookieValue}; path=/; domain=${domain}; SameSite=Lax`;
+    }
+};
+const clearGoogleTranslateCookie = () => {
+    document.cookie = `${GOOGLE_TRANSLATE_COOKIE_NAME}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; SameSite=Lax`;
+    for (const domain of getCookieDomains()) {
+        document.cookie = `${GOOGLE_TRANSLATE_COOKIE_NAME}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=${domain}; SameSite=Lax`;
+    }
+};
+const dispatchNativeChangeEvent = (element) => {
+    element.dispatchEvent(new Event("change", { bubbles: true }));
+};
 const normalizeMagnifierText = (value) => value.replace(/\s+/g, " ").trim();
 const magnifierSelector = "p, li, button, h1, h2, h3, h4, h5, h6, [role=heading]";
 const getMagnifierElement = (target) => {
@@ -65,7 +103,8 @@ const getMagnifierText = (target) => {
     return normalizeMagnifierText(element.innerText || element.textContent || "");
 };
 const AccessibilityContext = createContext(undefined);
-const AccessibilityProvider = ({ children, translations: customTranslations, }) => {
+const AccessibilityProvider = ({ children, translations: customTranslations, googleTranslateTargetSelector, translationTargetSelector, }) => {
+    var _a;
     const [state, setState] = useState({
         language: "en",
         textSize: 100,
@@ -79,8 +118,49 @@ const AccessibilityProvider = ({ children, translations: customTranslations, })
         highlightTitles: false,
         readableFont: false,
         voiceEnabled: false,
+        readAloud: false,
+        colorBlindMode: "none",
+        focusIndicator: false,
     });
     const allTranslations = customTranslations || translations;
+    const defaultUiTranslations = translations.en;
+    const manualTranslationsForLanguage = translations[state.language];
+    const hasManualTranslations = Boolean(manualTranslationsForLanguage);
+    const resolvedTranslationTargetSelector = (_a = googleTranslateTargetSelector !== null && googleTranslateTargetSelector !== void 0 ? googleTranslateTargetSelector : translationTargetSelector) !== null && _a !== void 0 ? _a : "main";
+    useEffect(() => {
+        const target = document.querySelector(resolvedTranslationTargetSelector);
+        if (!target) {
+            console.warn(`[NGP Accessibility] Google translation target selector "${resolvedTranslationTargetSelector}" did not match any element. Falling back to page-wide translation behavior.`);
+            return;
+        }
+        const markedElements = new Set();
+        let current = target;
+        while (current && current !== document.body) {
+            const parentElement = current.parentElement;
+            if (!parentElement)
+                break;
+            for (const sibling of Array.from(parentElement.children)) {
+                if (sibling === current || !(sibling instanceof HTMLElement))
+                    continue;
+                if (sibling.id === "a11y-google-translate-element")
+                    continue;
+                sibling.classList.add("notranslate");
+                sibling.setAttribute("translate", "no");
+                sibling.dataset.a11yTranslationScoped = "true";
+                markedElements.add(sibling);
+            }
+            current = parentElement;
+        }
+        return () => {
+            for (const element of markedElements) {
+                if (element.dataset.a11yTranslationScoped !== "true")
+                    continue;
+                element.classList.remove("notranslate");
+                element.removeAttribute("translate");
+                delete element.dataset.a11yTranslationScoped;
+            }
+        };
+    }, [resolvedTranslationTargetSelector]);
     useEffect(() => {
         const root = document.documentElement;
         root.style.fontSize = `${state.textSize}%`;
@@ -91,7 +171,103 @@ const AccessibilityProvider = ({ children, translations: customTranslations, })
         root.classList.toggle("highlight-titles", state.highlightTitles);
         root.classList.toggle("readable-font", state.readableFont);
         root.classList.toggle("pause-animations", state.pauseAnimations);
+        root.classList.toggle("focus-indicator", state.focusIndicator);
+        const body = document.body;
+        if (state.colorBlindMode !== "none") {
+            body.style.filter = `url(#a11y-${state.colorBlindMode})`;
+        }
+        else {
+            body.style.filter = "";
+        }
     }, [state]);
+    useEffect(() => {
+        const svgId = "a11y-colorblind-filters";
+        if (document.getElementById(svgId))
+            return;
+        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.id = svgId;
+        svg.setAttribute("aria-hidden", "true");
+        svg.style.cssText = "position:absolute;width:0;height:0;overflow:hidden;";
+        svg.innerHTML = `
+      <defs>
+        <filter id="a11y-protanopia">
+          <feColorMatrix type="matrix" values="
+            0.567 0.433 0     0 0
+            0.558 0.442 0     0 0
+            0     0.242 0.758 0 0
+            0     0     0     1 0"/>
+        </filter>
+        <filter id="a11y-deuteranopia">
+          <feColorMatrix type="matrix" values="
+            0.625 0.375 0     0 0
+            0.7   0.3   0     0 0
+            0     0.3   0.7   0 0
+            0     0     0     1 0"/>
+        </filter>
+        <filter id="a11y-tritanopia">
+          <feColorMatrix type="matrix" values="
+            0.95  0.05  0     0 0
+            0     0.433 0.567 0 0
+            0     0.475 0.525 0 0
+            0     0     0     1 0"/>
+        </filter>
+      </defs>
+    `;
+        document.body.prepend(svg);
+        return () => {
+            var _a;
+            (_a = document.getElementById(svgId)) === null || _a === void 0 ? void 0 : _a.remove();
+        };
+    }, []);
+    useEffect(() => {
+        if (!state.readAloud || !("speechSynthesis" in window))
+            return;
+        const readableSelector = "p, li, button, a, h1, h2, h3, h4, h5, h6, label, td, th, [role='button'], [role='heading'], [role='link']";
+        const speak = (text) => {
+            window.speechSynthesis.cancel();
+            const utterance = new SpeechSynthesisUtterance(text);
+            utterance.lang =
+                state.language === "tl"
+                    ? "tl-PH"
+                    : state.language === "ceb"
+                        ? "fil-PH"
+                        : "en-US";
+            utterance.rate = 0.95;
+            window.speechSynthesis.speak(utterance);
+        };
+        const getReadableText = (el) => normalizeMagnifierText(el.getAttribute("aria-label") ||
+            el.getAttribute("placeholder") ||
+            el.getAttribute("title") ||
+            el.innerText ||
+            el.textContent ||
+            "");
+        const handleMouseOver = (event) => {
+            const target = event.target;
+            if (!target)
+                return;
+            const el = target.closest(readableSelector);
+            if (!el || el.closest(".a11y-root"))
+                return;
+            const text = getReadableText(el);
+            if (text)
+                speak(text);
+        };
+        const handleFocus = (event) => {
+            const el = event.target;
+            if (!el || el.closest(".a11y-root"))
+                return;
+            const text = getReadableText(el);
+            if (text)
+                speak(text);
+        };
+        document.addEventListener("mouseover", handleMouseOver, true);
+        document.addEventListener("focusin", handleFocus, true);
+        return () => {
+            document.removeEventListener("mouseover", handleMouseOver, true);
+            document.removeEventListener("focusin", handleFocus, true);
+            window.speechSynthesis.cancel();
+        };
+    }, [state.readAloud, state.language]);
     useEffect(() => {
         if (!state.readingGuide)
             return;
@@ -323,8 +499,81 @@ const AccessibilityProvider = ({ children, translations: customTranslations, })
     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; };
+    const toggleReadAloud = () => setState((s) => (Object.assign(Object.assign({}, s), { readAloud: !s.readAloud })));
+    const setColorBlindMode = (mode) => setState((s) => (Object.assign(Object.assign({}, s), { colorBlindMode: mode })));
+    const toggleFocusIndicator = () => setState((s) => (Object.assign(Object.assign({}, s), { focusIndicator: !s.focusIndicator })));
+    // Google Translate: auto-translate page content when language changes
+    useEffect(() => {
+        const GTRANSLATE_SCRIPT_ID = "a11y-google-translate-script";
+        const GTRANSLATE_CONTAINER_ID = "a11y-google-translate-element";
+        const loadGoogleTranslateScript = () => {
+            if (document.getElementById(GTRANSLATE_SCRIPT_ID))
+                return;
+            // Create hidden container for the widget
+            const container = document.createElement("div");
+            container.id = GTRANSLATE_CONTAINER_ID;
+            container.style.display = "none";
+            document.body.appendChild(container);
+            // Define the init callback
+            window.googleTranslateElementInit = () => {
+                new window.google.translate.TranslateElement({
+                    pageLanguage: "en",
+                    autoDisplay: false,
+                }, GTRANSLATE_CONTAINER_ID);
+            };
+            const script = document.createElement("script");
+            script.id = GTRANSLATE_SCRIPT_ID;
+            script.src =
+                "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
+            script.async = true;
+            document.body.appendChild(script);
+        };
+        const triggerTranslation = (langCode) => {
+            setGoogleTranslateCookie(langCode);
+            const select = document.querySelector(".goog-te-combo");
+            if (select) {
+                select.value = langCode;
+                dispatchNativeChangeEvent(select);
+            }
+        };
+        const resetTranslation = () => {
+            const select = document.querySelector(".goog-te-combo");
+            if (select) {
+                select.value = GOOGLE_TRANSLATE_SOURCE_LANGUAGE;
+                dispatchNativeChangeEvent(select);
+            }
+            clearGoogleTranslateCookie();
+        };
+        const langMap = {
+            en: GOOGLE_TRANSLATE_SOURCE_LANGUAGE,
+            tl: "tl",
+            ceb: "ceb",
+            ja: "ja",
+            es: "es",
+            fr: "fr",
+            de: "de",
+            zh: "zh-CN",
+            ar: "ar",
+        };
+        const googleLang = langMap[state.language] || state.language;
+        if (googleLang === GOOGLE_TRANSLATE_SOURCE_LANGUAGE) {
+            resetTranslation();
+            return;
+        }
+        loadGoogleTranslateScript();
+        setGoogleTranslateCookie(googleLang);
+        // Wait for Google Translate widget to be ready, then trigger
+        const interval = window.setInterval(() => {
+            const select = document.querySelector(".goog-te-combo");
+            if (select) {
+                window.clearInterval(interval);
+                triggerTranslation(googleLang);
+            }
+        }, 300);
+        return () => window.clearInterval(interval);
+    }, [state.language]);
+    const translate = (key) => (manualTranslationsForLanguage === null || manualTranslationsForLanguage === void 0 ? void 0 : manualTranslationsForLanguage[key]) || defaultUiTranslations[key];
+    const t = (key) => { var _a, _b; return ((_a = allTranslations[state.language]) === null || _a === void 0 ? void 0 : _a[key]) || ((_b = allTranslations.en) === null || _b === void 0 ? void 0 : _b[key]) || key; };
     return (React.createElement(AccessibilityContext.Provider, { value: Object.assign(Object.assign({}, state), { setLanguage,
             increaseText,
             decreaseText,
@@ -338,6 +587,10 @@ const AccessibilityProvider = ({ children, translations: customTranslations, })
             toggleHighlightTitles,
             toggleReadableFont,
             toggleVoice,
+            toggleReadAloud,
+            setColorBlindMode,
+            toggleFocusIndicator,
+            hasManualTranslations,
             translate,
             t }) }, children));
 };
@@ -350,8 +603,8 @@ const useAccessibility = () => {
 
 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 },
+    const { language, setLanguage, increaseText, decreaseText, toggleTextMagnifier, togglePauseAnimations, toggleReadingGuide, toggleHighContrast, toggleNegativeContrast, toggleLightBackground, toggleUnderlineLinks, toggleHighlightTitles, toggleReadableFont, toggleVoice, toggleReadAloud, setColorBlindMode, toggleFocusIndicator, translate, textMagnifier, pauseAnimations, readingGuide, highContrast, negativeContrast, lightBackground, underlineLinks, highlightTitles, readableFont, voiceEnabled, readAloud, colorBlindMode, focusIndicator, } = useAccessibility();
+    return (React.createElement("div", { className: cn$1("accessibility-toolbar notranslate", classes === null || classes === void 0 ? void 0 : classes.root, className), style: style, translate: "no" },
         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"),
@@ -373,7 +626,16 @@ const AccessibilityToolbar = ({ className, style, classes, }) => {
         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")),
+        React.createElement("button", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.button, readAloud && "active", readAloud && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": readAloud, onClick: toggleReadAloud },
+            "\uD83D\uDD0A ",
+            translate("readAloud")),
+        React.createElement("button", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.button, focusIndicator && "active", focusIndicator && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": focusIndicator, onClick: toggleFocusIndicator }, translate("focusIndicator")),
+        React.createElement("select", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.select), value: colorBlindMode, onChange: (e) => setColorBlindMode(e.target.value), "aria-label": translate("colorBlindMode") },
+            React.createElement("option", { value: "none" }, translate("colorBlindMode")),
+            React.createElement("option", { value: "protanopia" }, "Protanopia (Red)"),
+            React.createElement("option", { value: "deuteranopia" }, "Deuteranopia (Green)"),
+            React.createElement("option", { value: "tritanopia" }, "Tritanopia (Blue)"))));
 };
 
 const cn = (...parts) => parts.filter(Boolean).join(" ");
@@ -396,39 +658,45 @@ const AccessibilityDropdown = ({ className, style, classes, triggerLabel = "♿
             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("label", { className: cn("a11y-panel-title", classes === null || classes === void 0 ? void 0 : classes.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("div", { className: cn("a11y-language", classes === null || classes === void 0 ? void 0 : classes.section) },
+                React.createElement("label", { htmlFor: "a11y-language-select", className: cn("a11y-language-label", classes === null || classes === void 0 ? void 0 : classes.title) }, translate("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("section", { className: "a11y-section" },
-                React.createElement("h3", { className: "a11y-section-title" }, "Content Adjustments"),
+                    React.createElement("option", { value: "ceb" }, "Cebuano"),
+                    React.createElement("option", { value: "ja" }, "Japanese"),
+                    React.createElement("option", { value: "es" }, "Spanish"),
+                    React.createElement("option", { value: "fr" }, "French"),
+                    React.createElement("option", { value: "de" }, "German"),
+                    React.createElement("option", { value: "zh" }, "Chinese"),
+                    React.createElement("option", { value: "ar" }, "Arabic"))),
+            React.createElement("section", { className: cn("a11y-section", classes === null || classes === void 0 ? void 0 : classes.section) },
+                React.createElement("h3", { className: cn("a11y-section-title", classes === null || classes === void 0 ? void 0 : classes.title) }, "Content Adjustments"),
                 React.createElement("div", { className: "a11y-card" },
-                    React.createElement("span", { className: "a11y-card-title" }, "Content Scaling"),
+                    React.createElement("span", { className: cn("a11y-card-title", classes === null || classes === void 0 ? void 0 : classes.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"))))))));
+                React.createElement("div", { className: cn("a11y-grid", classes === null || classes === void 0 ? void 0 : classes.section) },
+                    React.createElement("button", { className: cn("a11y-card", textMagnifier && "active", classes === null || classes === void 0 ? void 0 : classes.button), onClick: toggleTextMagnifier }, translate("textMagnifier")),
+                    React.createElement("button", { className: cn("a11y-card", readableFont && "active", classes === null || classes === void 0 ? void 0 : classes.button), onClick: toggleReadableFont }, "Readable Font"),
+                    React.createElement("button", { className: cn("a11y-card", underlineLinks && "active", classes === null || classes === void 0 ? void 0 : classes.button), onClick: toggleUnderlineLinks }, "Highlight Links"),
+                    React.createElement("button", { className: cn("a11y-card", highlightTitles && "active", classes === null || classes === void 0 ? void 0 : classes.button), onClick: toggleHighlightTitles }, "Highlight Titles"))),
+            React.createElement("section", { className: cn("a11y-section", classes === null || classes === void 0 ? void 0 : classes.section) },
+                React.createElement("h3", { className: cn("a11y-section-title", classes === null || classes === void 0 ? void 0 : classes.title) }, "Color Adjustments"),
+                React.createElement("div", { className: cn("a11y-grid", classes === null || classes === void 0 ? void 0 : classes.section) },
+                    React.createElement("button", { className: cn("a11y-card", highContrast && "active", classes === null || classes === void 0 ? void 0 : classes.button), onClick: toggleHighContrast }, translate("highContrast")),
+                    React.createElement("button", { className: cn("a11y-card", negativeContrast && "active", classes === null || classes === void 0 ? void 0 : classes.button), onClick: toggleNegativeContrast }, translate("negativeContrast")),
+                    React.createElement("button", { className: cn("a11y-card", lightBackground && "active", classes === null || classes === void 0 ? void 0 : classes.button), onClick: toggleLightBackground }, translate("lightBackground")))),
+            React.createElement("section", { className: cn("a11y-section", classes === null || classes === void 0 ? void 0 : classes.section) },
+                React.createElement("h3", { className: cn("a11y-section-title", classes === null || classes === void 0 ? void 0 : classes.title) }, "Accessibility Tools"),
+                React.createElement("div", { className: cn("a11y-grid", classes === null || classes === void 0 ? void 0 : classes.section) },
+                    React.createElement("button", { className: cn("a11y-card", pauseAnimations && "active", classes === null || classes === void 0 ? void 0 : classes.button), onClick: togglePauseAnimations }, translate("pauseAnimations")),
+                    React.createElement("button", { className: cn("a11y-card", readingGuide && "active", classes === null || classes === void 0 ? void 0 : classes.button), onClick: toggleReadingGuide }, translate("readingGuide")),
+                    React.createElement("button", { className: cn("a11y-card", voiceEnabled && "active", classes === null || classes === void 0 ? void 0 : classes.button), onClick: toggleVoice }, translate("voiceCommand"))))))));
 };
 
 const T = ({ k, children }) => {