vision-accessibility 1.0.1 → 1.0.3

package/src/index.ts

@@ -3,20 +3,24 @@
  */
 
 // Основные типы
-export type { 
-  AccessibilitySettings, 
-  ColorScheme, 
-  FontSize, 
+export type {
+  AccessibilitySettings,
+  ColorScheme,
+  FontSize,
   AccessibilityPanelProps,
   ControlComponentProps,
   AccessibilityContextType
 } from './types';
 
-export { 
-  DEFAULT_ACCESSIBILITY_SETTINGS, 
-  STORAGE_KEY 
+export {
+  DEFAULT_ACCESSIBILITY_SETTINGS,
+  STORAGE_KEY
 } from './types';
 
+// Типы и конфигурации для локализации
+export type { AccessibilityTranslations } from './config/translations';
+export { defaultTranslations } from './config/translations';
+
 // Утилиты для работы с localStorage
 export { 
   saveToStorage, 
@@ -77,4 +81,4 @@ export { ImageControl } from './components/ImageControl/ImageControl';
 
 // Стили (для импорта в основное приложение)
 // Пользователи должны импортировать стили напрямую:
-// import 'vision-accessibility/dist/style.css';
+// import 'vision-accessibility/dist/style.css';

package/src/lib/css-applier.ts

@@ -69,6 +69,14 @@ export const applyColorScheme = (scheme: ColorScheme): void => {
   }, `Ошибка при применении цветовой схемы: ${scheme}`);
 };
 
+/**
+ * Проверка, является ли элемент частью панели доступности
+ */
+const isAccessibilityPanelElement = (element: Element): boolean => {
+  return element.hasAttribute('data-accessibility-panel-container') || 
+         element.closest('[data-accessibility-panel-container]') !== null;
+};
+
 /**
  * Применение настроек размера шрифта
  * Реализует требования 3.1, 3.2, 3.3:
@@ -92,14 +100,19 @@ export const applyImageVisibility = (showImages: boolean): void => {
   safeDOMOperation(() => {
     if (!isDOMAvailable()) return;
 
-    const elements = getImageElements();
+    // Получаем все изображения на странице
+    const images = document.querySelectorAll('img');
     
     if (showImages) {
       // Требование 4.2: Показывать изображения (восстановление видимости)
-      removeClassFromElements(elements, CSS_CLASSES.HIDE_IMAGES);
+      images.forEach(img => {
+        (img as HTMLElement).style.visibility = '';
+      });
     } else {
-      // Требование 4.1: Скрывать изображения через CSS класс
-      applyClassToElements(elements, CSS_CLASSES.HIDE_IMAGES);
+      // Требование 4.1: Скрывать изображения через visibility: hidden
+      images.forEach(img => {
+        (img as HTMLElement).style.visibility = 'hidden';
+      });
     }
   }, `Ошибка при управлении отображением изображений: ${showImages}`);
 };
@@ -120,9 +133,11 @@ export const removeAllAccessibilityStyles = (): void => {
     // Сбрасываем все изменения размера шрифта
     resetAllFontSizes();
     
-    // Удаляем классы с изображений
-    const imageElements = getImageElements();
-    removeClassFromElements(imageElements, CSS_CLASSES.HIDE_IMAGES);
+    // Сбрасываем inline-стили visibility для изображений
+    const images = document.querySelectorAll('img');
+    images.forEach(img => {
+      (img as HTMLElement).style.visibility = '';
+    });
 
     // Удаляем стили высокого контраста со всех элементов
     removeHighContrastStylesFromAllElements();
@@ -134,15 +149,12 @@ export const removeAllAccessibilityStyles = (): void => {
  * Применяет все переданные настройки одновременно
  */
 export const applyAllSettings = (settings: AccessibilitySettings): void => {
-  if (!settings.isEnabled) {
-    // Если режим доступности выключен, удаляем все стили
-    removeAllAccessibilityStyles();
-    return;
-  }
-
   // Применяем все настройки
-  applyColorScheme(settings.colorScheme);
-  applyFontSize(settings.fontSize);
+  if (settings.isEnabled) {
+    applyColorScheme(settings.colorScheme);
+    applyFontSize(settings.fontSize);
+  }
+  // Применяем настройку отображения изображений независимо от общего режима
   applyImageVisibility(settings.showImages);
 };
 
@@ -153,12 +165,13 @@ export const applyHighContrastStylesToAllElements = (): void => {
   safeDOMOperation(() => {
     if (!isDOMAvailable()) return;
 
-    // Получаем все элементы на странице
+    // Получаем все элементы на странице, исключая элементы панели доступности
     const allElements = document.querySelectorAll('*');
     
     allElements.forEach(element => {
       // Проверяем, что элемент является HTMLElement (имеет стиль)
-      if (element instanceof HTMLElement) {
+      // и не является частью панели доступности
+      if (element instanceof HTMLElement && !isAccessibilityPanelElement(element)) {
         // Применяем стили высокого контраста к каждому элементу
         element.style.backgroundColor = '#000';
         element.style.color = '#fff';
@@ -166,26 +179,26 @@ export const applyHighContrastStylesToAllElements = (): void => {
       }
     });
 
-    // Особые стили для ссылок
-    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';
@@ -193,9 +206,9 @@ export const applyHighContrastStylesToAllElements = (): void => {
     });
 
     // Особые стили для полей ввода
-    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';
@@ -211,12 +224,13 @@ export const removeHighContrastStylesFromAllElements = (): void => {
   safeDOMOperation(() => {
     if (!isDOMAvailable()) return;
 
-    // Получаем все элементы на странице
+    // Получаем все элементы на странице, исключая элементы панели доступности
     const allElements = document.querySelectorAll('*');
     
     allElements.forEach(element => {
       // Проверяем, что элемент является HTMLElement (имеет стиль)
-      if (element instanceof HTMLElement) {
+      // и не является частью панели доступности
+      if (element instanceof HTMLElement && !isAccessibilityPanelElement(element)) {
         // Удаляем инлайновые стили высокого контраста
         element.style.backgroundColor = '';
         element.style.color = '';
@@ -224,26 +238,26 @@ export const removeHighContrastStylesFromAllElements = (): void => {
       }
     });
 
-    // Сбрасываем особые стили для ссылок
-    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 = '';
@@ -251,9 +265,9 @@ export const removeHighContrastStylesFromAllElements = (): void => {
     });
 
     // Сбрасываем особые стили для полей ввода
-    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 = '';
@@ -265,13 +279,15 @@ export const removeHighContrastStylesFromAllElements = (): void => {
 /**
  * Применение конкретной настройки с проверкой общего режима
  * Применяет настройку только если общий режим доступности включен
+ * Исключение: настройка отображения изображений может работать независимо
  */
 export const applySettingIfEnabled = (
   isEnabled: boolean,
   settingType: 'colorScheme' | 'fontSize' | 'imageVisibility',
   value: ColorScheme | FontSize | boolean
 ): void => {
-  if (!isEnabled) {
+  // Для настройки отображения изображений делаем исключение - она может работать независимо
+  if (!isEnabled && settingType !== 'imageVisibility') {
     return;
   }
 

package/src/styles/global.scss

@@ -14,7 +14,7 @@
   
   /* Применяем стили ко всем элементам, включая панель доступности */
   * {
-    background: #000 !important;
+    background: none !important;
     color: #fff !important;
     border-color: #fff !important;
   }
@@ -54,7 +54,4 @@
 /* Размеры шрифтов */
 /* Стили для размера шрифта применяются динамически через JavaScript */
 
-/* Скрытие изображений */
-.accessibility-hide-images {
-  display: none !important;
-}
+/* Скрытие изображений - теперь используется inline стиль visibility */

package/src/types/index.ts

@@ -43,7 +43,9 @@ export interface AccessibilityPanelProps {
   /** Обработчик закрытия панели */
   onClose: () => void;
   /** Позиция панели относительно кнопки */
-  position?: 'top-right' | 'top-left' | 'bottom-left' | 'bottom-right';
+  position?: 'top-right' | 'top-left' ;
+  /** Объект с переводами для настройки локализации */
+  translations?: import('../config/translations').AccessibilityTranslations;
 }
 
 /**
@@ -56,6 +58,46 @@ export interface ControlComponentProps {
   onUpdate: (updates: Partial<AccessibilitySettings>) => void;
 }
 
+/**
+ * Свойства компонента переключателя режима доступности
+ */
+export interface AccessibilityToggleProps {
+  /** CSS класс для дополнительной стилизации */
+  className?: string;
+  /** Объект с переводами */
+  translations?: Record<string, string>;
+}
+
+/**
+ * Свойства компонента управления цветовой схемой
+ */
+export interface ColorSchemeControlProps {
+  /** CSS класс для дополнительной стилизации */
+  className?: string;
+  /** Объект с переводами */
+  translations?: Record<string, string>;
+}
+
+/**
+ * Свойства компонента управления размером шрифта
+ */
+export interface FontSizeControlProps {
+  /** CSS класс для дополнительной стилизации */
+  className?: string;
+  /** Объект с переводами */
+  translations?: Record<string, string>;
+}
+
+/**
+ * Свойства компонента управления изображениями
+ */
+export interface ImageControlProps {
+  /** CSS класс для дополнительной стилизации */
+  className?: string;
+  /** Объект с переводами */
+  translations?: Record<string, string>;
+}
+
 /**
  * Настройки по умолчанию
  */