ngp-accessibility 1.0.6 → 1.0.8

package/README.md

@@ -1,6 +1,6 @@
 # NGP Accessibility
 
-React accessibility package with translation, text sizing, contrast modes, and voice commands.
+React accessibility package with translation, text sizing, contrast modes, and more.
 
 ## Features
 
@@ -12,7 +12,6 @@ React accessibility package with translation, text sizing, contrast modes, and v
 - 💡 Light background mode
 - 🔗 Links underline toggle
 - 📖 Readable font mode
-- 🎤 Voice command support
 - ✅ TypeScript & JavaScript compatible
 - 📦 Zero dependencies (peer: React)
 
@@ -65,18 +64,6 @@ function App() {
 }
 ```
 
-## Voice Commands
-
-When voice command is enabled, you can use:
-
-- "increase text" / "palakihin"
-- "decrease text" / "paliitin"
-- "high contrast" / "mataas"
-- "negative contrast" / "negatibo"
-- "light background" / "maliwanag"
-- "underline" / "guhit"
-- "readable font" / "madaling"
-
 ## API
 
 ### AccessibilityProvider
@@ -185,7 +172,6 @@ Hook that returns:
 - `lightBackground`, `toggleLightBackground()`
 - `underlineLinks`, `toggleUnderlineLinks()`
 - `readableFont`, `toggleReadableFont()`
-- `voiceEnabled`, `toggleVoice()`
 - `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
 

package/dist/AccessibilityContext.d.ts

