vision-accessibility 1.0.0

package/src/index.ts

@@ -0,0 +1,80 @@
+/**
+ * Экспорт компонентов панели доступности
+ */
+
+// Основные типы
+export type { 
+  AccessibilitySettings, 
+  ColorScheme, 
+  FontSize, 
+  AccessibilityPanelProps,
+  ControlComponentProps,
+  AccessibilityContextType
+} from './types';
+
+export { 
+  DEFAULT_ACCESSIBILITY_SETTINGS, 
+  STORAGE_KEY 
+} from './types';
+
+// Утилиты для работы с localStorage
+export { 
+  saveToStorage, 
+  loadFromStorage, 
+  clearStorage, 
+  validateSettings,
+  safeLocalStorageOperation
+} from './lib/accessibility-storage';
+
+// Утилиты для работы с DOM
+export { 
+  getTextElements, 
+  getImageElements, 
+  applyClassToElements, 
+  removeClassFromElements,
+  safeDOMOperation,
+  isDOMAvailable
+} from './lib/dom-manipulator';
+
+// Утилиты для применения CSS стилей
+export { 
+  applyColorScheme, 
+  applyFontSize, 
+  applyImageVisibility, 
+  removeAllAccessibilityStyles, 
+  applyAllSettings,
+  applySettingIfEnabled,
+  CSS_CLASSES 
+} from './lib/css-applier';
+
+// Утилиты для динамического управления размером шрифта
+export {
+  applyDynamicFontSize,
+  resetAllFontSizes,
+  updateNewElementsFontSize,
+  isFontSizeModified
+} from './lib/font-size-manager';
+
+// Хуки для управления настройками доступности
+export { 
+  useAccessibilitySettings, 
+  useAccessibilitySetting, 
+  useAccessibilityToggle 
+} from './hooks/useAccessibilitySettings';
+
+// Контекст для управления состоянием
+export { 
+  AccessibilityProvider, 
+  useAccessibilityContext 
+} from './context/AccessibilityContext';
+
+// UI компоненты
+export { AccessibilityPanel } from './components/AccessibilityPanel/AccessibilityPanel';
+export { AccessibilityToggle } from './components/AccessibilityToggle/AccessibilityToggle';
+export { ColorSchemeControl } from './components/ColorSchemeControl/ColorSchemeControl';
+export { FontSizeControl } from './components/FontSizeControl/FontSizeControl';
+export { ImageControl } from './components/ImageControl/ImageControl';
+
+// Стили (для импорта в основное приложение)
+// Пользователи должны импортировать стили напрямую:
+// import 'vision-accessibility/dist/style.css';

package/src/lib/accessibility-storage.ts

@@ -0,0 +1,82 @@
+/**
+ * Модуль для работы с localStorage
+ * Обеспечивает сохранение, загрузку и валидацию настроек доступности
+ */
+
+import { AccessibilitySettings, DEFAULT_ACCESSIBILITY_SETTINGS, STORAGE_KEY } from '../types';
+
+/**
+ * Сохранение настроек в localStorage
+ */
+export const saveToStorage = (settings: AccessibilitySettings): void => {
+  try {
+    if (typeof window === 'undefined') return;
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+  } catch (error) {
+    console.warn('Не удалось сохранить настройки доступности:', error);
+  }
+};
+
+/**
+ * Загрузка настроек из localStorage
+ */
+export const loadFromStorage = (): AccessibilitySettings | null => {
+  try {
+    if (typeof window === 'undefined') return null;
+    const saved = localStorage.getItem(STORAGE_KEY);
+    return saved ? validateSettings(JSON.parse(saved)) : null;
+  } catch (error) {
+    console.warn('Не удалось загрузить настройки доступности:', error);
+    return null;
+  }
+};
+
+/**
+ * Очистка настроек из localStorage
+ */
+export const clearStorage = (): void => {
+  try {
+    if (typeof window === 'undefined') return;
+    localStorage.removeItem(STORAGE_KEY);
+  } catch (error) {
+    console.warn('Не удалось очистить настройки доступности:', error);
+  }
+};
+
+/**
+ * Валидация настроек из localStorage
+ */
+export const validateSettings = (settings: unknown): AccessibilitySettings => {
+  if (!settings || typeof settings !== 'object') {
+    return DEFAULT_ACCESSIBILITY_SETTINGS;
+  }
+
+  const s = settings as Partial<AccessibilitySettings>;
+  
+  return {
+    isEnabled: typeof s.isEnabled === 'boolean' ? s.isEnabled : DEFAULT_ACCESSIBILITY_SETTINGS.isEnabled,
+    colorScheme: ['standard', 'high-contrast', 'grayscale'].includes(s.colorScheme as string) 
+      ? s.colorScheme as AccessibilitySettings['colorScheme']
+      : DEFAULT_ACCESSIBILITY_SETTINGS.colorScheme,
+    fontSize: ['small', 'standard', 'large'].includes(s.fontSize as string)
+      ? s.fontSize as AccessibilitySettings['fontSize']
+      : DEFAULT_ACCESSIBILITY_SETTINGS.fontSize,
+    showImages: typeof s.showImages === 'boolean' ? s.showImages : DEFAULT_ACCESSIBILITY_SETTINGS.showImages
+  };
+};
+
+/**
+ * Безопасное выполнение операций с localStorage
+ */
+export const safeLocalStorageOperation = <T>(
+  operation: () => T,
+  fallback: T,
+  errorMessage: string
+): T => {
+  try {
+    return operation();
+  } catch (error) {
+    console.warn(errorMessage, error);
+    return fallback;
+  }
+};

