vision-accessibility 1.0.1 → 1.0.3

package/dist/index.esm.js

@@ -1,4 +1,5 @@
-import require$$0, { useCallback, useState, useEffect, createContext, useContext, useRef } from "react";
+import require$$0, { useCallback, useState, useEffect, createContext, useContext, useRef, useLayoutEffect } from "react";
+import { createPortal } from "react-dom";
 const DEFAULT_ACCESSIBILITY_SETTINGS = {
   isEnabled: false,
   colorScheme: "standard",
@@ -6,6 +7,31 @@ const DEFAULT_ACCESSIBILITY_SETTINGS = {
   showImages: true
 };
 const STORAGE_KEY = "accessibility-settings";
+const defaultTranslations = {
+  panelTitle: "Настройки доступности",
+  panelDescription: "Настройте отображение страницы для улучшения доступности",
+  closePanelLabel: "Закрыть панель настроек доступности",
+  colorSchemeTitle: "Цветовая схема",
+  colorSchemeStandardLabel: "Стандартный",
+  colorSchemeStandardDescription: "Обычная цветовая схема сайта",
+  colorSchemeHighContrastLabel: "Контрастный белый на черном",
+  colorSchemeHighContrastDescription: "Высококонтрастная схема для лучшей читаемости",
+  colorSchemeGrayscaleLabel: "Черно-белый",
+  colorSchemeGrayscaleDescription: "Преобразование всех цветов в оттенки серого",
+  fontSizeTitle: "Размер шрифта",
+  fontSizeSmallLabel: "Мелкий",
+  fontSizeSmallDescription: "Уменьшенный размер текста (80%)",
+  fontSizeStandardLabel: "Стандартный",
+  fontSizeStandardDescription: "Обычный размер текста",
+  fontSizeLargeLabel: "Крупный",
+  fontSizeLargeDescription: "Увеличенный размер текста (130%)",
+  imageControlTitle: "Изображения",
+  imageControlShowLabel: "Показывать изображения",
+  imageControlHideLabel: "Скрывать изображения",
+  accessibilityToggleLabel: "Режим доступности",
+  accessibilityEnableDescription: "Все настройки доступности активны. Используйте элементы управления ниже для точной настройки.",
+  accessibilityDisableDescription: "Включите режим доступности для активации всех настроек. При выключении все изменения будут сброшены."
+};
 const saveToStorage = (settings) => {
   try {
     if (typeof window === "undefined") return;
@@ -281,17 +307,24 @@ const applyColorScheme = (scheme) => {
     }
   }, `Ошибка при применении цветовой схемы: ${scheme}`);
 };
+const isAccessibilityPanelElement = (element) => {
+  return element.hasAttribute("data-accessibility-panel-container") || element.closest("[data-accessibility-panel-container]") !== null;
+};
 const applyFontSize = (size) => {
   applyDynamicFontSize(size);
 };
 const applyImageVisibility = (showImages) => {
   safeDOMOperation(() => {
     if (!isDOMAvailable()) return;
-    const elements = getImageElements();
+    const images = document.querySelectorAll("img");
     if (showImages) {
-      removeClassFromElements(elements, CSS_CLASSES.HIDE_IMAGES);
+      images.forEach((img) => {
+        img.style.visibility = "";
+      });
     } else {
-      applyClassToElements(elements, CSS_CLASSES.HIDE_IMAGES);
+      images.forEach((img) => {
+        img.style.visibility = "hidden";
+      });
     }
   }, `Ошибка при управлении отображением изображений: ${showImages}`);
 };
