vision-accessibility 1.0.0

package/src/components/AccessibilityToggle/AccessibilityToggle.module.scss

@@ -0,0 +1,158 @@
+/**
+ * Стили для компонента главного переключателя режима доступности
+ * Реализует выделенный переключатель для управления общим режимом доступности
+ */
+
+.accessibilityToggle {
+  margin-bottom: $spacing-xl;
+  padding-bottom: $spacing-lg;
+  border-bottom: 1px solid $gray-300;
+}
+
+.toggleContainer {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+}
+
+.toggleLabel {
+  display: flex;
+  align-items: center;
+  gap: $spacing-lg;
+  cursor: pointer;
+  padding: $spacing-lg;
+  border: 2px solid $primary;
+  border-radius: $border-radius-lg;
+  transition: all $transition-fast;
+  background: $primary-lighter;
+
+  &:hover {
+    background: $primary-light;
+    border-color: $primary-dark;
+  }
+
+  &:focus-within {
+    background: $primary-light;
+    border-color: $primary-dark;
+    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
+  }
+}
+
+.toggleInput {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+
+  &:focus + .toggleSlider {
+    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
+  }
+
+  &:checked + .toggleSlider {
+    background: $success;
+
+    .toggleThumb {
+      transform: translateX(28px);
+    }
+  }
+}
+
+.toggleSlider {
+  position: relative;
+  width: 56px;
+  height: 28px;
+  background: $gray-400;
+  border-radius: 14px;
+  transition: all $transition-normal;
+  flex-shrink: 0;
+}
+
+.toggleThumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 24px;
+  height: 24px;
+  background: $white;
+  border-radius: 50%;
+  transition: transform $transition-normal;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+}
+
+.toggleContent {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xs;
+}
+
+.toggleTitle {
+  font-size: 16px;
+  font-weight: 600;
+  color: $gray-800;
+  line-height: 1.3;
+}
+
+.toggleStatus {
+  font-size: 14px;
+  font-weight: 500;
+  color: $primary;
+  line-height: 1.2;
+}
+
+.description {
+  font-size: 13px;
+  color: $gray-600;
+  line-height: 1.4;
+  margin: 0;
+  padding: 0 $spacing-lg;
+}
+
+// Высококонтрастная тема - адаптация стилей
+:global(.accessibility-high-contrast) .accessibilityToggle {
+  border-bottom-color: $white !important;
+
+  .toggleLabel {
+    background: $black !important;
+    border-color: $white !important;
+    color: $white !important;
+
+    &:hover,
+    &:focus-within {
+      background: $gray-800 !important;
+      border-color: $yellow !important;
+    }
+  }
+
+  .toggleTitle {
+    color: $white !important;
+  }
+
+  .toggleStatus {
+    color: $yellow !important;
+  }
+
+  .description {
+    color: $gray-400 !important;
+  }
+
+  .toggleSlider {
+    background: $gray-600 !important;
+    border: 2px solid $white !important;
+  }
+
+  .toggleInput:checked + .toggleSlider {
+    background: $yellow !important;
+
+    .toggleThumb {
+      background: $black !important;
+      border: 2px solid $white !important;
+    }
+  }
+
+  .toggleThumb {
+    background: $white !important;
+    border: 2px solid $black !important;
+  }
+}

package/src/components/AccessibilityToggle/AccessibilityToggle.tsx

