ru-a11y-toolkit 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +63 -3
  2. package/index.js +18 -0
  3. package/package.json +3 -2
package/README.md CHANGED
@@ -24,6 +24,7 @@ npm install --save-dev ru-a11y-toolkit
24
24
  npm install --save-dev ru-a11y-toolkit-eslint # только ESLint-плагин
25
25
  npm install --save-dev ru-a11y-toolkit-cli # только CLI (скоро)
26
26
  npm install --save-dev ru-a11y-toolkit-overlay # только React Overlay
27
+ npm install ru-a11y-toolkit-visually-impaired # только режим для слабовидящих
27
28
  ```
28
29
 
29
30
  ---
@@ -34,6 +35,7 @@ npm install --save-dev ru-a11y-toolkit-overlay # только React Overlay
34
35
  |-------|--------|------------|
35
36
  | [`ru-a11y-toolkit-eslint`](#-eslint-плагин) | ✅ Готов | Статическая проверка JSX/HTML в процессе разработки |
36
37
  | [`ru-a11y-toolkit-overlay`](#-react-overlay) | ✅ Готов | Runtime-визуализация ошибок в браузере |
38
+ | [`ru-a11y-toolkit-visually-impaired`](#-режим-для-слабовидящих) | ✅ Готов | Режим повышенной читабельности для конечного пользователя |
37
39
  | [`ru-a11y-toolkit-cli`](#-cli-сканер) | 🚧 В разработке | Проверка готовых страниц по URL |
38
40
 
39
41
  ---
@@ -187,6 +189,63 @@ function App() {
187
189
 
188
190
  ---
189
191
 
192
+ ## 👁 Режим для слабовидящих
193
+
194
+ React-хук + CSS-файл, которые позволяют добавить на сайт кнопку «Версия для слабовидящих». При активации на `<html>` добавляется класс `ru-a11y-visually-impaired`, переключающий страницу в высококонтрастный режим с увеличенным шрифтом.
195
+
196
+ > **Важно:** модуль не заменяет соответствие ГОСТ/WCAG на уровне вёрстки. Используйте совместно с `ru-a11y-toolkit-eslint` и `ru-a11y-toolkit-overlay` для полноценного покрытия.
197
+
198
+ ### Установка
199
+
200
+ ```bash
201
+ npm install ru-a11y-toolkit-visually-impaired
202
+ ```
203
+
204
+ ### Подключение
205
+
206
+ ```tsx
207
+ import { useVisuallyImpaired } from 'ru-a11y-toolkit-visually-impaired';
208
+ import 'ru-a11y-toolkit-visually-impaired/styles/visually-impaired.css';
209
+
210
+ function Header() {
211
+ const { toggle, isEnabled } = useVisuallyImpaired();
212
+ return (
213
+ <button onClick={toggle} aria-pressed={isEnabled}>
214
+ {isEnabled ? 'Обычная версия' : 'Версия для слабовидящих'}
215
+ </button>
216
+ );
217
+ }
218
+ ```
219
+
220
+ CSS импортируется отдельно и не инжектируется через JS — для совместимости с SSR и явного контроля над стилями.
221
+
222
+ ### Что делает режим
223
+
224
+ | Что меняется | Нормативная база |
225
+ |---|---|
226
+ | Белый фон, чёрный текст (контраст 21:1) | ГОСТ Р 52872, п. 7.2; WCAG 1.4.3 |
227
+ | Шрифт от 1.5rem, межстрочный интервал 1.6 | Постановление №102; WCAG 1.4.12 |
228
+ | Заголовки от 1.75rem до 3rem | WCAG 1.4.4 |
229
+ | Кнопки и поля форм min-height 3rem | WCAG 2.5.5 |
230
+ | Outline 3px на элементах в фокусе | ГОСТ Р 52872, п. 6.6; WCAG 2.4.7 |
231
+ | Изображения: grayscale + контраст 120% | WCAG 1.4.11 |
232
+ | SVG-иконки заменяются текстом `aria-label` | WCAG 1.1.1 |
233
+ | Анимации и переходы отключены | ГОСТ Р 52872, п. 6.11; WCAG 2.3.1 |
234
+
235
+ ### API
236
+
237
+ ```ts
238
+ const { toggle, isEnabled } = useVisuallyImpaired();
239
+ // toggle() — переключает режим
240
+ // isEnabled — текущее состояние (boolean)
241
+ ```
242
+
243
+ Состояние не сохраняется в localStorage по умолчанию — разработчик решает механизм хранения самостоятельно (пример с localStorage есть в документации пакета).
244
+
245
+ → [Подробная документация visually-impaired](https://www.npmjs.com/package/ru-a11y-toolkit-visually-impaired)
246
+
247
+ ---
248
+
190
249
  ## Нормативная база
191
250
 
192
251
  ### ГОСТ Р 52872-2019
@@ -224,9 +283,10 @@ ru-a11y/
224
283
  ├── index.js # umbrella-реэкспорт (ru-a11y-toolkit)
225
284
  ├── package.json # ru-a11y-toolkit
226
285
  ├── packages/
227
- │ ├── eslint-preset/ # ru-a11y-toolkit-eslint ✅
228
- │ ├── cli/ # ru-a11y-toolkit-cli 🚧
229
- │ └── react-overlay/ # ru-a11y-toolkit-overlay ✅
286
+ │ ├── eslint-preset/ # ru-a11y-toolkit-eslint ✅
287
+ │ ├── cli/ # ru-a11y-toolkit-cli 🚧
288
+ │ ├── react-overlay/ # ru-a11y-toolkit-overlay ✅
289
+ │ └── visually-impaired/ # ru-a11y-toolkit-visually-impaired ✅
230
290
  ├── README.md # этот файл
231
291
  └── LICENSE
232
292
  ```
