vision-accessibility 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Vision Accessibility Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,225 @@
+# Vision Accessibility
+
+Универсальный компонент панели доступности для слабовидящих пользователей. Предоставляет настройки цветовой схемы, размера шрифта и отображения изображений.
+
+## Установка
+
+```bash
+npm install vision-accessibility
+```
+
+## Использование
+
+### Базовое использование
+
+```tsx
+import React, { useState } from 'react';
+import { AccessibilityPanel } from 'vision-accessibility';
+import 'vision-accessibility/dist/style.css'; // Импорт стилей
+
+function App() {
+  const [isAccessibilityPanelOpen, setIsAccessibilityPanelOpen] = useState(false);
+
+  return (
+    <div>
+      <button onClick={() => setIsAccessibilityPanelOpen(true)}>
+        Настройки доступности
+      </button>
+      
+      <AccessibilityPanel
+        isOpen={isAccessibilityPanelOpen}
+        onClose={() => setIsAccessibilityPanelOpen(false)}
+        position="top-right"
+      />
+    </div>
+  );
+}
+```
+
+### Импорт глобальных стилей
+
+Для корректной работы высококонтрастной темы и скрытия изображений необходимо импортировать глобальные стили в ваш основной CSS файл:
+
+```scss
+// В вашем globals.scss или main.scss
+@import 'vision-accessibility/dist/global.scss';
+```
+
+Или импортировать в JavaScript:
+
+```tsx
+import 'vision-accessibility/dist/global.css';
+```
+
+### Использование хуков
+
+```tsx
+import { useAccessibilitySettings, useAccessibilityToggle } from 'vision-accessibility';
+
+function MyComponent() {
+  const { settings, updateSettings } = useAccessibilitySettings();
+  const [isEnabled, setEnabled] = useAccessibilityToggle();
+
+  return (
+    <div>
+      <p>Режим доступности: {isEnabled ? 'включен' : 'выключен'}</p>
+      <p>Цветовая схема: {settings.colorScheme}</p>
+      <p>Размер шрифта: {settings.fontSize}</p>
+    </div>
+  );
+}
+```
+
+### Использование контекста
+
+```tsx
+import { AccessibilityProvider, useAccessibilityContext } from 'vision-accessibility';
+
+function App() {
+  return (
+    <AccessibilityProvider>
+      <MyComponent />
+    </AccessibilityProvider>
+  );
+}
+
+function MyComponent() {
+  const { settings, updateSettings } = useAccessibilityContext();
+  
+  return (
+    <button onClick={() => updateSettings({ fontSize: 'large' })}>
+      Увеличить шрифт
+    </button>
+  );
+}
+```
+
+## API
+
+### AccessibilityPanel
+
+Основной компонент панели доступности.
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `isOpen` | `boolean` | - | Открыта ли панель |
+| `onClose` | `() => void` | - | Обработчик закрытия панели |
+| `position` | `'top-right' \| 'top-left'` | `'top-right'` | Позиция панели |
+
+### Типы
+
+```tsx
+export type ColorScheme = 'standard' | 'high-contrast' | 'grayscale';
+export type FontSize = 'small' | 'standard' | 'large';
+
+export interface AccessibilitySettings {
+  isEnabled: boolean;
+  colorScheme: ColorScheme;
+  fontSize: FontSize;
+  showImages: boolean;
+}
+```
+
+### Хуки
+
+#### useAccessibilitySettings()
+
+Основной хук для управления настройками доступности.
+
+```tsx
+const { settings, updateSettings, resetSettings, isLoaded } = useAccessibilitySettings();
+```
+
+#### useAccessibilityToggle()
+
+Хук для управления общим режимом доступности.
+
+```tsx
+const [isEnabled, setEnabled] = useAccessibilityToggle();
+```
+
+#### useAccessibilitySetting(key)
+
+Хук для управления конкретной настройкой.
+
+```tsx
+const [fontSize, setFontSize] = useAccessibilitySetting('fontSize');
+```
+
+### Утилиты
+
+#### CSS Applier
+
+```tsx
+import { 
+  applyColorScheme, 
+  applyFontSize, 
+  applyImageVisibility,
+  removeAllAccessibilityStyles 
+} from 'vision-accessibility';
+
+// Применить цветовую схему
+applyColorScheme('high-contrast');
+
+// Применить размер шрифта
+applyFontSize('large');
+
+// Управление изображениями
+applyImageVisibility(false); // скрыть изображения
+
+// Сбросить все стили
+removeAllAccessibilityStyles();
+```
+
+#### Storage
+
+```tsx
+import { saveToStorage, loadFromStorage, clearStorage } from 'vision-accessibility';
+
+// Сохранить настройки
+saveToStorage(settings);
+
+// Загрузить настройки
+const savedSettings = loadFromStorage();
+
+// Очистить настройки
+clearStorage();
+```
+
+## Функции
+
+### Цветовые схемы
+
+- **standard**: Стандартная цветовая схема сайта
+- **high-contrast**: Высококонтрастная схема (белый текст на черном фоне)
+- **grayscale**: Черно-белый режим (все цвета преобразуются в оттенки серого)
+
+### Размеры шрифта
+
+- **small**: Уменьшенный размер (80% от оригинального)
+- **standard**: Стандартный размер
+- **large**: Увеличенный размер (130% от оригинального)
+
+### Управление изображениями
+
+- Возможность скрытия всех изображений на странице
+- Сохранение возможности восстановления без перезагрузки
+
+## Особенности
+
+- **SSR совместимость**: Работает с Next.js и другими SSR фреймворками
+- **Автосохранение**: Настройки автоматически сохраняются в localStorage
+- **Динамические элементы**: Автоматически применяет настройки к новым элементам
+- **Доступность**: Полная поддержка клавиатурной навигации и screen readers
+- **TypeScript**: Полная типизация всех компонентов и функций
+
+## Требования
+
+- React >= 16.8.0
+- React DOM >= 16.8.0
+
+## Лицензия
+
+MIT