@@ -0,0 +1,85 @@
+/**
+ * Компонент главного переключателя режима доступности
+ * Предоставляет переключатель для включения/выключения всех настроек доступности
+ * 
+ * Реализует требования:
+ * - 5.1: Включение режима доступности с активацией всех сохраненных настроек
+ * - 5.2: Выключение режима доступности с удалением всех CSS классов и стилей
+ * - 5.3: Возврат страницы к исходному состоянию без настроек доступности
+ */
+
+import React from 'react';
+import { useAccessibilityContext } from '../../context/AccessibilityContext';
+import styles from './AccessibilityToggle.module.scss';
+
+/**
+ * Свойства компонента AccessibilityToggle
+ */
+interface AccessibilityToggleProps {
+  /** CSS класс для дополнительной стилизации */
+  className?: string;
+}
+
+/**
+ * Компонент главного переключателя режима доступности
+ * 
+ * @param props - Свойства компонента
+ * @returns JSX элемент с переключателем общего режима доступности
+ */
+export const AccessibilityToggle: React.FC<AccessibilityToggleProps> = ({ 
+  className 
+}) => {
+  // Используем контекст для получения состояния и методов управления
+  const { settings, updateSettings } = useAccessibilityContext();
+  const isEnabled = settings.isEnabled;
+
+  /**
+   * Обработчик изменения общего режима доступности
+   * 
+   * @param event - Событие изменения чекбокса
+   */
+  const handleToggleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    updateSettings({ isEnabled: event.target.checked });
+  };
+
+  return (
+    <div className={`${styles.accessibilityToggle} ${className || ''}`}>
+      <div className={styles.toggleContainer}>
+        <label className={styles.toggleLabel}>
+          <input
+            type="checkbox"
+            checked={isEnabled}
+            onChange={handleToggleChange}
+            className={styles.toggleInput}
+            aria-describedby="accessibility-toggle-description"
+          />
+          
+          <span className={styles.toggleSlider} aria-hidden="true">
+            <span className={styles.toggleThumb} />
+          </span>
+          
+          <div className={styles.toggleContent}>
+            <span className={styles.toggleTitle}>
+              Режим доступности
+            </span>
+            <span className={styles.toggleStatus}>
+              {isEnabled ? 'Включен' : 'Выключен'}
+            </span>
+          </div>
+        </label>
+        
+        <p 
+          id="accessibility-toggle-description"
+          className={styles.description}
+        >
+          {isEnabled 
+            ? 'Все настройки доступности активны. Используйте элементы управления ниже для точной настройки.' 
+            : 'Включите режим доступности для активации всех настроек. При выключении все изменения будут сброшены.'
+          }
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default AccessibilityToggle;

package/src/components/ColorSchemeControl/ColorSchemeControl.module.scss

@@ -0,0 +1,175 @@
+/**
+ * Стили для компонента управления цветовой схемой
+ * Реализует доступный интерфейс с радио-кнопками для выбора цветовой схемы
+ */
+
+.colorSchemeControl {
+  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;
+}
+
+.optionsContainer {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+}
+
+.option {
+  display: flex;
+  align-items: flex-start;
+  gap: $spacing-md;
+  cursor: pointer;
+  padding: $spacing-md;
+  border: 1px solid $gray-300;
+  border-radius: $border-radius;
+  transition: all $transition-fast;
+  position: relative;
+  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);
+  }
+
+  &.selected {
+    background: $primary-light;
+    border-color: $primary;
+    
+    .radioIndicator {
+      background: $primary;
+      border-color: $primary;
+      
+      &::after {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+  }
+
+  &.optionDisabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+
+    &:hover {
+      background: $white;
+      border-color: $gray-300;
+    }
+  }
+}
+
+.radioInput {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+
+  &:focus + .optionContent {
+    outline: 2px solid $primary;
+    outline-offset: 2px;
+  }
+}
+
+.optionContent {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xs;
+}
+
+.optionLabel {
+  font-size: 14px;
+  font-weight: 500;
+  color: $gray-800;
+  line-height: 1.4;
+}
+
+.optionDescription {
+  font-size: 12px;
+  color: $gray-600;
+  line-height: 1.3;
+}
+
+.radioIndicator {
+  width: 18px;
+  height: 18px;
+  border: 2px solid $gray-400;
+  border-radius: 50%;
+  background: $white;
+  transition: all $transition-fast;
+  position: relative;
+  flex-shrink: 0;
+  margin-top: 1px;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 8px;
+    height: 8px;
+    background: $white;
+    border-radius: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    transition: all $transition-fast;
+    opacity: 0;
+  }
+}
+
+// Высококонтрастная тема - адаптация стилей
+:global(.accessibility-high-contrast) .colorSchemeControl {
+  .title {
+    color: $white !important;
+  }
+
+  .option {
+    background: $black !important;
+    border-color: $white !important;
+    color: $white !important;
+
+    &:hover,
+    &:focus-within {
+      background: $gray-800 !important;
+    }
+
+    &.selected {
+      background: $gray-800 !important;
+    }
+  }
+
+  .optionLabel {
+    color: $white !important;
+  }
+
+  .optionDescription {
+    color: $gray-400 !important;
+  }
+
+  .radioIndicator {
+    border-color: $white !important;
+    background: $black !important;
+
+    &::after {
+      background: $white !important;
+    }
+  }
+}