package/src/lib/css-applier.ts

@@ -0,0 +1,168 @@
+/**
+ * Модуль для применения CSS стилей доступности
+ * Содержит функции для применения различных настроек доступности к DOM
+ * 
+ * Реализует требования:
+ * - 2.1, 2.2, 2.3: Настройка цветовой схемы
+ * - 3.1, 3.2, 3.3: Настройка размера шрифта  
+ * - 4.1, 4.2: Управление отображением изображений
+ */
+
+import { ColorScheme, FontSize, AccessibilitySettings } from '../types';
+import { 
+  getImageElements, 
+  applyClassToElements, 
+  removeClassFromElements,
+  safeDOMOperation,
+  isDOMAvailable
+} from './dom-manipulator';
+import { 
+  applyDynamicFontSize, 
+  resetAllFontSizes
+} from './font-size-manager';
+
+/**
+ * CSS классы для различных настроек доступности
+ */
+export const CSS_CLASSES = {
+  HIGH_CONTRAST: 'accessibility-high-contrast',
+  FONT_SMALL: 'accessibility-font-small',
+  FONT_LARGE: 'accessibility-font-large',
+  HIDE_IMAGES: 'accessibility-hide-images',
+} as const;
+
+/**
+ * Применение цветовой схемы
+ * Реализует требования 2.1, 2.2, 2.3:
+ * - high-contrast: Контрастный белый на черном
+ * - grayscale: Черно-белый режим
+ * - standard: Стандартное оформление
+ */
+export const applyColorScheme = (scheme: ColorScheme): void => {
+  safeDOMOperation(() => {
+    if (!isDOMAvailable()) return;
+
+    // Удаляем существующие классы и стили
+    document.body.classList.remove(CSS_CLASSES.HIGH_CONTRAST);
+    document.body.style.filter = '';
+    
+    switch (scheme) {
+      case 'high-contrast':
+        // Требование 2.1: Контрастный белый на черном
+        document.body.classList.add(CSS_CLASSES.HIGH_CONTRAST);
+        break;
+      case 'grayscale':
+        // Требование 2.2: Черно-белый режим через CSS фильтр
+        document.body.style.filter = 'grayscale(100%)';
+        break;
+      case 'standard':
+        // Требование 2.3: Стандартное оформление (стили уже удалены выше)
+        break;
+      default:
+        console.warn(`Неизвестная цветовая схема: ${scheme}`);
+        break;
+    }
+  }, `Ошибка при применении цветовой схемы: ${scheme}`);
+};
+
+/**
+ * Применение настроек размера шрифта
+ * Реализует требования 3.1, 3.2, 3.3:
+ * - small: Уменьшение размера на 10% от текущего размера каждого элемента
+ * - large: Увеличение размера на 10% от текущего размера каждого элемента
+ * - standard: Восстановление оригинального размера шрифта
+ */
+export const applyFontSize = (size: FontSize): void => {
+  // Используем новый модуль для динамического управления размером шрифта
+  applyDynamicFontSize(size);
+};
+
+/**
+ * Управление отображением изображений
+ * Реализует требования 4.1, 4.2:
+ * - false: Скрывать изображения через CSS свойство hidden
+ * - true: Показывать изображения (восстановление видимости)
+ * Требование 4.3: Сохраняет возможность восстановления без перезагрузки
+ */
+export const applyImageVisibility = (showImages: boolean): void => {
+  safeDOMOperation(() => {
+    if (!isDOMAvailable()) return;
+
+    const elements = getImageElements();
+    
+    if (showImages) {
+      // Требование 4.2: Показывать изображения (восстановление видимости)
+      removeClassFromElements(elements, CSS_CLASSES.HIDE_IMAGES);
+    } else {
+      // Требование 4.1: Скрывать изображения через CSS класс
+      applyClassToElements(elements, CSS_CLASSES.HIDE_IMAGES);
+    }
+  }, `Ошибка при управлении отображением изображений: ${showImages}`);
+};
+
+/**
+ * Удаление всех CSS классов и стилей доступности
+ */
+export const removeAllAccessibilityStyles = (): void => {
+  safeDOMOperation(() => {
+    if (!isDOMAvailable()) return;
+
+    // Удаляем классы с body
+    document.body.classList.remove(CSS_CLASSES.HIGH_CONTRAST);
+    document.body.classList.remove(CSS_CLASSES.FONT_SMALL);
+    document.body.classList.remove(CSS_CLASSES.FONT_LARGE);
+    document.body.style.filter = '';
+    
+    // Сбрасываем все изменения размера шрифта
+    resetAllFontSizes();
+    
+    // Удаляем классы с изображений
+    const imageElements = getImageElements();
+    removeClassFromElements(imageElements, CSS_CLASSES.HIDE_IMAGES);
+  }, 'Ошибка при удалении всех стилей доступности');
+};
+
+/**
+ * Применение всех настроек доступности
+ * Применяет все переданные настройки одновременно
+ */
+export const applyAllSettings = (settings: AccessibilitySettings): void => {
+  if (!settings.isEnabled) {
+    // Если режим доступности выключен, удаляем все стили
+    removeAllAccessibilityStyles();
+    return;
+  }
+
+  // Применяем все настройки
+  applyColorScheme(settings.colorScheme);
+  applyFontSize(settings.fontSize);
+  applyImageVisibility(settings.showImages);
+};
+
+/**
+ * Применение конкретной настройки с проверкой общего режима
+ * Применяет настройку только если общий режим доступности включен
+ */
+export const applySettingIfEnabled = (
+  isEnabled: boolean,
+  settingType: 'colorScheme' | 'fontSize' | 'imageVisibility',
+  value: ColorScheme | FontSize | boolean
+): void => {
+  if (!isEnabled) {
+    return;
+  }
+
+  switch (settingType) {
+    case 'colorScheme':
+      applyColorScheme(value as ColorScheme);
+      break;
+    case 'fontSize':
+      applyFontSize(value as FontSize);
+      break;
+    case 'imageVisibility':
+      applyImageVisibility(value as boolean);
+      break;
+    default:
+      console.warn(`Неизвестный тип настройки: ${settingType}`);
+  }
+};