package/index.js CHANGED
@@ -25,6 +25,18 @@ try {
25
25
  // overlay недоступен (например, dist ещё не собран или нет React)
26
26
  }
27
27
 
28
+ /**
29
+ * Visually Impaired — режим повышенной читабельности для слабовидящих.
30
+ * Загружается лениво: не падает при отсутствии React в окружении.
31
+ * Для использования: import { useVisuallyImpaired } from 'ru-a11y-toolkit-visually-impaired'
32
+ */
33
+ let visuallyImpaired = {};
34
+ try {
35
+ visuallyImpaired = require('ru-a11y-toolkit-visually-impaired');
36
+ } catch {
37
+ // visuallyImpaired недоступен (например, dist ещё не собран или нет React)
38
+ }
39
+
28
40
  module.exports = {
29
41
  /** ESLint-плагин с правилами и конфигами */
30
42
  eslint,
@@ -35,6 +47,12 @@ module.exports = {
35
47
  */
36
48
  overlay,
37
49
 
50
+ /**
51
+ * Режим повышенной читабельности для слабовидящих.
52
+ * Используйте хук: const { toggle, isEnabled } = toolkit.visuallyImpaired.useVisuallyImpaired()
53
+ */
54
+ visuallyImpaired,
55
+
38
56
  /**
39
57
  * Конфиги для прямого использования в eslint.config.js (Flat Config):
40
58
  * const { configs } = require('ru-a11y-toolkit');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ru-a11y-toolkit",
3
- "version": "0.3.0",
3
+ "version": "0.4.0",
4
4
  "description": "Toolkit для автоматизированной проверки веб-доступности React/JS-приложений под российские нормативы (ГОСТ Р 52872-2019, Постановление №102)",
5
5
  "main": "index.js",
6
6
  "workspaces": [
@@ -14,7 +14,8 @@
14
14
  },
15
15
  "dependencies": {
16
16
  "ru-a11y-toolkit-eslint": "1.0.2",
17
- "ru-a11y-toolkit-overlay": "1.0.0"
17
+ "ru-a11y-toolkit-overlay": "1.1.1",
18
+ "ru-a11y-toolkit-visually-impaired": "1.0.0"
18
19
  },
19
20
  "peerDependencies": {
20
21
  "eslint": "^9.0.0 || ^10.0.0"