ngp-accessibility 1.0.6 → 1.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +1 -15
  2. package/dist/AccessibilityContext.d.ts +2 -2
  3. package/dist/AccessibilityToolbar.d.ts +0 -1
  4. package/dist/index.esm.js +16 -66
  5. package/dist/index.esm.js.map +1 -1
  6. package/dist/index.js +16 -66
  7. package/dist/index.js.map +1 -1
  8. package/dist/styles.css +40 -0
  9. package/dist/translations.d.ts +3 -3
  10. package/package.json +3 -4
package/dist/index.js CHANGED
@@ -11,12 +11,12 @@ const translations = {
11
11
  highContrast: "High Contrast",
12
12
  negativeContrast: "Negative Contrast",
13
13
  lightBackground: "Light Background",
14
+ darkMode: "Dark Mode",
14
15
  underlineLinks: "Underline Links",
15
16
  highlightTitles: "Highlight Titles",
16
17
  readableFont: "Readable Font",
17
18
  pauseAnimations: "Pause Animations",
18
19
  readingGuide: "Reading Guide",
19
- voiceCommand: "Voice Command",
20
20
  readAloud: "Read Aloud",
21
21
  colorBlindMode: "Color Blind Mode",
22
22
  focusIndicator: "Focus Indicator",
@@ -29,12 +29,12 @@ const translations = {
29
29
  highContrast: "Mataas na Contrast",
30
30
  negativeContrast: "Negatibong Contrast",
31
31
  lightBackground: "Maliwanag na Background",
32
+ darkMode: "Madilim na Mode",
32
33
  underlineLinks: "May Guhit na Links",
33
34
  highlightTitles: "I-highlight ang Mga Pamagat",
34
35
  readableFont: "Madaling Basahin na Font",
35
36
  pauseAnimations: "I-pause ang mga Animation",
36
37
  readingGuide: "Reading Guide",
37
- voiceCommand: "Voice Command",
38
38
  readAloud: "Basahin nang Malakas",
39
39
  colorBlindMode: "Color Blind Mode",
40
40
  focusIndicator: "Focus Indicator",
@@ -47,12 +47,12 @@ const translations = {
47
47
  highContrast: "Taas nga Contrast",
48
48
  negativeContrast: "Negatibo nga Contrast",
49
49
  lightBackground: "Hayag nga Background",
50
+ darkMode: "Ngitngit nga Mode",
50
51
  underlineLinks: "Linya sa Ubos sa Links",
51
52
  highlightTitles: "I-highlight ang mga Ulohan",
52
53
  readableFont: "Sayon Basahon nga Font",
53
54
  pauseAnimations: "Ihunong ang mga Animation",
54
55
  readingGuide: "Reading Guide",
55
- voiceCommand: "Voice Command",
56
56
  readAloud: "Basaha og Kusog",
57
57
  colorBlindMode: "Color Blind Mode",
58
58
  focusIndicator: "Focus Indicator",
@@ -116,10 +116,10 @@ const AccessibilityProvider = ({ children, translations: customTranslations, goo
116
116
  highContrast: false,
117
117
  negativeContrast: false,
118
118
  lightBackground: false,
119
+ darkMode: false,
119
120
  underlineLinks: false,
120
121
  highlightTitles: false,
121
122
  readableFont: false,
122
- voiceEnabled: false,
123
123
  readAloud: false,
124
124
  colorBlindMode: "none",
125
125
  focusIndicator: false,
@@ -169,6 +169,7 @@ const AccessibilityProvider = ({ children, translations: customTranslations, goo
169
169
  root.classList.toggle("high-contrast", state.highContrast);
170
170
  root.classList.toggle("negative-contrast", state.negativeContrast);
171
171
  root.classList.toggle("light-background", state.lightBackground);
172
+ root.classList.toggle("dark-mode", state.darkMode);
172
173
  root.classList.toggle("underline-links", state.underlineLinks);
173
174
  root.classList.toggle("highlight-titles", state.highlightTitles);
174
175
  root.classList.toggle("readable-font", state.readableFont);
@@ -440,54 +441,6 @@ const AccessibilityProvider = ({ children, translations: customTranslations, goo
440
441
  tooltip.remove();
441
442
  };
442
443
  }, [state.textMagnifier]);
443
- React.useEffect(() => {
444
- if (!state.voiceEnabled ||
445
- !("webkitSpeechRecognition" in window || "SpeechRecognition" in window))
446
- return;
447
- const SpeechRecognition = window.SpeechRecognition ||
448
- window.webkitSpeechRecognition;
449
- const recognition = new SpeechRecognition();
450
- recognition.continuous = true;
451
- recognition.lang =
452
- state.language === "tl"
453
- ? "tl-PH"
454
- : state.language === "ceb"
455
- ? "ceb-PH"
456
- : "en-US";
457
- recognition.onresult = (event) => {
458
- const transcript = event.results[event.results.length - 1][0].transcript.toLowerCase();
459
- if (transcript.includes("increase text") ||
460
- transcript.includes("palakihin"))
461
- increaseText();
462
- if (transcript.includes("decrease text") ||
463
- transcript.includes("paliitin"))
464
- decreaseText();
465
- if (transcript.includes("high contrast") || transcript.includes("mataas"))
466
- toggleHighContrast();
467
- if (transcript.includes("negative contrast") ||
468
- transcript.includes("negatibo"))
469
- toggleNegativeContrast();
470
- if (transcript.includes("light background") ||
471
- transcript.includes("maliwanag"))
472
- toggleLightBackground();
473
- if (transcript.includes("underline") || transcript.includes("guhit"))
474
- toggleUnderlineLinks();
475
- if (transcript.includes("highlight titles") ||
476
- transcript.includes("title highlight"))
477
- toggleHighlightTitles();
478
- if (transcript.includes("pause animations") ||
479
- transcript.includes("stop animations"))
480
- togglePauseAnimations();
481
- if (transcript.includes("reading guide") ||
482
- transcript.includes("reading line"))
483
- toggleReadingGuide();
484
- if (transcript.includes("readable font") ||
485
- transcript.includes("madaling"))
486
- toggleReadableFont();
487
- };
488
- recognition.start();
489
- return () => recognition.stop();
490
- }, [state.voiceEnabled, state.language]);
491
444
  const setLanguage = (lang) => setState((s) => (Object.assign(Object.assign({}, s), { language: lang })));
492
445
  const increaseText = () => setState((s) => (Object.assign(Object.assign({}, s), { textSize: Math.min(s.textSize + 10, 200) })));
493
446
  const decreaseText = () => setState((s) => (Object.assign(Object.assign({}, s), { textSize: Math.max(s.textSize - 10, 80) })));
@@ -496,11 +449,11 @@ const AccessibilityProvider = ({ children, translations: customTranslations, goo
496
449
  const toggleReadingGuide = () => setState((s) => (Object.assign(Object.assign({}, s), { readingGuide: !s.readingGuide })));
497
450
  const toggleHighContrast = () => setState((s) => (Object.assign(Object.assign({}, s), { highContrast: !s.highContrast, negativeContrast: false })));
498
451
  const toggleNegativeContrast = () => setState((s) => (Object.assign(Object.assign({}, s), { negativeContrast: !s.negativeContrast, highContrast: false })));
499
- const toggleLightBackground = () => setState((s) => (Object.assign(Object.assign({}, s), { lightBackground: !s.lightBackground })));
452
+ const toggleLightBackground = () => setState((s) => (Object.assign(Object.assign({}, s), { lightBackground: !s.lightBackground, darkMode: s.lightBackground ? s.darkMode : false })));
453
+ const toggleDarkMode = () => setState((s) => (Object.assign(Object.assign({}, s), { darkMode: !s.darkMode, lightBackground: s.darkMode ? s.lightBackground : false })));
500
454
  const toggleUnderlineLinks = () => setState((s) => (Object.assign(Object.assign({}, s), { underlineLinks: !s.underlineLinks })));
501
455
  const toggleHighlightTitles = () => setState((s) => (Object.assign(Object.assign({}, s), { highlightTitles: !s.highlightTitles })));
502
456
  const toggleReadableFont = () => setState((s) => (Object.assign(Object.assign({}, s), { readableFont: !s.readableFont })));
503
- const toggleVoice = () => setState((s) => (Object.assign(Object.assign({}, s), { voiceEnabled: !s.voiceEnabled })));
504
457
  const toggleReadAloud = () => setState((s) => (Object.assign(Object.assign({}, s), { readAloud: !s.readAloud })));
505
458
  const setColorBlindMode = (mode) => setState((s) => (Object.assign(Object.assign({}, s), { colorBlindMode: mode })));
506
459
  const toggleFocusIndicator = () => setState((s) => (Object.assign(Object.assign({}, s), { focusIndicator: !s.focusIndicator })));
@@ -585,10 +538,10 @@ const AccessibilityProvider = ({ children, translations: customTranslations, goo
585
538
  toggleHighContrast,
586
539
  toggleNegativeContrast,
587
540
  toggleLightBackground,
541
+ toggleDarkMode,
588
542
  toggleUnderlineLinks,
589
543
  toggleHighlightTitles,
590
544
  toggleReadableFont,
591
- toggleVoice,
592
545
  toggleReadAloud,
593
546
  setColorBlindMode,
594
547
  toggleFocusIndicator,
@@ -605,9 +558,9 @@ const useAccessibility = () => {
605
558
 
606
559
  const cn$1 = (...parts) => parts.filter(Boolean).join(" ");
607
560
  const AccessibilityToolbar = ({ className, style, classes, }) => {
608
- 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();
561
+ 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();
609
562
  return (React.createElement("div", { className: cn$1("accessibility-toolbar notranslate", classes === null || classes === void 0 ? void 0 : classes.root, className), style: style, translate: "no" },
610
- React.createElement("select", { className: cn$1(classes === null || classes === void 0 ? void 0 : classes.select), value: language, onChange: (e) => setLanguage(e.target.value) },
563
+ 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" },
611
564
  React.createElement("option", { value: "en" }, "English"),
612
565
  React.createElement("option", { value: "tl" }, "Tagalog"),
613
566
  React.createElement("option", { value: "ceb" }, "Cebuano")),
@@ -621,14 +574,12 @@ const AccessibilityToolbar = ({ className, style, classes, }) => {
621
574
  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")),
622
575
  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")),
623
576
  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")),
577
+ 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")),
624
578
  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")),
625
579
  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")),
626
580
  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")),
627
581
  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")),
628
582
  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")),
629
- 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 },
630
- "\uD83C\uDFA4 ",
631
- translate("voiceCommand")),
632
583
  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 },
633
584
  "\uD83D\uDD0A ",
634
585
  translate("readAloud")),
@@ -643,7 +594,7 @@ const AccessibilityToolbar = ({ className, style, classes, }) => {
643
594
  const cn = (...parts) => parts.filter(Boolean).join(" ");
644
595
  const AccessibilityDropdown = ({ className, style, classes, triggerLabel = "♿ Accessibility", renderTrigger, }) => {
645
596
  const [isOpen, setIsOpen] = React.useState(false);
646
- 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();
597
+ 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();
647
598
  const toggle = () => setIsOpen(!isOpen);
648
599
  const closePanel = () => setIsOpen(false);
649
600
  const textScaleDelta = textSize - 100;
@@ -659,12 +610,11 @@ const AccessibilityDropdown = ({ className, style, classes, triggerLabel = "♿
659
610
  isOpen && (React.createElement("div", { className: cn("a11y-panel", classes === null || classes === void 0 ? void 0 : classes.panel) },
660
611
  React.createElement("div", { className: cn("a11y-panel-header", classes === null || classes === void 0 ? void 0 : classes.panelHeader) },
661
612
  React.createElement("div", { className: "a11y-panel-heading" },
662
- React.createElement("span", { className: "a11y-panel-eyebrow" }, "NGP"),
663
613
  React.createElement("label", { className: cn("a11y-panel-title", classes === null || classes === void 0 ? void 0 : classes.title) }, "Accessibility Options")),
664
614
  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")),
665
615
  React.createElement("div", { className: cn("a11y-language", classes === null || classes === void 0 ? void 0 : classes.section) },
666
616
  React.createElement("label", { htmlFor: "a11y-language-select", className: cn("a11y-language-label", classes === null || classes === void 0 ? void 0 : classes.title) }, translate("language")),
667
- React.createElement("select", { id: "a11y-language-select", value: language, onChange: (e) => setLanguage(e.target.value) },
617
+ React.createElement("select", { id: "a11y-language-select", className: "notranslate", value: language, onChange: (e) => setLanguage(e.target.value), translate: "no" },
668
618
  React.createElement("option", { value: "en" }, "English"),
669
619
  React.createElement("option", { value: "tl" }, "Tagalog"),
670
620
  React.createElement("option", { value: "ceb" }, "Cebuano"),
@@ -692,13 +642,13 @@ const AccessibilityDropdown = ({ className, style, classes, triggerLabel = "♿
692
642
  React.createElement("div", { className: cn("a11y-grid", classes === null || classes === void 0 ? void 0 : classes.section) },
693
643
  React.createElement("button", { className: cn("a11y-card", highContrast && "active", classes === null || classes === void 0 ? void 0 : classes.button), onClick: toggleHighContrast }, translate("highContrast")),
694
644
  React.createElement("button", { className: cn("a11y-card", negativeContrast && "active", classes === null || classes === void 0 ? void 0 : classes.button), onClick: toggleNegativeContrast }, translate("negativeContrast")),
695
- React.createElement("button", { className: cn("a11y-card", lightBackground && "active", classes === null || classes === void 0 ? void 0 : classes.button), onClick: toggleLightBackground }, translate("lightBackground")))),
645
+ React.createElement("button", { className: cn("a11y-card", lightBackground && "active", classes === null || classes === void 0 ? void 0 : classes.button), onClick: toggleLightBackground }, translate("lightBackground")),
646
+ React.createElement("button", { className: cn("a11y-card", darkMode && "active", classes === null || classes === void 0 ? void 0 : classes.button), onClick: toggleDarkMode }, translate("darkMode")))),
696
647
  React.createElement("section", { className: cn("a11y-section", classes === null || classes === void 0 ? void 0 : classes.section) },
697
648
  React.createElement("h3", { className: cn("a11y-section-title", classes === null || classes === void 0 ? void 0 : classes.title) }, "Accessibility Tools"),
698
649
  React.createElement("div", { className: cn("a11y-grid", classes === null || classes === void 0 ? void 0 : classes.section) },
699
650
  React.createElement("button", { className: cn("a11y-card", pauseAnimations && "active", classes === null || classes === void 0 ? void 0 : classes.button), onClick: togglePauseAnimations }, translate("pauseAnimations")),
700
- React.createElement("button", { className: cn("a11y-card", readingGuide && "active", classes === null || classes === void 0 ? void 0 : classes.button), onClick: toggleReadingGuide }, translate("readingGuide")),
701
- React.createElement("button", { className: cn("a11y-card", voiceEnabled && "active", classes === null || classes === void 0 ? void 0 : classes.button), onClick: toggleVoice }, translate("voiceCommand"))))))));
651
+ React.createElement("button", { className: cn("a11y-card", readingGuide && "active", classes === null || classes === void 0 ? void 0 : classes.button), onClick: toggleReadingGuide }, translate("readingGuide"))))))));
702
652
  };
703
653
 
704
654
  const T = ({ k, children }) => {