vision-accessibility 1.0.0

package/src/components/FontSizeControl/FontSizeControl.tsx

@@ -0,0 +1,116 @@
+/**
+ * Компонент управления размером шрифта
+ * Предоставляет радио-кнопки для выбора размера шрифта
+ * 
+ * Реализует требования:
+ * - 3.1: Уменьшение размера шрифта на 10%
+ * - 3.2: Увеличение размера шрифта на 10%
+ * - 3.3: Возврат к стандартному размеру шрифта
+ */
+
+import React from 'react';
+import { FontSize } from '../../types';
+import { useAccessibilityContext } from '../../context/AccessibilityContext';
+import styles from './FontSizeControl.module.scss';
+
+/**
+ * Свойства компонента FontSizeControl
+ */
+interface FontSizeControlProps {
+  /** CSS класс для дополнительной стилизации */
+  className?: string;
+}
+
+/**
+ * Опции размеров шрифта с описаниями
+ */
+const FONT_SIZE_OPTIONS: Array<{
+  value: FontSize;
+  label: string;
+  description: string;
+}> = [
+  {
+    value: 'small',
+    label: 'Мелкий',
+    description: 'Уменьшенный размер текста (80%)'
+  },
+  {
+    value: 'standard',
+    label: 'Стандартный',
+    description: 'Обычный размер текста'
+  },
+  {
+    value: 'large',
+    label: 'Крупный',
+    description: 'Увеличенный размер текста (130%)'
+  }
+];
+
+/**
+ * Компонент управления размером шрифта
+ * 
+ * @param props - Свойства компонента
+ * @returns JSX элемент с радио-кнопками для выбора размера шрифта
+ */
+export const FontSizeControl: React.FC<FontSizeControlProps> = ({ 
+  className 
+}) => {
+  // Используем контекст для получения состояния и методов управления
+  const { settings, updateSettings } = useAccessibilityContext();
+  const fontSize = settings.fontSize;
+  const isEnabled = settings.isEnabled;
+
+  /**
+   * Обработчик изменения размера шрифта
+   * 
+   * @param event - Событие изменения радио-кнопки
+   */
+  const handleFontSizeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newFontSize = event.target.value as FontSize;
+    updateSettings({ fontSize: newFontSize });
+  };
+
+  return (
+    <div className={`${styles.fontSizeControl} ${className || ''} ${!isEnabled ? styles.disabled : ''}`}>
+      <h4 className={styles.title}>
+        Размер шрифта
+      </h4>
+      
+      <div className={styles.optionsContainer} role="radiogroup" aria-labelledby="font-size-title">
+        {FONT_SIZE_OPTIONS.map((option) => (
+          <label 
+            key={option.value}
+            className={`${styles.option} ${fontSize === option.value ? styles.selected : ''} ${!isEnabled ? styles.optionDisabled : ''}`}
+          >
+            <input
+              type="radio"
+              name="fontSize"
+              value={option.value}
+              checked={fontSize === option.value}
+              onChange={handleFontSizeChange}
+              className={styles.radioInput}
+              aria-describedby={`font-size-${option.value}-description`}
+              disabled={!isEnabled}
+            />
+            
+            <div className={styles.optionContent}>
+              <span className={styles.optionLabel}>
+                {option.label}
+              </span>
+              <span 
+                id={`font-size-${option.value}-description`}
+                className={styles.optionDescription}
+              >
+                {option.description}
+              </span>
+            </div>
+            
+            <div className={styles.radioIndicator} aria-hidden="true" />
+          </label>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default FontSizeControl;

package/src/components/ImageControl/ImageControl.module.scss

@@ -0,0 +1,163 @@
+/**
+ * Стили для компонента управления отображением изображений
+ * Реализует доступный переключатель для управления видимостью изображений
+ */
+
+.imageControl {
+  margin-bottom: $spacing-lg;
+
+  &.disabled {
+    .title {
+      opacity: 0.6;
+    }
+  }
+}
+
+.title {
+  font-size: 14px;
+  font-weight: 600;
+  margin: 0 0 $spacing-md 0;
+  color: $gray-800;
+}
+
+.switchContainer {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+}
+
+.switchLabel {
+  display: flex;
+  align-items: center;
+  gap: $spacing-md;
+  cursor: pointer;
+  padding: $spacing-md;
+  border: 1px solid $gray-300;
+  border-radius: $border-radius;
+  transition: all $transition-fast;
+  background: $white;
+
+  &:hover {
+    background: $gray-100;
+    border-color: $primary;
+  }
+
+  &:focus-within {
+    background: $gray-100;
+    border-color: $primary;
+    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+  }
+
+  &.switchDisabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+
+    &:hover {
+      background: $white;
+      border-color: $gray-300;
+    }
+  }
+}
+
+.switchInput {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+
+  &:focus + .switchSlider {
+    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+  }
+
+  &:checked + .switchSlider {
+    background: $primary;
+
+    .switchThumb {
+      transform: translateX(20px);
+    }
+  }
+}
+
+.switchSlider {
+  position: relative;
+  width: 44px;
+  height: 24px;
+  background: $gray-400;
+  border-radius: 12px;
+  transition: all $transition-fast;
+  flex-shrink: 0;
+}
+
+.switchThumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background: $white;
+  border-radius: 50%;
+  transition: transform $transition-fast;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.switchText {
+  font-size: 14px;
+  font-weight: 500;
+  color: $gray-800;
+  line-height: 1.4;
+  flex: 1;
+}
+
+.description {
+  font-size: 12px;
+  color: $gray-600;
+  line-height: 1.3;
+  margin: 0;
+  padding-left: 56px; // Выравнивание с текстом переключателя
+}
+
+// Высококонтрастная тема - адаптация стилей
+:global(.accessibility-high-contrast) .imageControl {
+  .title {
+    color: $white !important;
+  }
+
+  .switchLabel {
+    background: $black !important;
+    border-color: $white !important;
+    color: $white !important;
+
+    &:hover,
+    &:focus-within {
+      background: $gray-800 !important;
+    }
+  }
+
+  .switchText {
+    color: $white !important;
+  }
+
+  .description {
+    color: $gray-400 !important;
+  }
+
+  .switchSlider {
+    background: $gray-600 !important;
+    border: 1px solid $white !important;
+  }
+
+  .switchInput:checked + .switchSlider {
+    background: $white !important;
+
+    .switchThumb {
+      background: $black !important;
+    }
+  }
+
+  .switchThumb {
+    background: $white !important;
+    border: 1px solid $black !important;
+  }
+}

package/src/components/ImageControl/ImageControl.tsx

@@ -0,0 +1,85 @@
+/**
+ * Компонент управления отображением изображений
+ * Предоставляет переключатель для скрытия/показа изображений
+ * 
+ * Реализует требования:
+ * - 4.1: Скрытие изображений через CSS свойство hidden
+ * - 4.2: Восстановление видимости изображений
+ */
+
+import React from 'react';
+import { useAccessibilityContext } from '../../context/AccessibilityContext';
+import styles from './ImageControl.module.scss';
+
+/**
+ * Свойства компонента ImageControl
+ */
+interface ImageControlProps {
+  /** CSS класс для дополнительной стилизации */
+  className?: string;
+}
+
+/**
+ * Компонент управления отображением изображений
+ * 
+ * @param props - Свойства компонента
+ * @returns JSX элемент с переключателем для управления изображениями
+ */
+export const ImageControl: React.FC<ImageControlProps> = ({ 
+  className 
+}) => {
+  // Используем контекст для получения состояния и методов управления
+  const { settings, updateSettings } = useAccessibilityContext();
+  const showImages = settings.showImages;
+  const isEnabled = settings.isEnabled;
+
+  /**
+   * Обработчик изменения настройки отображения изображений
+   * 
+   * @param event - Событие изменения чекбокса
+   */
+  const handleImageVisibilityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    updateSettings({ showImages: event.target.checked });
+  };
+
+  return (
+    <div className={`${styles.imageControl} ${className || ''} ${!isEnabled ? styles.disabled : ''}`}>
+      <h4 className={styles.title}>
+        Изображения
+      </h4>
+      
+      <div className={styles.switchContainer}>
+        <label className={`${styles.switchLabel} ${!isEnabled ? styles.switchDisabled : ''}`}>
+          <input
+            type="checkbox"
+            checked={showImages}
+            onChange={handleImageVisibilityChange}
+            className={styles.switchInput}
+            aria-describedby="image-control-description"
+            disabled={!isEnabled}
+          />
+          
+          <span className={styles.switchSlider} aria-hidden="true">
+            <span className={styles.switchThumb} />
+          </span>
+          
+          <span className={styles.switchText}>
+            {showImages ? 'Показывать изображения' : 'Скрывать изображения'}
+          </span>
+        </label>
+        
+        <p 
+          id="image-control-description"
+          className={styles.description}
+        >
+          {showImages 
+            ? 'Изображения отображаются на странице' 
+            : 'Изображения скрыты для лучшей концентрации на тексте'
+          }
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default ImageControl;

package/src/context/AccessibilityContext.tsx

@@ -0,0 +1,54 @@
+/**
+ * Контекст для управления настройками доступности
+ * Обеспечивает единое состояние для всех компонентов панели доступности
+ */
+
+import React, { createContext, useContext, ReactNode } from 'react';
+import { AccessibilityContextType } from '../types';
+import { useAccessibilitySettings } from '../hooks/useAccessibilitySettings';
+
+/**
+ * Контекст настроек доступности
+ */
+const AccessibilityContext = createContext<AccessibilityContextType | null>(null);
+
+/**
+ * Свойства провайдера контекста
+ */
+interface AccessibilityProviderProps {
+  children: ReactNode;
+}
+
+/**
+ * Провайдер контекста настроек доступности
+ * 
+ * @param props - Свойства провайдера
+ * @returns JSX элемент с провайдером контекста
+ */
+export const AccessibilityProvider: React.FC<AccessibilityProviderProps> = ({ children }) => {
+  const accessibilityState = useAccessibilitySettings();
+
+  return (
+    <AccessibilityContext.Provider value={accessibilityState}>
+      {children}
+    </AccessibilityContext.Provider>
+  );
+};
+
+/**
+ * Хук для использования контекста настроек доступности
+ * 
+ * @returns Контекст настроек доступности
+ * @throws Ошибка, если хук используется вне провайдера
+ */
+export const useAccessibilityContext = (): AccessibilityContextType => {
+  const context = useContext(AccessibilityContext);
+  
+  if (!context) {
+    throw new Error('useAccessibilityContext должен использоваться внутри AccessibilityProvider');
+  }
+  
+  return context;
+};
+
+export default AccessibilityProvider;

package/src/hooks/useAccessibilitySettings.ts

@@ -0,0 +1,228 @@
+/**
+ * Хук для управления настройками доступности
+ * Обеспечивает централизованное управление состоянием настроек доступности
+ * с автоматическим сохранением в localStorage и применением к DOM
+ * 
+ * Реализует требования:
+ * - 5.1: Включение режима доступности с активацией всех сохраненных настроек
+ * - 5.2: Выключение режима доступности с удалением всех CSS классов и стилей
+ * - 6.2: Загрузка настроек из localStorage при инициализации
+ * - 6.3: Автоматическое применение сохраненных настроек при загрузке страницы
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import { 
+  AccessibilitySettings, 
+  DEFAULT_ACCESSIBILITY_SETTINGS,
+  AccessibilityContextType 
+} from '../types';
+import { 
+  saveToStorage, 
+  loadFromStorage, 
+  clearStorage 
+} from '../lib/accessibility-storage';
+import { 
+  applyAllSettings, 
+  removeAllAccessibilityStyles 
+} from '../lib/css-applier';
+import { updateNewElementsFontSize } from '../lib/font-size-manager';
+
+/**
+ * Хук для управления настройками доступности
+ * 
+ * @returns Объект с текущими настройками и методами для их управления
+ */
+export const useAccessibilitySettings = (): AccessibilityContextType => {
+  // Состояние настроек доступности
+  const [settings, setSettings] = useState<AccessibilitySettings>(DEFAULT_ACCESSIBILITY_SETTINGS);
+  
+  // Флаг загрузки настроек из localStorage (для SSR совместимости)
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  /**
+   * Наблюдатель за изменениями DOM для обработки динамически добавляемых элементов
+   */
+  useEffect(() => {
+    if (typeof window === 'undefined' || !isLoaded || !settings.isEnabled) return;
+
+    const observer = new MutationObserver((mutations) => {
+      let hasNewTextElements = false;
+      
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'childList') {
+          mutation.addedNodes.forEach((node) => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+              const element = node as Element;
+              // Проверяем, есть ли текстовые элементы среди добавленных
+              if (element.matches('h1, h2, h3, h4, h5, h6, p, span, a, button, label, li, div') ||
+                  element.querySelector('h1, h2, h3, h4, h5, h6, p, span, a, button, label, li, div')) {
+                hasNewTextElements = true;
+              }
+            }
+          });
+        }
+      });
+
+      // Если добавлены новые текстовые элементы, применяем к ним текущие настройки размера шрифта
+      if (hasNewTextElements && settings.fontSize !== 'standard') {
+        setTimeout(() => {
+          updateNewElementsFontSize(settings.fontSize);
+        }, 100); // Небольшая задержка для завершения рендеринга
+      }
+    });
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [isLoaded, settings.isEnabled, settings.fontSize]);
+
+  /**
+   * Загрузка настроек из localStorage при инициализации
+   * Реализует требования 6.2, 6.3: Восстановление сохраненных настроек
+   * Обеспечивает SSR совместимость с проверкой window
+   */
+  useEffect(() => {
+    // SSR совместимость: выполняем только на клиенте
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    try {
+      // Требование 6.2: Загрузка настроек из localStorage
+      const savedSettings = loadFromStorage();
+      
+      if (savedSettings) {
+        setSettings(savedSettings);
+        
+        // Требование 6.3: Автоматическое применение сохраненных настроек
+        // Применяем настройки только если режим доступности включен
+        if (savedSettings.isEnabled) {
+          applyAllSettings(savedSettings);
+        }
+      }
+    } catch (error) {
+      console.warn('Ошибка при загрузке настроек доступности:', error);
+      // При ошибке используем настройки по умолчанию
+      setSettings(DEFAULT_ACCESSIBILITY_SETTINGS);
+    } finally {
+      // Отмечаем, что настройки загружены
+      setIsLoaded(true);
+    }
+  }, []);
+
+  /**
+   * Сохранение настроек в localStorage при изменении
+   * Реализует автоматическое сохранение всех изменений настроек
+   */
+  useEffect(() => {
+    // Сохраняем только после первоначальной загрузки
+    if (!isLoaded) {
+      return;
+    }
+
+    try {
+      // Сохраняем настройки в localStorage
+      saveToStorage(settings);
+      
+      // Применяем настройки к DOM только если режим доступности включен
+      if (settings.isEnabled) {
+        applyAllSettings(settings);
+      } else {
+        // Если режим выключен, удаляем все стили доступности
+        removeAllAccessibilityStyles();
+      }
+    } catch (error) {
+      console.warn('Ошибка при сохранении настроек доступности:', error);
+    }
+  }, [settings, isLoaded]);
+
+  /**
+   * Обновление настроек доступности
+   * Позволяет частично обновить настройки, сохраняя остальные значения
+   * 
+   * @param updates - Частичные обновления настроек
+   */
+  const updateSettings = useCallback((updates: Partial<AccessibilitySettings>): void => {
+    setSettings(prevSettings => {
+      const newSettings = { ...prevSettings, ...updates };
+      
+      // Если выключается общий режим доступности, удаляем все стили немедленно
+      if (prevSettings.isEnabled && !newSettings.isEnabled) {
+        // Требование 5.2: Выключение режима доступности с удалением всех стилей
+        removeAllAccessibilityStyles();
+      }
+      
+      return newSettings;
+    });
+  }, []);
+
+  /**
+   * Сброс настроек к значениям по умолчанию
+   * Удаляет все примененные стили и очищает localStorage
+   */
+  const resetSettings = useCallback((): void => {
+    try {
+      // Удаляем все примененные стили доступности
+      removeAllAccessibilityStyles();
+      
+      // Сбрасываем настройки к значениям по умолчанию
+      setSettings(DEFAULT_ACCESSIBILITY_SETTINGS);
+      
+      // Очищаем localStorage
+      clearStorage();
+    } catch (error) {
+      console.warn('Ошибка при сбросе настроек доступности:', error);
+    }
+  }, []);
+
+  return {
+    settings,
+    updateSettings,
+    resetSettings,
+    isLoaded,
+  };
+};
+
+/**
+ * Хук для управления конкретной настройкой доступности
+ * Предоставляет удобный интерфейс для работы с отдельными настройками
+ * 
+ * @param settingKey - Ключ настройки для управления
+ * @returns Значение настройки и функция для её обновления
+ */
+export const useAccessibilitySetting = <K extends keyof AccessibilitySettings>(
+  settingKey: K
+): [AccessibilitySettings[K], (value: AccessibilitySettings[K]) => void] => {
+  const { settings, updateSettings } = useAccessibilitySettings();
+  
+  const setValue = useCallback((value: AccessibilitySettings[K]) => {
+    updateSettings({ [settingKey]: value } as Partial<AccessibilitySettings>);
+  }, [settingKey, updateSettings]);
+  
+  return [settings[settingKey], setValue];
+};
+
+/**
+ * Хук для управления общим режимом доступности
+ * Предоставляет удобный интерфейс для включения/выключения всех настроек
+ * 
+ * @returns Состояние режима доступности и функция для его переключения
+ */
+export const useAccessibilityToggle = (): [boolean, (enabled: boolean) => void] => {
+  const { settings, updateSettings } = useAccessibilitySettings();
+  
+  const setEnabled = useCallback((enabled: boolean) => {
+    // Требование 5.1: Включение режима доступности с активацией всех настроек
+    // Требование 5.2: Выключение режима доступности с удалением всех стилей
+    updateSettings({ isEnabled: enabled });
+  }, [updateSettings]);
+  
+  return [settings.isEnabled, setEnabled];
+};
+
+export default useAccessibilitySettings;