ngp-accessibility 1.0.6 → 1.0.7

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

@@ -13,7 +13,6 @@ interface AccessibilityState {
     underlineLinks: boolean;
     highlightTitles: boolean;
     readableFont: boolean;
-    voiceEnabled: boolean;
     readAloud: boolean;
     colorBlindMode: ColorBlindMode;
     focusIndicator: boolean;
@@ -31,7 +30,6 @@ interface AccessibilityContextType extends AccessibilityState {
     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

@@ -14,7 +14,6 @@ const translations = {
         readableFont: "Readable Font",
         pauseAnimations: "Pause Animations",
         readingGuide: "Reading Guide",
-        voiceCommand: "Voice Command",
         readAloud: "Read Aloud",
         colorBlindMode: "Color Blind Mode",
         focusIndicator: "Focus Indicator",
@@ -32,7 +31,6 @@ const translations = {
         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",
@@ -50,7 +48,6 @@ const translations = {
         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",
@@ -117,7 +114,6 @@ const AccessibilityProvider = ({ children, translations: customTranslations, goo
         underlineLinks: false,
         highlightTitles: false,
         readableFont: false,
-        voiceEnabled: false,
         readAloud: false,
         colorBlindMode: "none",
         focusIndicator: false,
@@ -438,54 +434,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) })));
@@ -498,7 +446,6 @@ const AccessibilityProvider = ({ children, translations: customTranslations, goo
     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 })));
@@ -586,7 +533,6 @@ const AccessibilityProvider = ({ children, translations: customTranslations, goo
             toggleUnderlineLinks,
             toggleHighlightTitles,
             toggleReadableFont,
-            toggleVoice,
             toggleReadAloud,
             setColorBlindMode,
             toggleFocusIndicator,
@@ -603,9 +549,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, toggleUnderlineLinks, toggleHighlightTitles, toggleReadableFont, toggleReadAloud, setColorBlindMode, toggleFocusIndicator, translate, textMagnifier, pauseAnimations, readingGuide, highContrast, negativeContrast, lightBackground, 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")),
@@ -624,9 +570,6 @@ const AccessibilityToolbar = ({ className, style, classes, }) => {
         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 +584,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, toggleUnderlineLinks, toggleHighlightTitles, toggleReadableFont, translate, textMagnifier, pauseAnimations, readingGuide, highContrast, negativeContrast, lightBackground, underlineLinks, highlightTitles, readableFont, } = useAccessibility();
     const toggle = () => setIsOpen(!isOpen);
     const closePanel = () => setIsOpen(false);
     const textScaleDelta = textSize - 100;
@@ -662,7 +605,7 @@ const AccessibilityDropdown = ({ className, style, classes, triggerLabel = "♿
                 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"),
@@ -695,8 +638,7 @@ const AccessibilityDropdown = ({ className, style, classes, triggerLabel = "♿
                 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 }) => {