vision-accessibility 1.0.2 → 1.0.3

package/src/components/ColorSchemeControl/ColorSchemeControl.tsx

@@ -11,6 +11,7 @@
 import React from 'react';
 import { ColorScheme } from '../../types';
 import { useAccessibilityContext } from '../../context/AccessibilityContext';
+import { defaultTranslations } from '../../config/translations';
 import styles from './ColorSchemeControl.module.scss';
 
 /**
@@ -19,42 +20,23 @@ import styles from './ColorSchemeControl.module.scss';
 interface ColorSchemeControlProps {
   /** CSS класс для дополнительной стилизации */
   className?: string;
+  /** Объект с переводами */
+  translations?: Record<string, string>;
 }
 
-/**
- * Опции цветовых схем с описаниями
- */
-const COLOR_SCHEME_OPTIONS: Array<{
-  value: ColorScheme;
-  label: string;
-  description: string;
-}> = [
-  {
-    value: 'standard',
-    label: 'Стандартный',
-    description: 'Обычная цветовая схема сайта'
-  },
-  {
-    value: 'high-contrast',
-    label: 'Контрастный белый на черном',
-    description: 'Высококонтрастная схема для лучшей читаемости'
-  },
-  {
-    value: 'grayscale',
-    label: 'Черно-белый',
-    description: 'Преобразование всех цветов в оттенки серого'
-  }
-];
-
 /**
  * Компонент управления цветовой схемой
- * 
+ *
  * @param props - Свойства компонента
  * @returns JSX элемент с радио-кнопками для выбора цветовой схемы
  */