package/src/lib/dom-manipulator.ts

@@ -0,0 +1,75 @@
+/**
+ * Модуль для работы с DOM элементами
+ * Предоставляет функции для поиска и манипуляции элементами страницы
+ */
+
+/**
+ * Селектор для поиска всех текстовых элементов
+ */
+const TEXT_ELEMENTS_SELECTOR = 'h1, h2, h3, h4, h5, h6, p, span, a, button, label, li';
+
+/**
+ * Селектор для поиска всех изображений
+ */
+const IMAGE_ELEMENTS_SELECTOR = 'img, picture, svg[role="img"]';
+
+/**
+ * Поиск всех текстовых элементов на странице
+ */
+export const getTextElements = (): NodeListOf<HTMLElement> => {
+  if (typeof document === 'undefined') {
+    return [] as unknown as NodeListOf<HTMLElement>;
+  }
+  return document.querySelectorAll(TEXT_ELEMENTS_SELECTOR);
+};
+
+/**
+ * Поиск всех изображений на странице
+ */
+export const getImageElements = (): NodeListOf<HTMLElement> => {
+  if (typeof document === 'undefined') {
+    return [] as unknown as NodeListOf<HTMLElement>;
+  }
+  return document.querySelectorAll(IMAGE_ELEMENTS_SELECTOR);
+};
+
+/**
+ * Применение CSS класса к коллекции элементов
+ */
+export const applyClassToElements = (elements: NodeListOf<HTMLElement>, className: string): void => {
+  elements.forEach(element => {
+    if (element && element.classList) {
+      element.classList.add(className);
+    }
+  });
+};
+
+/**
+ * Удаление CSS класса с коллекции элементов
+ */
+export const removeClassFromElements = (elements: NodeListOf<HTMLElement>, className: string): void => {
+  elements.forEach(element => {
+    if (element && element.classList) {
+      element.classList.remove(className);
+    }
+  });
+};
+
+/**
+ * Безопасное выполнение операций с DOM
+ */
+export const safeDOMOperation = (operation: () => void, errorMessage: string): void => {
+  try {
+    if (typeof window === 'undefined') return;
+    operation();
+  } catch (error) {
+    console.warn(errorMessage, error);
+  }
+};
+
+/**
+ * Проверка доступности DOM
+ */
+export const isDOMAvailable = (): boolean => {
+  return typeof window !== 'undefined' && typeof document !== 'undefined';
+};