@@ -10,10 +10,10 @@ interface AccessibilityState {
     highContrast: boolean;
     negativeContrast: boolean;
     lightBackground: boolean;
+    darkMode: boolean;
     underlineLinks: boolean;
     highlightTitles: boolean;
     readableFont: boolean;
-    voiceEnabled: boolean;
     readAloud: boolean;
     colorBlindMode: ColorBlindMode;
     focusIndicator: boolean;
@@ -28,10 +28,10 @@ interface AccessibilityContextType extends AccessibilityState {
     toggleHighContrast: () => void;
     toggleNegativeContrast: () => void;
     toggleLightBackground: () => void;
+    toggleDarkMode: () => void;
     toggleUnderlineLinks: () => void;
     toggleHighlightTitles: () => void;
     toggleReadableFont: () => void;
-    toggleVoice: () => void;
     toggleReadAloud: () => void;
     setColorBlindMode: (mode: ColorBlindMode) => void;
     toggleFocusIndicator: () => void;

package/dist/AccessibilityToolbar.d.ts

@@ -4,7 +4,6 @@ export interface AccessibilityToolbarClasses {
     select?: string;
     button?: string;
     activeButton?: string;
-    voiceButton?: string;
 }
 export interface AccessibilityToolbarProps {
     className?: string;

package/dist/index.esm.js

@@ -9,12 +9,12 @@ const translations = {
         highContrast: "High Contrast",
         negativeContrast: "Negative Contrast",
         lightBackground: "Light Background",
+        darkMode: "Dark Mode",
         underlineLinks: "Underline Links",
         highlightTitles: "Highlight Titles",
         readableFont: "Readable Font",
         pauseAnimations: "Pause Animations",
         readingGuide: "Reading Guide",
-        voiceCommand: "Voice Command",
         readAloud: "Read Aloud",
         colorBlindMode: "Color Blind Mode",
         focusIndicator: "Focus Indicator",
@@ -27,12 +27,12 @@ const translations = {
         highContrast: "Mataas na Contrast",
         negativeContrast: "Negatibong Contrast",
         lightBackground: "Maliwanag na Background",
+        darkMode: "Madilim na Mode",
         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",
         readAloud: "Basahin nang Malakas",
         colorBlindMode: "Color Blind Mode",
         focusIndicator: "Focus Indicator",
@@ -45,12 +45,12 @@ const translations = {
         highContrast: "Taas nga Contrast",
         negativeContrast: "Negatibo nga Contrast",
         lightBackground: "Hayag nga Background",
+        darkMode: "Ngitngit nga Mode",
         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",
         readAloud: "Basaha og Kusog",
         colorBlindMode: "Color Blind Mode",
         focusIndicator: "Focus Indicator",
@@ -114,10 +114,10 @@ const AccessibilityProvider = ({ children, translations: customTranslations, goo
         highContrast: false,
         negativeContrast: false,
         lightBackground: false,
+        darkMode: false,
         underlineLinks: false,
         highlightTitles: false,
         readableFont: false,
-        voiceEnabled: false,
         readAloud: false,
         colorBlindMode: "none",
         focusIndicator: false,
@@ -167,6 +167,7 @@ const AccessibilityProvider = ({ children, translations: customTranslations, goo
         root.classList.toggle("high-contrast", state.highContrast);
         root.classList.toggle("negative-contrast", state.negativeContrast);
         root.classList.toggle("light-background", state.lightBackground);
+        root.classList.toggle("dark-mode", state.darkMode);
         root.classList.toggle("underline-links", state.underlineLinks);
         root.classList.toggle("highlight-titles", state.highlightTitles);
         root.classList.toggle("readable-font", state.readableFont);
@@ -438,54 +439,6 @@ const AccessibilityProvider = ({ children, translations: customTranslations, goo
             tooltip.remove();
         };
     }, [state.textMagnifier]);
-    useEffect(() => {
-        if (!state.voiceEnabled ||
-            !("webkitSpeechRecognition" in window || "SpeechRecognition" in window))
-            return;
-        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.onresult = (event) => {
-            const transcript = event.results[event.results.length - 1][0].transcript.toLowerCase();
-            if (transcript.includes("increase text") ||
-                transcript.includes("palakihin"))
-                increaseText();
-            if (transcript.includes("decrease text") ||
-                transcript.includes("paliitin"))
-                decreaseText();
-            if (transcript.includes("high contrast") || transcript.includes("mataas"))
-                toggleHighContrast();
-            if (transcript.includes("negative contrast") ||
-                transcript.includes("negatibo"))
-                toggleNegativeContrast();
-            if (transcript.includes("light background") ||
-                transcript.includes("maliwanag"))
-                toggleLightBackground();
-            if (transcript.includes("underline") || transcript.includes("guhit"))
-                toggleUnderlineLinks();
-            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) })));
@@ -494,11 +447,11 @@ const AccessibilityProvider = ({ children, translations: customTranslations, goo
     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 toggleLightBackground = () => setState((s) => (Object.assign(Object.assign({}, s), { lightBackground: !s.lightBackground, darkMode: s.lightBackground ? s.darkMode : false })));
+    const toggleDarkMode = () => setState((s) => (Object.assign(Object.assign({}, s), { darkMode: !s.darkMode, lightBackground: s.darkMode ? s.lightBackground : false })));
     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 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 })));
@@ -583,10 +536,10 @@ const AccessibilityProvider = ({ children, translations: customTranslations, goo
             toggleHighContrast,
             toggleNegativeContrast,
             toggleLightBackground,
+            toggleDarkMode,
             toggleUnderlineLinks,
             toggleHighlightTitles,
             toggleReadableFont,
-            toggleVoice,
             toggleReadAloud,
             setColorBlindMode,
             toggleFocusIndicator,
@@ -603,9 +556,9 @@ 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, toggleReadAloud, setColorBlindMode, toggleFocusIndicator, translate, textMagnifier, pauseAnimations, readingGuide, highContrast, negativeContrast, lightBackground, underlineLinks, highlightTitles, readableFont, voiceEnabled, readAloud, colorBlindMode, focusIndicator, } = useAccessibility();
+    const { language, setLanguage, increaseText, decreaseText, toggleTextMagnifier, togglePauseAnimations, toggleReadingGuide, toggleHighContrast, toggleNegativeContrast, toggleLightBackground, toggleDarkMode, toggleUnderlineLinks, toggleHighlightTitles, toggleReadableFont, toggleReadAloud, setColorBlindMode, toggleFocusIndicator, translate, textMagnifier, pauseAnimations, readingGuide, highContrast, negativeContrast, lightBackground, darkMode, underlineLinks, highlightTitles, readableFont, 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("select", { className: cn$1("notranslate", classes === null || classes === void 0 ? void 0 : classes.select), value: language, onChange: (e) => setLanguage(e.target.value), translate: "no" },
             React.createElement("option", { value: "en" }, "English"),
             React.createElement("option", { value: "tl" }, "Tagalog"),
             React.createElement("option", { value: "ceb" }, "Cebuano")),
@@ -619,14 +572,12 @@ const AccessibilityToolbar = ({ className, style, classes, }) => {
         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, darkMode && "active", darkMode && (classes === null || classes === void 0 ? void 0 : classes.activeButton)), "data-active": darkMode, onClick: toggleDarkMode }, translate("darkMode")),
         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")),
         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")),
@@ -641,7 +592,7 @@ const AccessibilityToolbar = ({ className, style, classes, }) => {
 const cn = (...parts) => parts.filter(Boolean).join(" ");
 const AccessibilityDropdown = ({ className, style, classes, triggerLabel = "♿ Accessibility", renderTrigger, }) => {
     const [isOpen, setIsOpen] = useState(false);
-    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 { language, setLanguage, textSize, increaseText, decreaseText, toggleTextMagnifier, togglePauseAnimations, toggleReadingGuide, toggleHighContrast, toggleNegativeContrast, toggleLightBackground, toggleDarkMode, toggleUnderlineLinks, toggleHighlightTitles, toggleReadableFont, translate, textMagnifier, pauseAnimations, readingGuide, highContrast, negativeContrast, lightBackground, darkMode, underlineLinks, highlightTitles, readableFont, } = useAccessibility();
     const toggle = () => setIsOpen(!isOpen);
     const closePanel = () => setIsOpen(false);
     const textScaleDelta = textSize - 100;
@@ -657,12 +608,11 @@ const AccessibilityDropdown = ({ className, style, classes, 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: 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: 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("select", { id: "a11y-language-select", className: "notranslate", value: language, onChange: (e) => setLanguage(e.target.value), translate: "no" },
                     React.createElement("option", { value: "en" }, "English"),
                     React.createElement("option", { value: "tl" }, "Tagalog"),
                     React.createElement("option", { value: "ceb" }, "Cebuano"),
@@ -690,13 +640,13 @@ const AccessibilityDropdown = ({ className, style, classes, triggerLabel = "♿
                 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("button", { className: cn("a11y-card", lightBackground && "active", classes === null || classes === void 0 ? void 0 : classes.button), onClick: toggleLightBackground }, translate("lightBackground")),
+                    React.createElement("button", { className: cn("a11y-card", darkMode && "active", classes === null || classes === void 0 ? void 0 : classes.button), onClick: toggleDarkMode }, translate("darkMode")))),
             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"))))))));
+                    React.createElement("button", { className: cn("a11y-card", readingGuide && "active", classes === null || classes === void 0 ? void 0 : classes.button), onClick: toggleReadingGuide }, translate("readingGuide"))))))));
 };
 
 const T = ({ k, children }) => {