-export const ColorSchemeControl: React.FC<ColorSchemeControlProps> = ({ 
-  className 
+export const ColorSchemeControl: React.FC<ColorSchemeControlProps> = ({
+  className,
+  translations = {}
 }) => {
+  // Объединяем переданные переводы с переводами по умолчанию
+  const mergedTranslations = { ...defaultTranslations, ...translations };
+  
   // Используем контекст для получения состояния и методов управления
   const { settings, updateSettings } = useAccessibilityContext();
   const colorScheme = settings.colorScheme;
@@ -62,7 +44,7 @@ export const ColorSchemeControl: React.FC<ColorSchemeControlProps> = ({
 
   /**
    * Обработчик изменения цветовой схемы
-   * 
+   *
    * @param event - Событие изменения радио-кнопки
    */
   const handleColorSchemeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -73,41 +55,97 @@ export const ColorSchemeControl: React.FC<ColorSchemeControlProps> = ({
   return (
     <div className={`${styles.colorSchemeControl} ${className || ''} ${!isEnabled ? styles.disabled : ''} ${colorScheme === 'high-contrast' ? styles.highContrastMode : ''}`}>
       <h4 className={styles.title}>
-        Цветовая схема
+        {mergedTranslations.colorSchemeTitle}
       </h4>
       
       <div className={styles.optionsContainer} role="radiogroup" aria-labelledby="color-scheme-title">
-        {COLOR_SCHEME_OPTIONS.map((option) => (
-          <label 
-            key={option.value}
-            className={`${styles.option} ${colorScheme === option.value ? styles.selected : ''} ${!isEnabled ? styles.optionDisabled : ''}`}
-          >
-            <input
-              type="radio"
-              name="colorScheme"
-              value={option.value}
-              checked={colorScheme === option.value}
-              onChange={handleColorSchemeChange}
-              className={styles.radioInput}
-              aria-describedby={`color-scheme-${option.value}-description`}
-              disabled={!isEnabled}
-            />
-            
-            <div className={styles.optionContent}>
-              <span className={styles.optionLabel}>
-                {option.label}
-              </span>
-              <span 
-                id={`color-scheme-${option.value}-description`}
-                className={styles.optionDescription}
-              >
-                {option.description}
-              </span>
-            </div>
-            
-            <div className={styles.radioIndicator} aria-hidden="true" />
-          </label>
-        ))}
+        <label
+          key="standard"
+          className={`${styles.option} ${colorScheme === 'standard' ? styles.selected : ''} ${!isEnabled ? styles.optionDisabled : ''}`}
+        >
+          <input
+            type="radio"
+            name="colorScheme"
+            value="standard"
+            checked={colorScheme === 'standard'}
+            onChange={handleColorSchemeChange}
+            className={styles.radioInput}
+            aria-describedby="color-scheme-standard-description"
+            disabled={!isEnabled}
+          />
+          
+          <div className={styles.optionContent}>
+            <span className={styles.optionLabel}>
+              {mergedTranslations.colorSchemeStandardLabel}
+            </span>
+            <span
+              id="color-scheme-standard-description"
+              className={styles.optionDescription}
+            >
+              {mergedTranslations.colorSchemeStandardDescription}
+            </span>
+          </div>
+          
+          <div className={styles.radioIndicator} aria-hidden="true" />
+        </label>
+        <label
+          key="high-contrast"
+          className={`${styles.option} ${colorScheme === 'high-contrast' ? styles.selected : ''} ${!isEnabled ? styles.optionDisabled : ''}`}
+        >
+          <input
+            type="radio"
+            name="colorScheme"
+            value="high-contrast"
+            checked={colorScheme === 'high-contrast'}
+            onChange={handleColorSchemeChange}
+            className={styles.radioInput}
+            aria-describedby="color-scheme-high-contrast-description"
+            disabled={!isEnabled}
+          />
+          
+          <div className={styles.optionContent}>
+            <span className={styles.optionLabel}>
+              {mergedTranslations.colorSchemeHighContrastLabel}
+            </span>
+            <span
+              id="color-scheme-high-contrast-description"
+              className={styles.optionDescription}
+            >
+              {mergedTranslations.colorSchemeHighContrastDescription}
+            </span>
+          </div>
+          
+          <div className={styles.radioIndicator} aria-hidden="true" />
+        </label>
+        <label
+          key="grayscale"
+          className={`${styles.option} ${colorScheme === 'grayscale' ? styles.selected : ''} ${!isEnabled ? styles.optionDisabled : ''}`}
+        >
+          <input
+            type="radio"
+            name="colorScheme"
+            value="grayscale"
+            checked={colorScheme === 'grayscale'}
+            onChange={handleColorSchemeChange}
+            className={styles.radioInput}
+            aria-describedby="color-scheme-grayscale-description"
+            disabled={!isEnabled}
+          />
+          
+          <div className={styles.optionContent}>
+            <span className={styles.optionLabel}>
+              {mergedTranslations.colorSchemeGrayscaleLabel}
+            </span>
+            <span
+              id="color-scheme-grayscale-description"
+              className={styles.optionDescription}
+            >
+              {mergedTranslations.colorSchemeGrayscaleDescription}
+            </span>
+          </div>
+          
+          <div className={styles.radioIndicator} aria-hidden="true" />
+        </label>
       </div>
     </div>
   );

package/src/components/FontSizeControl/FontSizeControl.stories.tsx

@@ -31,4 +31,19 @@ export const WithCustomClass: Story = {
   args: {
     className: 'custom-font-size-class',
   },
+};
+
+export const WithTranslations: Story = {
+  args: {
+    className: 'custom-font-size-class',
+    translations: {
+      fontSizeTitle: "Font Size",
+      fontSizeSmallLabel: "Small",
+      fontSizeSmallDescription: "Reduced text size (80%)",
+      fontSizeStandardLabel: "Standard",
+      fontSizeStandardDescription: "Normal text size",
+      fontSizeLargeLabel: "Large",
+      fontSizeLargeDescription: "Increased text size (130%)",
+    }
+  },
 };

package/src/components/FontSizeControl/FontSizeControl.tsx

@@ -11,6 +11,7 @@
 import React from 'react';
 import { FontSize } from '../../types';
 import { useAccessibilityContext } from '../../context/AccessibilityContext';
+import { defaultTranslations } from '../../config/translations';
 import styles from './FontSizeControl.module.scss';
 
 /**
@@ -19,42 +20,23 @@ import styles from './FontSizeControl.module.scss';
 interface FontSizeControlProps {
   /** CSS класс для дополнительной стилизации */
   className?: string;
+  /** Объект с переводами */
+  translations?: Record<string, 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 
+export const FontSizeControl: React.FC<FontSizeControlProps> = ({
+  className,
+  translations = {}
 }) => {
+  // Объединяем переданные переводы с переводами по умолчанию
+  const mergedTranslations = { ...defaultTranslations, ...translations };
+  
   // Используем контекст для получения состояния и методов управления
   const { settings, updateSettings } = useAccessibilityContext();
   const fontSize = settings.fontSize;
@@ -62,7 +44,7 @@ export const FontSizeControl: React.FC<FontSizeControlProps> = ({
 
   /**
    * Обработчик изменения размера шрифта
-   * 
+   *
    * @param event - Событие изменения радио-кнопки
    */
   const handleFontSizeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -73,41 +55,97 @@ export const FontSizeControl: React.FC<FontSizeControlProps> = ({
   return (
     <div className={`${styles.fontSizeControl} ${className || ''} ${!isEnabled ? styles.disabled : ''} ${settings.colorScheme === 'high-contrast' ? styles.highContrastMode : ''}`}>
       <h4 className={styles.title}>
-        Размер шрифта
+        {mergedTranslations.fontSizeTitle}
       </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>
-        ))}
+        <label
+          key="small"
+          className={`${styles.option} ${fontSize === 'small' ? styles.selected : ''} ${!isEnabled ? styles.optionDisabled : ''}`}
+        >
+          <input
+            type="radio"
+            name="fontSize"
+            value="small"
+            checked={fontSize === 'small'}
+            onChange={handleFontSizeChange}
+            className={styles.radioInput}
+            aria-describedby="font-size-small-description"
+            disabled={!isEnabled}
+          />
+          
+          <div className={styles.optionContent}>
+            <span className={styles.optionLabel}>
+              {mergedTranslations.fontSizeSmallLabel}
+            </span>
+            <span
+              id="font-size-small-description"
+              className={styles.optionDescription}
+            >
+              {mergedTranslations.fontSizeSmallDescription}
+            </span>
+          </div>
+          
+          <div className={styles.radioIndicator} aria-hidden="true" />
+        </label>
+        <label
+          key="standard"
+          className={`${styles.option} ${fontSize === 'standard' ? styles.selected : ''} ${!isEnabled ? styles.optionDisabled : ''}`}
+        >
+          <input
+            type="radio"
+            name="fontSize"
+            value="standard"
+            checked={fontSize === 'standard'}
+            onChange={handleFontSizeChange}
+            className={styles.radioInput}
+            aria-describedby="font-size-standard-description"
+            disabled={!isEnabled}
+          />
+          
+          <div className={styles.optionContent}>
+            <span className={styles.optionLabel}>
+              {mergedTranslations.fontSizeStandardLabel}
+            </span>
+            <span
+              id="font-size-standard-description"
+              className={styles.optionDescription}
+            >
+              {mergedTranslations.fontSizeStandardDescription}
+            </span>
+          </div>
+          
+          <div className={styles.radioIndicator} aria-hidden="true" />
+        </label>
+        <label
+          key="large"
+          className={`${styles.option} ${fontSize === 'large' ? styles.selected : ''} ${!isEnabled ? styles.optionDisabled : ''}`}
+        >
+          <input
+            type="radio"
+            name="fontSize"
+            value="large"
+            checked={fontSize === 'large'}
+            onChange={handleFontSizeChange}
+            className={styles.radioInput}
+            aria-describedby="font-size-large-description"
+            disabled={!isEnabled}
+          />
+          
+          <div className={styles.optionContent}>
+            <span className={styles.optionLabel}>
+              {mergedTranslations.fontSizeLargeLabel}
+            </span>
+            <span
+              id="font-size-large-description"
+              className={styles.optionDescription}
+            >
+              {mergedTranslations.fontSizeLargeDescription}
+            </span>
+          </div>
+          
+          <div className={styles.radioIndicator} aria-hidden="true" />
+        </label>
       </div>
     </div>
   );

package/src/components/ImageControl/ImageControl.stories.tsx

@@ -40,4 +40,15 @@ export const WithCustomClass: Story = {
   args: {
     className: 'custom-image-control-class',
   },
+};
+
+export const WithTranslations: Story = {
+  args: {
+    className: 'custom-image-control-class',
+    translations: {
+      imageControlTitle: "Images",
+      imageControlShowLabel: "Show Images",
+      imageControlHideLabel: "Hide Images",
+    }
+  },
 };

package/src/components/ImageControl/ImageControl.tsx

@@ -9,6 +9,7 @@
 
 import React from 'react';
 import { useAccessibilityContext } from '../../context/AccessibilityContext';
+import { defaultTranslations } from '../../config/translations';
 import styles from './ImageControl.module.scss';
 
 /**
@@ -17,17 +18,23 @@ import styles from './ImageControl.module.scss';
 interface ImageControlProps {
   /** CSS класс для дополнительной стилизации */
   className?: string;
+  /** Объект с переводами */
+  translations?: Record<string, string>;
 }
 
 /**
  * Компонент управления отображением изображений
- * 
+ *
  * @param props - Свойства компонента
  * @returns JSX элемент с переключателем для управления изображениями
  */
-export const ImageControl: React.FC<ImageControlProps> = ({ 
-  className 
+export const ImageControl: React.FC<ImageControlProps> = ({
+  className,
+  translations = {}
 }) => {
+  // Объединяем переданные переводы с переводами по умолчанию
+  const mergedTranslations = { ...defaultTranslations, ...translations };
+  
   // Используем контекст для получения состояния и методов управления
   const { settings, updateSettings } = useAccessibilityContext();
   const showImages = settings.showImages;
@@ -35,7 +42,7 @@ export const ImageControl: React.FC<ImageControlProps> = ({
 
   /**
    * Обработчик изменения настройки отображения изображений
-   * 
+   *
    * @param event - Событие изменения чекбокса
    */
   const handleImageVisibilityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -45,7 +52,7 @@ export const ImageControl: React.FC<ImageControlProps> = ({
   return (
     <div className={`${styles.imageControl} ${className || ''} ${!isEnabled ? styles.disabled : ''} ${settings.colorScheme === 'high-contrast' ? styles.highContrastMode : ''}`}>
       <h4 className={styles.title}>
-        Изображения
+        {mergedTranslations.imageControlTitle}
       </h4>
       
       <div className={styles.switchContainer}>
@@ -64,17 +71,17 @@ export const ImageControl: React.FC<ImageControlProps> = ({
           </span>
           
           <span className={styles.switchText}>
-            {showImages ? 'Показывать изображения' : 'Скрывать изображения'}
+            {showImages ? mergedTranslations.imageControlShowLabel : mergedTranslations.imageControlHideLabel}
           </span>
         </label>
         
-        <p 
+        <p
           id="image-control-description"
           className={styles.description}
         >
-          {showImages 
-            ? 'Изображения отображаются на странице' 
-            : 'Изображения скрыты для лучшей концентрации на тексте'
+          {showImages
+            ? mergedTranslations.imageControlShowDescription
+            : mergedTranslations.imageControlHideDescription
           }
         </p>
       </div>

package/src/config/translations.ts

@@ -0,0 +1,82 @@
+/**
+ * Конфигурация переводов для панели доступности
+ * Содержит текстовые строки по умолчанию на русском языке
+ */
+
+export interface AccessibilityTranslations {
+  /** Заголовок панели настроек доступности */
+  panelTitle?: string;
+  /** Описание панели настроек доступности */
+  panelDescription?: string;
+  /** Текст для кнопки закрытия панели */
+  closePanelLabel?: string;
+  /** Заголовок секции цветовой схемы */
+  colorSchemeTitle?: string;
+  /** Значение опции стандартной цветовой схемы */
+  colorSchemeStandardLabel?: string;
+  /** Описание опции стандартной цветовой схемы */
+  colorSchemeStandardDescription?: string;
+  /** Значение опции высококонтрастной цветовой схемы */
+  colorSchemeHighContrastLabel?: string;
+  /** Описание опции высококонтрастной цветовой схемы */
+  colorSchemeHighContrastDescription?: string;
+  /** Значение опции черно-белой цветовой схемы */
+  colorSchemeGrayscaleLabel?: string;
+  /** Описание опции черно-белой цветовой схемы */
+  colorSchemeGrayscaleDescription?: string;
+  /** Заголовок секции размера шрифта */
+  fontSizeTitle?: string;
+  /** Значение опции маленького шрифта */
+  fontSizeSmallLabel?: string;
+  /** Описание опции маленького шрифта */
+  fontSizeSmallDescription?: string;
+  /** Значение опции стандартного шрифта */
+  fontSizeStandardLabel?: string;
+  /** Описание опции стандартного шрифта */
+  fontSizeStandardDescription?: string;
+  /** Значение опции большого шрифта */
+  fontSizeLargeLabel?: string;
+  /** Описание опции большого шрифта */
+  fontSizeLargeDescription?: string;
+  /** Заголовок секции изображений */
+  imageControlTitle?: string;
+  /** Текст для переключателя показа изображений */
+  imageControlShowLabel?: string;
+  /** Текст для переключателя скрытия изображений */
+  imageControlHideLabel?: string;
+  /** Текст для переключателя доступности */
+  accessibilityToggleLabel?: string;
+  /** Описание для включенного состояния переключателя доступности */
+  accessibilityEnableDescription?: string;
+  /** Описание для выключенного состояния переключателя доступности */
+  accessibilityDisableDescription?: string;
+}
+
+/**
+ * Переводы по умолчанию на русском языке
+ */
+export const defaultTranslations: AccessibilityTranslations = {
+  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: 'Включите режим доступности для активации всех настроек. При выключении все изменения будут сброшены.',
+};

package/src/hooks/useAccessibilitySettings.ts

@@ -2,7 +2,7 @@
  * Хук для управления настройками доступности
  * Обеспечивает централизованное управление состоянием настроек доступности
  * с автоматическим сохранением в localStorage и применением к DOM
- * 
+ *
  * Реализует требования:
  * - 5.1: Включение режима доступности с активацией всех сохраненных настроек
  * - 5.2: Выключение режима доступности с удалением всех CSS классов и стилей
@@ -11,25 +11,25 @@
  */
 
 import { useState, useEffect, useCallback } from 'react';
-import { 
-  AccessibilitySettings, 
+import {
+  AccessibilitySettings,
   DEFAULT_ACCESSIBILITY_SETTINGS,
-  AccessibilityContextType 
+  AccessibilityContextType
 } from '../types';
-import { 
-  saveToStorage, 
-  loadFromStorage, 
-  clearStorage 
+import {
+  saveToStorage,
+  loadFromStorage,
+  clearStorage
 } from '../lib/accessibility-storage';
-import { 
-  applyAllSettings, 
-  removeAllAccessibilityStyles 
+import {
+  applyAllSettings,
+  removeAllAccessibilityStyles
 } from '../lib/css-applier';
 import { updateNewElementsFontSize } from '../lib/font-size-manager';
 
 /**
  * Хук для управления настройками доступности
- * 
+ *
  * @returns Объект с текущими настройками и методами для их управления
  */
 export const useAccessibilitySettings = (): AccessibilityContextType => {