package/dist/components/AccessibilityPanel/AccessibilityPanel.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { AccessibilityPanelProps } from '../../types';
+
+/**
+ * Основной компонент панели доступности с провайдером контекста
+ *
+ * @param props - Свойства компонента
+ * @returns JSX элемент с полной панелью настроек доступности
+ */
+export declare const AccessibilityPanel: React.FC<AccessibilityPanelProps>;
+export default AccessibilityPanel;
+//# sourceMappingURL=AccessibilityPanel.d.ts.map

package/dist/components/AccessibilityPanel/AccessibilityPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccessibilityPanel.d.ts","sourceRoot":"","sources":["../../../src/components/AccessibilityPanel/AccessibilityPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AA6HtD;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAMhE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/AccessibilityToggle/AccessibilityToggle.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+
+/**
+ * Свойства компонента AccessibilityToggle
+ */
+interface AccessibilityToggleProps {
+    /** CSS класс для дополнительной стилизации */
+    className?: string;
+}
+/**
+ * Компонент главного переключателя режима доступности
+ *
+ * @param props - Свойства компонента
+ * @returns JSX элемент с переключателем общего режима доступности
+ */
+export declare const AccessibilityToggle: React.FC<AccessibilityToggleProps>;
+export default AccessibilityToggle;
+//# sourceMappingURL=AccessibilityToggle.d.ts.map

package/dist/components/AccessibilityToggle/AccessibilityToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccessibilityToggle.d.ts","sourceRoot":"","sources":["../../../src/components/AccessibilityToggle/AccessibilityToggle.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;GAEG;AACH,UAAU,wBAAwB;IAChC,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAsDlE,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/ColorSchemeControl/ColorSchemeControl.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+
+/**
+ * Свойства компонента ColorSchemeControl
+ */
+interface ColorSchemeControlProps {
+    /** CSS класс для дополнительной стилизации */
+    className?: string;
+}
+/**
+ * Компонент управления цветовой схемой
+ *
+ * @param props - Свойства компонента
+ * @returns JSX элемент с радио-кнопками для выбора цветовой схемы
+ */
+export declare const ColorSchemeControl: React.FC<ColorSchemeControlProps>;
+export default ColorSchemeControl;
+//# sourceMappingURL=ColorSchemeControl.d.ts.map

package/dist/components/ColorSchemeControl/ColorSchemeControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSchemeControl.d.ts","sourceRoot":"","sources":["../../../src/components/ColorSchemeControl/ColorSchemeControl.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B;;GAEG;AACH,UAAU,uBAAuB;IAC/B,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA2BD;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA2DhE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/FontSizeControl/FontSizeControl.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+
+/**
+ * Свойства компонента FontSizeControl
+ */
+interface FontSizeControlProps {
+    /** CSS класс для дополнительной стилизации */
+    className?: string;
+}
+/**
+ * Компонент управления размером шрифта
+ *
+ * @param props - Свойства компонента
+ * @returns JSX элемент с радио-кнопками для выбора размера шрифта
+ */
+export declare const FontSizeControl: React.FC<FontSizeControlProps>;
+export default FontSizeControl;
+//# sourceMappingURL=FontSizeControl.d.ts.map

package/dist/components/FontSizeControl/FontSizeControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FontSizeControl.d.ts","sourceRoot":"","sources":["../../../src/components/FontSizeControl/FontSizeControl.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B;;GAEG;AACH,UAAU,oBAAoB;IAC5B,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA2BD;;;;;GAKG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA2D1D,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/ImageControl/ImageControl.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+
+/**
+ * Свойства компонента ImageControl
+ */
+interface ImageControlProps {
+    /** CSS класс для дополнительной стилизации */
+    className?: string;
+}
+/**
+ * Компонент управления отображением изображений
+ *
+ * @param props - Свойства компонента
+ * @returns JSX элемент с переключателем для управления изображениями
+ */
+export declare const ImageControl: React.FC<ImageControlProps>;
+export default ImageControl;
+//# sourceMappingURL=ImageControl.d.ts.map