@@ -303,18 +336,18 @@ const removeAllAccessibilityStyles = () => {
     document.body.classList.remove(CSS_CLASSES.FONT_LARGE);
     document.body.style.filter = "";
     resetAllFontSizes();
-    const imageElements = getImageElements();
-    removeClassFromElements(imageElements, CSS_CLASSES.HIDE_IMAGES);
+    const images = document.querySelectorAll("img");
+    images.forEach((img) => {
+      img.style.visibility = "";
+    });
     removeHighContrastStylesFromAllElements();
   }, "Ошибка при удалении всех стилей доступности");
 };
 const applyAllSettings = (settings) => {
-  if (!settings.isEnabled) {
-    removeAllAccessibilityStyles();
-    return;
+  if (settings.isEnabled) {
+    applyColorScheme(settings.colorScheme);
+    applyFontSize(settings.fontSize);
   }
-  applyColorScheme(settings.colorScheme);
-  applyFontSize(settings.fontSize);
   applyImageVisibility(settings.showImages);
 };
 const applyHighContrastStylesToAllElements = () => {
@@ -322,35 +355,35 @@ const applyHighContrastStylesToAllElements = () => {
     if (!isDOMAvailable()) return;
     const allElements = document.querySelectorAll("*");
     allElements.forEach((element) => {
-      if (element instanceof HTMLElement) {
+      if (element instanceof HTMLElement && !isAccessibilityPanelElement(element)) {
         element.style.backgroundColor = "#000";
         element.style.color = "#fff";
         element.style.borderColor = "#fff";
       }
     });
-    const links = document.querySelectorAll("a");
+    const links = document.querySelectorAll("a:not([data-accessibility-panel-container])");
     links.forEach((link) => {
-      if (link instanceof HTMLElement) {
+      if (link instanceof HTMLElement && !isAccessibilityPanelElement(link)) {
         link.style.color = "#ffff00";
       }
     });
-    const visitedLinks = document.querySelectorAll("a:visited");
+    const visitedLinks = document.querySelectorAll("a:visited:not([data-accessibility-panel-container])");
     visitedLinks.forEach((link) => {
-      if (link instanceof HTMLElement) {
+      if (link instanceof HTMLElement && !isAccessibilityPanelElement(link)) {
         link.style.color = "#ff00ff";
       }
     });
-    const buttons = document.querySelectorAll("button");
+    const buttons = document.querySelectorAll("button:not([data-accessibility-panel-container])");
     buttons.forEach((button) => {
-      if (button instanceof HTMLElement) {
+      if (button instanceof HTMLElement && !isAccessibilityPanelElement(button)) {
         button.style.backgroundColor = "#fff";
         button.style.color = "#000";
         button.style.border = "2px solid #fff";
       }
     });
-    const inputs = document.querySelectorAll("input, textarea, select");
+    const inputs = document.querySelectorAll("input, textarea, select:not([data-accessibility-panel-container])");
     inputs.forEach((input) => {
-      if (input instanceof HTMLElement) {
+      if (input instanceof HTMLElement && !isAccessibilityPanelElement(input)) {
         input.style.backgroundColor = "#fff";
         input.style.color = "#000";
         input.style.border = "2px solid #fff";
@@ -363,35 +396,35 @@ const removeHighContrastStylesFromAllElements = () => {
     if (!isDOMAvailable()) return;
     const allElements = document.querySelectorAll("*");
     allElements.forEach((element) => {
-      if (element instanceof HTMLElement) {
+      if (element instanceof HTMLElement && !isAccessibilityPanelElement(element)) {
         element.style.backgroundColor = "";
         element.style.color = "";
         element.style.borderColor = "";
       }
     });
-    const links = document.querySelectorAll("a");
+    const links = document.querySelectorAll("a:not([data-accessibility-panel-container])");
     links.forEach((link) => {
-      if (link instanceof HTMLElement) {
+      if (link instanceof HTMLElement && !isAccessibilityPanelElement(link)) {
         link.style.color = "";
       }
     });
-    const visitedLinks = document.querySelectorAll("a:visited");
+    const visitedLinks = document.querySelectorAll("a:visited:not([data-accessibility-panel-container])");
     visitedLinks.forEach((link) => {
-      if (link instanceof HTMLElement) {
+      if (link instanceof HTMLElement && !isAccessibilityPanelElement(link)) {
         link.style.color = "";
       }
     });
-    const buttons = document.querySelectorAll("button");
+    const buttons = document.querySelectorAll("button:not([data-accessibility-panel-container])");
     buttons.forEach((button) => {
-      if (button instanceof HTMLElement) {
+      if (button instanceof HTMLElement && !isAccessibilityPanelElement(button)) {
         button.style.backgroundColor = "";
         button.style.color = "";
         button.style.border = "";
       }
     });
-    const inputs = document.querySelectorAll("input, textarea, select");
+    const inputs = document.querySelectorAll("input, textarea, select:not([data-accessibility-panel-container])");
     inputs.forEach((input) => {
-      if (input instanceof HTMLElement) {
+      if (input instanceof HTMLElement && !isAccessibilityPanelElement(input)) {
         input.style.backgroundColor = "";
         input.style.color = "";
         input.style.border = "";
@@ -400,7 +433,7 @@ const removeHighContrastStylesFromAllElements = () => {
   }, "Ошибка при удалении стилей высокого контраста со всех элементов");
 };
 const applySettingIfEnabled = (isEnabled, settingType, value) => {
-  if (!isEnabled) {
+  if (!isEnabled && settingType !== "imageVisibility") {
     return;
   }
   switch (settingType) {
@@ -871,8 +904,10 @@ const styles$4 = {
   highContrastMode: highContrastMode$4
 };
 const AccessibilityToggle = ({
-  className
+  className,
+  translations = {}
 }) => {
+  const mergedTranslations = { ...defaultTranslations, ...translations };
   const { settings, updateSettings } = useAccessibilityContext();
   const isEnabled = settings.isEnabled;
   const handleToggleChange = (event) => {
@@ -892,8 +927,8 @@ const AccessibilityToggle = ({
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$4.toggleSlider, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$4.toggleThumb }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$4.toggleContent, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$4.toggleTitle, children: "Режим доступности" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$4.toggleStatus, children: isEnabled ? "Включен" : "Выключен" })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$4.toggleTitle, children: mergedTranslations.accessibilityToggleLabel }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$4.toggleStatus, children: isEnabled ? mergedTranslations.accessibilityEnableLabel : mergedTranslations.accessibilityDisableLabel })
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -901,7 +936,7 @@ const AccessibilityToggle = ({
       {
         id: "accessibility-toggle-description",
         className: styles$4.description,
-        children: isEnabled ? "Все настройки доступности активны. Используйте элементы управления ниже для точной настройки." : "Включите режим доступности для активации всех настроек. При выключении все изменения будут сброшены."
+        children: isEnabled ? mergedTranslations.accessibilityEnableDescription || "Все настройки доступности активны. Используйте элементы управления ниже для точной настройки." : mergedTranslations.accessibilityDisableDescription || "Включите режим доступности для активации всех настроек. При выключении все изменения будут сброшены."
       }
     )
   ] }) });
@@ -934,26 +969,11 @@ const styles$3 = {
   optionDescription: optionDescription$1,
   highContrastMode: highContrastMode$3
 };
-const COLOR_SCHEME_OPTIONS = [
-  {
-    value: "standard",
-    label: "Стандартный",
-    description: "Обычная цветовая схема сайта"
-  },
-  {
-    value: "high-contrast",
-    label: "Контрастный белый на черном",
-    description: "Высококонтрастная схема для лучшей читаемости"
-  },
-  {
-    value: "grayscale",
-    label: "Черно-белый",
-    description: "Преобразование всех цветов в оттенки серого"
-  }
-];
 const ColorSchemeControl = ({
-  className
+  className,
+  translations = {}
 }) => {
+  const mergedTranslations = { ...defaultTranslations, ...translations };
   const { settings, updateSettings } = useAccessibilityContext();
   const colorScheme = settings.colorScheme;
   const isEnabled = settings.isEnabled;
@@ -962,41 +982,111 @@ const ColorSchemeControl = ({
     updateSettings({ colorScheme: newColorScheme });
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${styles$3.colorSchemeControl} ${className || ""} ${!isEnabled ? styles$3.disabled : ""} ${colorScheme === "high-contrast" ? styles$3.highContrastMode : ""}`, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: styles$3.title, children: "Цветовая схема" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$3.optionsContainer, role: "radiogroup", "aria-labelledby": "color-scheme-title", children: COLOR_SCHEME_OPTIONS.map((option2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "label",
-      {
-        className: `${styles$3.option} ${colorScheme === option2.value ? styles$3.selected : ""} ${!isEnabled ? styles$3.optionDisabled : ""}`,
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "input",
-            {
-              type: "radio",
-              name: "colorScheme",
-              value: option2.value,
-              checked: colorScheme === option2.value,
-              onChange: handleColorSchemeChange,
-              className: styles$3.radioInput,
-              "aria-describedby": `color-scheme-${option2.value}-description`,
-              disabled: !isEnabled
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$3.optionContent, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$3.optionLabel, children: option2.label }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: styles$3.title, children: mergedTranslations.colorSchemeTitle }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$3.optionsContainer, role: "radiogroup", "aria-labelledby": "color-scheme-title", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "label",
+        {
+          className: `${styles$3.option} ${colorScheme === "standard" ? styles$3.selected : ""} ${!isEnabled ? styles$3.optionDisabled : ""}`,
+          children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "span",
+              "input",
               {
-                id: `color-scheme-${option2.value}-description`,
-                className: styles$3.optionDescription,
-                children: option2.description
+                type: "radio",
+                name: "colorScheme",
+                value: "standard",
+                checked: colorScheme === "standard",
+                onChange: handleColorSchemeChange,
+                className: styles$3.radioInput,
+                "aria-describedby": "color-scheme-standard-description",
+                disabled: !isEnabled
               }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$3.radioIndicator, "aria-hidden": "true" })
-        ]
-      },
-      option2.value
-    )) })
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$3.optionContent, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$3.optionLabel, children: mergedTranslations.colorSchemeStandardLabel }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "span",
+                {
+                  id: "color-scheme-standard-description",
+                  className: styles$3.optionDescription,
+                  children: mergedTranslations.colorSchemeStandardDescription
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$3.radioIndicator, "aria-hidden": "true" })
+          ]
+        },
+        "standard"
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "label",
+        {
+          className: `${styles$3.option} ${colorScheme === "high-contrast" ? styles$3.selected : ""} ${!isEnabled ? styles$3.optionDisabled : ""}`,
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "input",
+              {
+                type: "radio",
+                name: "colorScheme",
+                value: "high-contrast",
+                checked: colorScheme === "high-contrast",
+                onChange: handleColorSchemeChange,
+                className: styles$3.radioInput,
+                "aria-describedby": "color-scheme-high-contrast-description",
+                disabled: !isEnabled
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$3.optionContent, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$3.optionLabel, children: mergedTranslations.colorSchemeHighContrastLabel }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "span",
+                {
+                  id: "color-scheme-high-contrast-description",
+                  className: styles$3.optionDescription,
+                  children: mergedTranslations.colorSchemeHighContrastDescription
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$3.radioIndicator, "aria-hidden": "true" })
+          ]
+        },
+        "high-contrast"
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "label",
+        {
+          className: `${styles$3.option} ${colorScheme === "grayscale" ? styles$3.selected : ""} ${!isEnabled ? styles$3.optionDisabled : ""}`,
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "input",
+              {
+                type: "radio",
+                name: "colorScheme",
+                value: "grayscale",
+                checked: colorScheme === "grayscale",
+                onChange: handleColorSchemeChange,
+                className: styles$3.radioInput,
+                "aria-describedby": "color-scheme-grayscale-description",
+                disabled: !isEnabled
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$3.optionContent, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$3.optionLabel, children: mergedTranslations.colorSchemeGrayscaleLabel }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "span",
+                {
+                  id: "color-scheme-grayscale-description",
+                  className: styles$3.optionDescription,
+                  children: mergedTranslations.colorSchemeGrayscaleDescription
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$3.radioIndicator, "aria-hidden": "true" })
+          ]
+        },
+        "grayscale"
+      )
+    ] })
   ] });
 };
 const fontSizeControl = "_fontSizeControl_1c68l_9";
@@ -1027,26 +1117,11 @@ const styles$2 = {
   optionDescription,
   highContrastMode: highContrastMode$2
 };
-const FONT_SIZE_OPTIONS = [
-  {
-    value: "small",
-    label: "Мелкий",
-    description: "Уменьшенный размер текста (80%)"
-  },
-  {
-    value: "standard",
-    label: "Стандартный",
-    description: "Обычный размер текста"
-  },
-  {
-    value: "large",
-    label: "Крупный",
-    description: "Увеличенный размер текста (130%)"
-  }
-];
 const FontSizeControl = ({
-  className
+  className,
+  translations = {}
 }) => {
+  const mergedTranslations = { ...defaultTranslations, ...translations };
   const { settings, updateSettings } = useAccessibilityContext();
   const fontSize = settings.fontSize;
   const isEnabled = settings.isEnabled;
@@ -1055,41 +1130,111 @@ const FontSizeControl = ({
     updateSettings({ fontSize: newFontSize });
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${styles$2.fontSizeControl} ${className || ""} ${!isEnabled ? styles$2.disabled : ""} ${settings.colorScheme === "high-contrast" ? styles$2.highContrastMode : ""}`, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: styles$2.title, children: "Размер шрифта" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$2.optionsContainer, role: "radiogroup", "aria-labelledby": "font-size-title", children: FONT_SIZE_OPTIONS.map((option2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      "label",
-      {
-        className: `${styles$2.option} ${fontSize === option2.value ? styles$2.selected : ""} ${!isEnabled ? styles$2.optionDisabled : ""}`,
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "input",
-            {
-              type: "radio",
-              name: "fontSize",
-              value: option2.value,
-              checked: fontSize === option2.value,
-              onChange: handleFontSizeChange,
-              className: styles$2.radioInput,
-              "aria-describedby": `font-size-${option2.value}-description`,
-              disabled: !isEnabled
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$2.optionContent, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$2.optionLabel, children: option2.label }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: styles$2.title, children: mergedTranslations.fontSizeTitle }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$2.optionsContainer, role: "radiogroup", "aria-labelledby": "font-size-title", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "label",
+        {
+          className: `${styles$2.option} ${fontSize === "small" ? styles$2.selected : ""} ${!isEnabled ? styles$2.optionDisabled : ""}`,
+          children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "span",
+              "input",
               {
-                id: `font-size-${option2.value}-description`,
-                className: styles$2.optionDescription,
-                children: option2.description
+                type: "radio",
+                name: "fontSize",
+                value: "small",
+                checked: fontSize === "small",
+                onChange: handleFontSizeChange,
+                className: styles$2.radioInput,
+                "aria-describedby": "font-size-small-description",
+                disabled: !isEnabled
               }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$2.radioIndicator, "aria-hidden": "true" })
-        ]
-      },
-      option2.value
-    )) })
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$2.optionContent, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$2.optionLabel, children: mergedTranslations.fontSizeSmallLabel }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "span",
+                {
+                  id: "font-size-small-description",
+                  className: styles$2.optionDescription,
+                  children: mergedTranslations.fontSizeSmallDescription
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$2.radioIndicator, "aria-hidden": "true" })
+          ]
+        },
+        "small"
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "label",
+        {
+          className: `${styles$2.option} ${fontSize === "standard" ? styles$2.selected : ""} ${!isEnabled ? styles$2.optionDisabled : ""}`,
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "input",
+              {
+                type: "radio",
+                name: "fontSize",
+                value: "standard",
+                checked: fontSize === "standard",
+                onChange: handleFontSizeChange,
+                className: styles$2.radioInput,
+                "aria-describedby": "font-size-standard-description",
+                disabled: !isEnabled
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$2.optionContent, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$2.optionLabel, children: mergedTranslations.fontSizeStandardLabel }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "span",
+                {
+                  id: "font-size-standard-description",
+                  className: styles$2.optionDescription,
+                  children: mergedTranslations.fontSizeStandardDescription
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$2.radioIndicator, "aria-hidden": "true" })
+          ]
+        },
+        "standard"
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "label",
+        {
+          className: `${styles$2.option} ${fontSize === "large" ? styles$2.selected : ""} ${!isEnabled ? styles$2.optionDisabled : ""}`,
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "input",
+              {
+                type: "radio",
+                name: "fontSize",
+                value: "large",
+                checked: fontSize === "large",
+                onChange: handleFontSizeChange,
+                className: styles$2.radioInput,
+                "aria-describedby": "font-size-large-description",
+                disabled: !isEnabled
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$2.optionContent, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$2.optionLabel, children: mergedTranslations.fontSizeLargeLabel }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "span",
+                {
+                  id: "font-size-large-description",
+                  className: styles$2.optionDescription,
+                  children: mergedTranslations.fontSizeLargeDescription
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$2.radioIndicator, "aria-hidden": "true" })
+          ]
+        },
+        "large"
+      )
+    ] })
   ] });
 };
 const imageControl = "_imageControl_hkxkm_9";