package/src/components/ColorSchemeControl/ColorSchemeControl.tsx

@@ -0,0 +1,116 @@
+/**
+ * Компонент управления цветовой схемой
+ * Предоставляет радио-кнопки для выбора цветовой схемы доступности
+ * 
+ * Реализует требования:
+ * - 2.1: Применение высококонтрастной цветовой схемы
+ * - 2.2: Применение черно-белой цветовой схемы
+ * - 2.3: Возврат к стандартной цветовой схеме
+ */
+
+import React from 'react';
+import { ColorScheme } from '../../types';
+import { useAccessibilityContext } from '../../context/AccessibilityContext';
+import styles from './ColorSchemeControl.module.scss';
+
+/**
+ * Свойства компонента ColorSchemeControl
+ */
+interface ColorSchemeControlProps {
+  /** CSS класс для дополнительной стилизации */
+  className?: 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 
+}) => {
+  // Используем контекст для получения состояния и методов управления
+  const { settings, updateSettings } = useAccessibilityContext();
+  const colorScheme = settings.colorScheme;
+  const isEnabled = settings.isEnabled;
+
+  /**
+   * Обработчик изменения цветовой схемы
+   * 
+   * @param event - Событие изменения радио-кнопки
+   */
+  const handleColorSchemeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newColorScheme = event.target.value as ColorScheme;
+    updateSettings({ colorScheme: newColorScheme });
+  };
+
+  return (
+    <div className={`${styles.colorSchemeControl} ${className || ''} ${!isEnabled ? styles.disabled : ''}`}>
+      <h4 className={styles.title}>
+        Цветовая схема
+      </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>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ColorSchemeControl;

package/src/components/FontSizeControl/FontSizeControl.module.scss

@@ -0,0 +1,175 @@
+/**
+ * Стили для компонента управления размером шрифта
+ * Реализует доступный интерфейс с радио-кнопками для выбора размера шрифта
+ */
+
+.fontSizeControl {
+  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;
+}
+
+.optionsContainer {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+}
+
+.option {
+  display: flex;
+  align-items: flex-start;
+  gap: $spacing-md;
+  cursor: pointer;
+  padding: $spacing-md;
+  border: 1px solid $gray-300;
+  border-radius: $border-radius;
+  transition: all $transition-fast;
+  position: relative;
+  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);
+  }
+
+  &.selected {
+    background: $primary-light;
+    border-color: $primary;
+    
+    .radioIndicator {
+      background: $primary;
+      border-color: $primary;
+      
+      &::after {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+  }
+
+  &.optionDisabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+
+    &:hover {
+      background: $white;
+      border-color: $gray-300;
+    }
+  }
+}
+
+.radioInput {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+
+  &:focus + .optionContent {
+    outline: 2px solid $primary;
+    outline-offset: 2px;
+  }
+}
+
+.optionContent {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-xs;
+}
+
+.optionLabel {
+  font-size: 14px;
+  font-weight: 500;
+  color: $gray-800;
+  line-height: 1.4;
+}
+
+.optionDescription {
+  font-size: 12px;
+  color: $gray-600;
+  line-height: 1.3;
+}
+
+.radioIndicator {
+  width: 18px;
+  height: 18px;
+  border: 2px solid $gray-400;
+  border-radius: 50%;
+  background: $white;
+  transition: all $transition-fast;
+  position: relative;
+  flex-shrink: 0;
+  margin-top: 1px;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 8px;
+    height: 8px;
+    background: $white;
+    border-radius: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    transition: all $transition-fast;
+    opacity: 0;
+  }
+}
+
+// Высококонтрастная тема - адаптация стилей
+:global(.accessibility-high-contrast) .fontSizeControl {
+  .title {
+    color: $white !important;
+  }
+
+  .option {
+    background: $black !important;
+    border-color: $white !important;
+    color: $white !important;
+
+    &:hover,
+    &:focus-within {
+      background: $gray-800 !important;
+    }
+
+    &.selected {
+      background: $gray-800 !important;
+    }
+  }
+
+  .optionLabel {
+    color: $white !important;
+  }
+
+  .optionDescription {
+    color: $gray-400 !important;
+  }
+
+  .radioIndicator {
+    border-color: $white !important;
+    background: $black !important;
+
+    &::after {
+      background: $white !important;
+    }
+  }
+}