vision-accessibility 1.0.0 → 1.0.2

package/src/lib/css-applier.ts

@@ -7,7 +7,7 @@
  * - 3.1, 3.2, 3.3: Настройка размера шрифта  
  * - 4.1, 4.2: Управление отображением изображений
  */
-
+import cn from 'classnames';
 import { ColorScheme, FontSize, AccessibilitySettings } from '../types';
 import { 
   getImageElements, 
@@ -25,7 +25,7 @@ import {
  * CSS классы для различных настроек доступности
  */
 export const CSS_CLASSES = {
-  HIGH_CONTRAST: 'accessibility-high-contrast',
+  HIGH_CONTRAST: cn('accessibility-high-contrast'),
   FONT_SMALL: 'accessibility-font-small',
   FONT_LARGE: 'accessibility-font-large',
   HIDE_IMAGES: 'accessibility-hide-images',
@@ -42,21 +42,25 @@ export const applyColorScheme = (scheme: ColorScheme): void => {
   safeDOMOperation(() => {
     if (!isDOMAvailable()) return;
 
-    // Удаляем существующие классы и стили
+    // Удаляем существующие классы и стили высокого контраста перед применением нового режима
     document.body.classList.remove(CSS_CLASSES.HIGH_CONTRAST);
     document.body.style.filter = '';
+    // Также удаляем стили высокого контраста со всех элементов
+    removeHighContrastStylesFromAllElements();
     
     switch (scheme) {
       case 'high-contrast':
         // Требование 2.1: Контрастный белый на черном
         document.body.classList.add(CSS_CLASSES.HIGH_CONTRAST);
+        // Также применяем стили высокого контраста ко всем элементам на странице
+        applyHighContrastStylesToAllElements();
         break;
       case 'grayscale':
         // Требование 2.2: Черно-белый режим через CSS фильтр
         document.body.style.filter = 'grayscale(100%)';
         break;
       case 'standard':
-        // Требование 2.3: Стандартное оформление (стили уже удалены выше)
+        // Требование 2.3: Стандартное оформление
         break;
       default:
         console.warn(`Неизвестная цветовая схема: ${scheme}`);
@@ -119,6 +123,9 @@ export const removeAllAccessibilityStyles = (): void => {
     // Удаляем классы с изображений
     const imageElements = getImageElements();
     removeClassFromElements(imageElements, CSS_CLASSES.HIDE_IMAGES);
+
+    // Удаляем стили высокого контраста со всех элементов
+    removeHighContrastStylesFromAllElements();
   }, 'Ошибка при удалении всех стилей доступности');
 };
 
@@ -139,6 +146,122 @@ export const applyAllSettings = (settings: AccessibilitySettings): void => {
   applyImageVisibility(settings.showImages);
 };
 
+/**
+ * Применение стилей высокого контраста ко всем элементам на странице
+ */
+export const applyHighContrastStylesToAllElements = (): void => {
+  safeDOMOperation(() => {
+    if (!isDOMAvailable()) return;
+
+    // Получаем все элементы на странице
+    const allElements = document.querySelectorAll('*');
+    
+    allElements.forEach(element => {
+      // Проверяем, что элемент является HTMLElement (имеет стиль)
+      if (element instanceof HTMLElement) {
+        // Применяем стили высокого контраста к каждому элементу
+        element.style.backgroundColor = '#000';
+        element.style.color = '#fff';
+        element.style.borderColor = '#fff';
+      }
+    });
+
+    // Особые стили для ссылок
+    const links = document.querySelectorAll('a');
+    links.forEach(link => {
+      if (link instanceof HTMLElement) {
+        link.style.color = '#ffff00'; // желтый цвет для ссылок
+      }
+    });
+
+    // Особые стили для посещенных ссылок
+    const visitedLinks = document.querySelectorAll('a:visited');
+    visitedLinks.forEach(link => {
+      if (link instanceof HTMLElement) {
+        link.style.color = '#ff00ff'; // пурпурный для посещенных
+      }
+    });
+
+    // Особые стили для кнопок
+    const buttons = document.querySelectorAll('button');
+    buttons.forEach(button => {
+      if (button instanceof HTMLElement) {
+        button.style.backgroundColor = '#fff';
+        button.style.color = '#000';
+        button.style.border = '2px solid #fff';
+      }
+    });
+
+    // Особые стили для полей ввода
+    const inputs = document.querySelectorAll('input, textarea, select');
+    inputs.forEach(input => {
+      if (input instanceof HTMLElement) {
+        input.style.backgroundColor = '#fff';
+        input.style.color = '#000';
+        input.style.border = '2px solid #fff';
+      }
+    });
+  }, 'Ошибка при применении стилей высокого контраста ко всем элементам');
+};
+
+/**
+ * Удаление стилей высокого контраста со всех элементов на странице
+ */
+export const removeHighContrastStylesFromAllElements = (): void => {
+  safeDOMOperation(() => {
+    if (!isDOMAvailable()) return;
+
+    // Получаем все элементы на странице
+    const allElements = document.querySelectorAll('*');
+    
+    allElements.forEach(element => {
+      // Проверяем, что элемент является HTMLElement (имеет стиль)
+      if (element instanceof HTMLElement) {
+        // Удаляем инлайновые стили высокого контраста
+        element.style.backgroundColor = '';
+        element.style.color = '';
+        element.style.borderColor = '';
+      }
+    });
+
+    // Сбрасываем особые стили для ссылок
+    const links = document.querySelectorAll('a');
+    links.forEach(link => {
+      if (link instanceof HTMLElement) {
+        link.style.color = '';
+      }
+    });
+
+    // Сбрасываем особые стили для посещенных ссылок
+    const visitedLinks = document.querySelectorAll('a:visited');
+    visitedLinks.forEach(link => {
+      if (link instanceof HTMLElement) {
+        link.style.color = '';
+      }
+    });
+
+    // Сбрасываем особые стили для кнопок
+    const buttons = document.querySelectorAll('button');
+    buttons.forEach(button => {
+      if (button instanceof HTMLElement) {
+        button.style.backgroundColor = '';
+        button.style.color = '';
+        button.style.border = '';
+      }
+    });
+
+    // Сбрасываем особые стили для полей ввода
+    const inputs = document.querySelectorAll('input, textarea, select');
+    inputs.forEach(input => {
+      if (input instanceof HTMLElement) {
+        input.style.backgroundColor = '';
+        input.style.color = '';
+        input.style.border = '';
+      }
+    });
+  }, 'Ошибка при удалении стилей высокого контраста со всех элементов');
+};
+
 /**
  * Применение конкретной настройки с проверкой общего режима
  * Применяет настройку только если общий режим доступности включен

package/src/styles/global.scss

@@ -12,14 +12,14 @@
   background: #000 !important;
   color: #fff !important;
   
-  /* Применяем стили ко всем элементам, КРОМЕ панели доступности */
-  *:not(.accessibility-panel-container):not(.accessibility-panel-container *) {
-    background: #000 !important;
+  /* Применяем стили ко всем элементам, включая панель доступности */
+  * {
+    background: none !important;
     color: #fff !important;
     border-color: #fff !important;
   }
   
-  a:not(.accessibility-panel-container a) {
+  a {
     color: #ffff00 !important;
     
     &:visited {
@@ -31,7 +31,7 @@
     }
   }
   
-  button:not(.accessibility-panel-container button) {
+  button {
     background: #fff !important;
     color: #000 !important;
     border: 2px solid #fff !important;
@@ -42,9 +42,9 @@
     }
   }
   
-  input:not(.accessibility-panel-container input), 
-  textarea:not(.accessibility-panel-container textarea), 
-  select:not(.accessibility-panel-container select) {
+  input, 
+  textarea, 
+  select {
     background: #fff !important;
     color: #000 !important;
     border: 2px solid #fff !important;

package/src/types/index.ts

@@ -43,7 +43,7 @@ export interface AccessibilityPanelProps {
   /** Обработчик закрытия панели */
   onClose: () => void;
   /** Позиция панели относительно кнопки */
-  position?: 'top-right' | 'top-left';
+  position?: 'top-right' | 'top-left' | 'bottom-left' | 'bottom-right';
 }
 
 /**