@@ -1119,8 +1264,10 @@ const styles$1 = {
   highContrastMode: highContrastMode$1
 };
 const ImageControl = ({
-  className
+  className,
+  translations = {}
 }) => {
+  const mergedTranslations = { ...defaultTranslations, ...translations };
   const { settings, updateSettings } = useAccessibilityContext();
   const showImages = settings.showImages;
   const isEnabled = settings.isEnabled;
@@ -1128,7 +1275,7 @@ const ImageControl = ({
     updateSettings({ showImages: event.target.checked });
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${styles$1.imageControl} ${className || ""} ${!isEnabled ? styles$1.disabled : ""} ${settings.colorScheme === "high-contrast" ? styles$1.highContrastMode : ""}`, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: styles$1.title, children: "Изображения" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: styles$1.title, children: mergedTranslations.imageControlTitle }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.switchContainer, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: `${styles$1.switchLabel} ${!isEnabled ? styles$1.switchDisabled : ""}`, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -1143,43 +1290,44 @@ const ImageControl = ({
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$1.switchSlider, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$1.switchThumb }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$1.switchText, children: showImages ? "Показывать изображения" : "Скрывать изображения" })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: styles$1.switchText, children: showImages ? mergedTranslations.imageControlShowLabel : mergedTranslations.imageControlHideLabel })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "p",
         {
           id: "image-control-description",
           className: styles$1.description,
-          children: showImages ? "Изображения отображаются на странице" : "Изображения скрыты для лучшей концентрации на тексте"
+          children: showImages ? mergedTranslations.imageControlShowDescription : mergedTranslations.imageControlHideDescription
         }
       )
     ] })
   ] });
 };
-const stickyContainer = "_stickyContainer_lzoik_9";
-const panel = "_panel_lzoik_23";
-const topRight = "_top-right_lzoik_38";
-const topLeft = "_top-left_lzoik_42";
-const bottomRight = "_bottom-right_lzoik_46";
-const bottomLeft = "_bottom-left_lzoik_54";
-const header = "_header_lzoik_75";
-const title = "_title_lzoik_84";
-const closeButton = "_closeButton_lzoik_92";
-const description = "_description_lzoik_123";
-const content = "_content_lzoik_131";
-const controls = "_controls_lzoik_151";
-const highContrastMode = "_highContrastMode_lzoik_157";
-const slideIn = "_slideIn_lzoik_1";
+const stickyContainer = "_stickyContainer_1xq4j_9";
+const topRight = "_top-right_1xq4j_16";
+const topLeft = "_top-left_1xq4j_20";
+const panel = "_panel_1xq4j_31";
+const bottomRight = "_bottom-right_1xq4j_53";
+const bottomLeft = "_bottom-left_1xq4j_53";
+const header = "_header_1xq4j_59";
+const title = "_title_1xq4j_68";
+const closeButton = "_closeButton_1xq4j_76";
+const description = "_description_1xq4j_107";
+const content = "_content_1xq4j_115";
+const controls = "_controls_1xq4j_135";
+const highContrastMode = "_highContrastMode_1xq4j_141";
+const slideIn = "_slideIn_1xq4j_1";
+const grayscaleMode = "_grayscaleMode_1xq4j_191";
 const AccessibilityPanel_module = {
   stickyContainer,
-  panel,
-  "top-right": "_top-right_lzoik_38",
+  "top-right": "_top-right_1xq4j_16",
   topRight,
-  "top-left": "_top-left_lzoik_42",
+  "top-left": "_top-left_1xq4j_20",
   topLeft,
-  "bottom-right": "_bottom-right_lzoik_46",
+  panel,
+  "bottom-right": "_bottom-right_1xq4j_53",
   bottomRight,
-  "bottom-left": "_bottom-left_lzoik_54",
+  "bottom-left": "_bottom-left_1xq4j_53",
   bottomLeft,
   header,
   title,
@@ -1188,7 +1336,8 @@ const AccessibilityPanel_module = {
   content,
   controls,
   highContrastMode,
-  slideIn
+  slideIn,
+  grayscaleMode
 };
 const stylesImport = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
@@ -1199,6 +1348,7 @@ const stylesImport = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.define
   controls,
   default: AccessibilityPanel_module,
   description,
+  grayscaleMode,
   header,
   highContrastMode,
   panel,
@@ -1212,9 +1362,23 @@ const styles = typeof stylesImport === "object" && AccessibilityPanel_module ? A
 const AccessibilityPanelInner = ({
   isOpen,
   onClose,
-  position = "top-right"
+  position = "top-right",
+  translations = {}
 }) => {
   const panelRef = useRef(null);
+  const mergedTranslations = { ...defaultTranslations, ...translations };
+  const [portalContainer, setPortalContainer] = require$$0.useState(null);
+  useLayoutEffect(() => {
+    const container = document.createElement("div");
+    container.setAttribute("data-accessibility-panel-container", "true");
+    document.documentElement.appendChild(container);
+    setPortalContainer(container);
+    return () => {
+      if (container.parentNode) {
+        container.parentNode.removeChild(container);
+      }
+    };
+  }, []);
   useEffect(() => {
     if (!isOpen) return;
     const handleClickOutside = (event) => {
@@ -1247,56 +1411,60 @@ const AccessibilityPanelInner = ({
     event.stopPropagation();
     onClose();
   };
-  if (!isOpen) {
+  if (!isOpen || !portalContainer) {
     return null;
   }
   const { settings } = useAccessibilityContext();
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn(styles.stickyContainer), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "div",
-    {
-      ref: panelRef,
-      className: cn(
-        styles.panel,
-        styles[position],
-        settings.colorScheme === "high-contrast" && styles.highContrastMode
-      ),
-      role: "dialog",
-      "aria-modal": "true",
-      "aria-labelledby": "accessibility-panel-title",
-      "aria-describedby": "accessibility-panel-description",
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn(styles.header), children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { id: "accessibility-panel-title", className: cn(styles.title), children: "Настройки доступности" }),
+  return createPortal(
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn(styles.stickyContainer, styles[position]), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        ref: panelRef,
+        className: cn(
+          styles.panel,
+          settings.colorScheme === "high-contrast" && styles.highContrastMode,
+          settings.colorScheme === "grayscale" && styles.grayscaleMode
+        ),
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": "accessibility-panel-title",
+        "aria-describedby": "accessibility-panel-description",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn(styles.header), children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { id: "accessibility-panel-title", className: cn(styles.title), children: mergedTranslations.panelTitle }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                onClick: handleCloseClick,
+                className: cn(styles.closeButton),
+                "aria-label": mergedTranslations.closePanelLabel,
+                type: "button",
+                children: "×"
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "button",
+            "div",
             {
-              onClick: handleCloseClick,
-              className: cn(styles.closeButton),
-              "aria-label": "Закрыть панель настроек доступности",
-              type: "button",
-              children: "×"
+              id: "accessibility-panel-description",
+              className: cn(styles.description),
+              children: mergedTranslations.panelDescription
             }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "div",
-          {
-            id: "accessibility-panel-description",
-            className: cn(styles.description),
-            children: "Настройте отображение страницы для улучшения доступности"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn(styles.content), children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(AccessibilityToggle, {}),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn(styles.controls), children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(ColorSchemeControl, {}),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(FontSizeControl, {}),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(ImageControl, {})
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn(styles.content), children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(AccessibilityToggle, { translations: mergedTranslations }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn(styles.controls), children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(ColorSchemeControl, { translations: mergedTranslations }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(FontSizeControl, { translations: mergedTranslations }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(ImageControl, { translations: mergedTranslations })
+            ] })
           ] })
-        ] })
-      ]
-    }
-  ) });
+        ]
+      }
+    ) }),
+    portalContainer
+    // Рендерим в отдельный контейнер вне document.body, чтобы избежать влияния фильтров
+  );
 };
 const AccessibilityPanel = (props) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(AccessibilityProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(AccessibilityPanelInner, { ...props }) });
@@ -1319,6 +1487,7 @@ export {
   applyImageVisibility,
   applySettingIfEnabled,
   clearStorage,
+  defaultTranslations,
   getImageElements,
   getTextElements,
   isDOMAvailable,