package/dist/components/ImageControl/ImageControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageControl.d.ts","sourceRoot":"","sources":["../../../src/components/ImageControl/ImageControl.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;GAEG;AACH,UAAU,iBAAiB;IACzB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAuDpD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/context/AccessibilityContext.d.ts

@@ -0,0 +1,25 @@
+import { default as React, ReactNode } from 'react';
+import { AccessibilityContextType } from '../types';
+
+/**
+ * Свойства провайдера контекста
+ */
+interface AccessibilityProviderProps {
+    children: ReactNode;
+}
+/**
+ * Провайдер контекста настроек доступности
+ *
+ * @param props - Свойства провайдера
+ * @returns JSX элемент с провайдером контекста
+ */
+export declare const AccessibilityProvider: React.FC<AccessibilityProviderProps>;
+/**
+ * Хук для использования контекста настроек доступности
+ *
+ * @returns Контекст настроек доступности
+ * @throws Ошибка, если хук используется вне провайдера
+ */
+export declare const useAccessibilityContext: () => AccessibilityContextType;
+export default AccessibilityProvider;
+//# sourceMappingURL=AccessibilityContext.d.ts.map

package/dist/context/AccessibilityContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccessibilityContext.d.ts","sourceRoot":"","sources":["../../src/context/AccessibilityContext.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,EAA6B,SAAS,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAQpD;;GAEG;AACH,UAAU,0BAA0B;IAClC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAQtE,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,QAAO,wBAQ1C,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/hooks/useAccessibilitySettings.d.ts

@@ -0,0 +1,25 @@
+import { AccessibilitySettings, AccessibilityContextType } from '../types';
+
+/**
+ * Хук для управления настройками доступности
+ *
+ * @returns Объект с текущими настройками и методами для их управления
+ */
+export declare const useAccessibilitySettings: () => AccessibilityContextType;
+/**
+ * Хук для управления конкретной настройкой доступности
+ * Предоставляет удобный интерфейс для работы с отдельными настройками
+ *
+ * @param settingKey - Ключ настройки для управления
+ * @returns Значение настройки и функция для её обновления
+ */
+export declare const useAccessibilitySetting: <K extends keyof AccessibilitySettings>(settingKey: K) => [AccessibilitySettings[K], (value: AccessibilitySettings[K]) => void];
+/**
+ * Хук для управления общим режимом доступности
+ * Предоставляет удобный интерфейс для включения/выключения всех настроек
+ *
+ * @returns Состояние режима доступности и функция для его переключения
+ */
+export declare const useAccessibilityToggle: () => [boolean, (enabled: boolean) => void];
+export default useAccessibilitySettings;
+//# sourceMappingURL=useAccessibilitySettings.d.ts.map

package/dist/hooks/useAccessibilitySettings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAccessibilitySettings.d.ts","sourceRoot":"","sources":["../../src/hooks/useAccessibilitySettings.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,EACL,qBAAqB,EAErB,wBAAwB,EACzB,MAAM,UAAU,CAAC;AAYlB;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,QAAO,wBA0J3C,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB,GAAI,CAAC,SAAS,MAAM,qBAAqB,EAC3E,YAAY,CAAC,KACZ,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,KAAK,IAAI,CAQtE,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,QAAO,CAAC,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAU7E,CAAC;AAEF,eAAe,wBAAwB,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Экспорт компонентов панели доступности
+ */
+export type { AccessibilitySettings, ColorScheme, FontSize, AccessibilityPanelProps, ControlComponentProps, AccessibilityContextType } from './types';
+export { DEFAULT_ACCESSIBILITY_SETTINGS, STORAGE_KEY } from './types';
+export { saveToStorage, loadFromStorage, clearStorage, validateSettings, safeLocalStorageOperation } from './lib/accessibility-storage';
+export { getTextElements, getImageElements, applyClassToElements, removeClassFromElements, safeDOMOperation, isDOMAvailable } from './lib/dom-manipulator';
+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';
+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';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,YAAY,EACV,qBAAqB,EACrB,WAAW,EACX,QAAQ,EACR,uBAAuB,EACvB,qBAAqB,EACrB,wBAAwB,EACzB,MAAM,SAAS,CAAC;AAEjB,OAAO,EACL,8BAA8B,EAC9B,WAAW,EACZ,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,aAAa,EACb,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,yBAAyB,EAC1B,MAAM,6BAA6B,CAAC;AAGrC,OAAO,EACL,eAAe,EACf,gBAAgB,EAChB,oBAAoB,EACpB,uBAAuB,EACvB,gBAAgB,EAChB,cAAc,EACf,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EACL,gBAAgB,EAChB,aAAa,EACb,oBAAoB,EACpB,4BAA4B,EAC5B,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACZ,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,yBAAyB,EACzB,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EACL,wBAAwB,EACxB,uBAAuB,EACvB,sBAAsB,EACvB,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EACL,qBAAqB,EACrB,uBAAuB,EACxB,MAAM,gCAAgC,CAAC;AAGxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,oDAAoD,CAAC;AACxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,kBAAkB,EAAE,MAAM,oDAAoD,CAAC;AACxF,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC"}