package/src/lib/font-size-manager.ts

@@ -0,0 +1,185 @@
+/**
+ * Модуль для динамического управления размером шрифта
+ * Получает текущий размер каждого элемента и применяет процентное изменение
+ */
+
+import { FontSize } from '../types';
+import { getTextElements, safeDOMOperation, isDOMAvailable } from './dom-manipulator';
+
+/**
+ * Атрибут для хранения оригинального размера шрифта
+ */
+const ORIGINAL_FONT_SIZE_ATTR = 'data-original-font-size';
+
+/**
+ * Коэффициенты изменения размера шрифта
+ */
+const FONT_SIZE_MULTIPLIERS = {
+  small: 0.8,   // 80% от оригинального размера
+  standard: 1.0, // 100% - оригинальный размер
+  large: 1.3,   // 130% от оригинального размера
+} as const;
+
+/**
+ * Получение вычисленного размера шрифта элемента в пикселях
+ * 
+ * @param element - DOM элемент
+ * @returns Размер шрифта в пикселях
+ */
+const getComputedFontSize = (element: HTMLElement): number => {
+  const computedStyle = window.getComputedStyle(element);
+  const fontSize = computedStyle.fontSize;
+  return parseFloat(fontSize);
+};
+
+/**
+ * Сохранение оригинального размера шрифта элемента
+ * 
+ * @param element - DOM элемент
+ */
+const saveOriginalFontSize = (element: HTMLElement): void => {
+  // Сохраняем оригинальный размер только если он еще не сохранен
+  if (!element.hasAttribute(ORIGINAL_FONT_SIZE_ATTR)) {
+    const originalSize = getComputedFontSize(element);
+    element.setAttribute(ORIGINAL_FONT_SIZE_ATTR, originalSize.toString());
+  }
+};
+
+/**
+ * Получение оригинального размера шрифта элемента
+ * 
+ * @param element - DOM элемент
+ * @returns Оригинальный размер шрифта в пикселях
+ */
+const getOriginalFontSize = (element: HTMLElement): number => {
+  const savedSize = element.getAttribute(ORIGINAL_FONT_SIZE_ATTR);
+  if (savedSize) {
+    return parseFloat(savedSize);
+  }
+  
+  // Если оригинальный размер не сохранен, используем текущий
+  const currentSize = getComputedFontSize(element);
+  element.setAttribute(ORIGINAL_FONT_SIZE_ATTR, currentSize.toString());
+  return currentSize;
+};
+
+/**
+ * Применение нового размера шрифта к элементу
+ * 
+ * @param element - DOM элемент
+ * @param newSize - Новый размер шрифта в пикселях
+ */
+const applyFontSizeToElement = (element: HTMLElement, newSize: number): void => {
+  element.style.fontSize = `${newSize}px`;
+};
+
+/**
+ * Сброс размера шрифта элемента к оригинальному
+ * 
+ * @param element - DOM элемент
+ */
+const resetElementFontSize = (element: HTMLElement): void => {
+  element.style.fontSize = '';
+  element.removeAttribute(ORIGINAL_FONT_SIZE_ATTR);
+};
+
+/**
+ * Применение размера шрифта ко всем текстовым элементам
+ * 
+ * @param size - Размер шрифта (small, standard, large)
+ */
+export const applyDynamicFontSize = (size: FontSize): void => {
+  safeDOMOperation(() => {
+    if (!isDOMAvailable()) return;
+
+    const elements = getTextElements();
+    const multiplier = FONT_SIZE_MULTIPLIERS[size];
+
+    elements.forEach((element) => {
+      try {
+        if (size === 'standard') {
+          // Для стандартного размера сбрасываем к оригинальному
+          resetElementFontSize(element);
+        } else {
+          // Сохраняем оригинальный размер, если еще не сохранен
+          saveOriginalFontSize(element);
+          
+          // Получаем оригинальный размер и применяем множитель
+          const originalSize = getOriginalFontSize(element);
+          const newSize = originalSize * multiplier;
+          
+          applyFontSizeToElement(element, newSize);
+        }
+      } catch (error) {
+        console.warn('Ошибка при изменении размера шрифта элемента:', element, error);
+      }
+    });
+  }, `Ошибка при применении динамического размера шрифта: ${size}`);
+};
+
+/**
+ * Сброс всех изменений размера шрифта
+ */
+export const resetAllFontSizes = (): void => {
+  safeDOMOperation(() => {
+    if (!isDOMAvailable()) return;
+
+    const elements = getTextElements();
+    
+    elements.forEach((element) => {
+      try {
+        resetElementFontSize(element);
+      } catch (error) {
+        console.warn('Ошибка при сбросе размера шрифта элемента:', element, error);
+      }
+    });
+  }, 'Ошибка при сбросе всех размеров шрифта');
+};
+
+/**
+ * Обновление размеров шрифта для новых элементов
+ * Используется когда на страницу добавляются новые элементы динамически
+ * 
+ * @param size - Текущий размер шрифта
+ */
+export const updateNewElementsFontSize = (size: FontSize): void => {
+  if (size === 'standard') return;
+  
+  safeDOMOperation(() => {
+    if (!isDOMAvailable()) return;
+
+    const elements = getTextElements();
+    const multiplier = FONT_SIZE_MULTIPLIERS[size];
+
+    elements.forEach((element) => {
+      // Применяем размер только к элементам, которые еще не обработаны
+      if (!element.hasAttribute(ORIGINAL_FONT_SIZE_ATTR) && !element.style.fontSize) {
+        try {
+          saveOriginalFontSize(element);
+          const originalSize = getOriginalFontSize(element);
+          const newSize = originalSize * multiplier;
+          applyFontSizeToElement(element, newSize);
+        } catch (error) {
+          console.warn('Ошибка при обновлении размера шрифта нового элемента:', element, error);
+        }
+      }
+    });
+  }, `Ошибка при обновлении размера шрифта новых элементов: ${size}`);
+};
+
+/**
+ * Проверка, применены ли изменения размера шрифта
+ * 
+ * @returns true, если размер шрифта изменен
+ */
+export const isFontSizeModified = (): boolean => {
+  if (!isDOMAvailable()) return false;
+  
+  const elements = getTextElements();
+  for (let i = 0; i < Math.min(elements.length, 10); i++) {
+    if (elements[i].hasAttribute(ORIGINAL_FONT_SIZE_ATTR)) {
+      return true;
+    }
+  }
+  return false;
+};

package/src/styles/global.scss

@@ -0,0 +1,60 @@
+/**
+ * Глобальные стили доступности
+ * Эти стили должны быть импортированы в основной CSS файл приложения
+ */
+
+/* ========================================
+   Глобальные стили доступности
+   ======================================== */
+
+/* Высококонтрастная тема */
+.accessibility-high-contrast {
+  background: #000 !important;
+  color: #fff !important;
+  
+  /* Применяем стили ко всем элементам, КРОМЕ панели доступности */
+  *:not(.accessibility-panel-container):not(.accessibility-panel-container *) {
+    background: #000 !important;
+    color: #fff !important;
+    border-color: #fff !important;
+  }
+  
+  a:not(.accessibility-panel-container a) {
+    color: #ffff00 !important;
+    
+    &:visited {
+      color: #ff00ff !important;
+    }
+    
+    &:hover {
+      color: #00ffff !important;
+    }
+  }
+  
+  button:not(.accessibility-panel-container button) {
+    background: #fff !important;
+    color: #000 !important;
+    border: 2px solid #fff !important;
+    
+    &:hover {
+      background: #ffff00 !important;
+      color: #000 !important;
+    }
+  }
+  
+  input:not(.accessibility-panel-container input), 
+  textarea:not(.accessibility-panel-container textarea), 
+  select:not(.accessibility-panel-container select) {
+    background: #fff !important;
+    color: #000 !important;
+    border: 2px solid #fff !important;
+  }
+}
+
+/* Размеры шрифтов */
+/* Стили для размера шрифта применяются динамически через JavaScript */
+
+/* Скрытие изображений */
+.accessibility-hide-images {
+  display: none !important;
+}