ru-a11y-toolkit 0.2.0 → 0.3.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 (2) hide show
  1. package/README.md +52 -11
  2. package/package.json +2 -2
package/README.md CHANGED
@@ -23,7 +23,7 @@ npm install --save-dev ru-a11y-toolkit
23
23
  ```bash
24
24
  npm install --save-dev ru-a11y-toolkit-eslint # только ESLint-плагин
25
25
  npm install --save-dev ru-a11y-toolkit-cli # только CLI (скоро)
26
- npm install --save-dev ru-a11y-toolkit-overlay # только React Overlay (скоро)
26
+ npm install --save-dev ru-a11y-toolkit-overlay # только React Overlay
27
27
  ```
28
28
 
29
29
  ---
@@ -33,8 +33,8 @@ npm install --save-dev ru-a11y-toolkit-overlay # только React Overlay (
33
33
  | Пакет | Статус | Назначение |
34
34
  |-------|--------|------------|
35
35
  | [`ru-a11y-toolkit-eslint`](#-eslint-плагин) | ✅ Готов | Статическая проверка JSX/HTML в процессе разработки |
36
- | [`ru-a11y-toolkit-cli`](#-cli-сканер-в-разработке) | 🚧 В разработке | Проверка готовых страниц по URL |
37
- | [`ru-a11y-toolkit-overlay`](#-react-overlay-в-разработке) | 🚧 В разработке | Runtime-визуализация ошибок в браузере |
36
+ | [`ru-a11y-toolkit-overlay`](#-react-overlay) | ✅ Готов | Runtime-визуализация ошибок в браузере |
37
+ | [`ru-a11y-toolkit-cli`](#-cli-сканер) | 🚧 В разработке | Проверка готовых страниц по URL |
38
38
 
39
39
  ---
40
40
 
@@ -107,7 +107,7 @@ module.exports = {
107
107
 
108
108
  **26 правил jsx-a11y** — переведены на русский с привязкой к нормативам.
109
109
 
110
- → [Подробная документация ESLint-плагина](./packages/eslint-preset/README.md)
110
+ → [Подробная документация ESLint-плагина](https://www.npmjs.com/package/ru-a11y-toolkit-eslint)
111
111
 
112
112
  ---
113
113
 
@@ -124,25 +124,66 @@ npx ru-a11y-toolkit-cli scan https://example.gov.ru --format html --out report.h
124
124
 
125
125
  ---
126
126
 
127
- ## 🖥 React Overlay _(в разработке)_
127
+ ## 🖥 React Overlay
128
128
 
129
- Планируется: runtime-визуализация нарушений доступности прямо на странице — подсветка элементов, всплывающие подсказки с описанием на русском языке и ссылками на нормативные документы.
129
+ React-компонент, который в **dev-режиме** добавляет поверх приложения панель с отчётом о нарушениях доступности, найденных через [axe-core](https://github.com/dequelabs/axe-core).
130
+
131
+ ### Установка
132
+
133
+ ```bash
134
+ npm install --save-dev ru-a11y-toolkit-overlay
135
+ ```
136
+
137
+ ### Подключение
130
138
 
131
139
  ```jsx
132
- // Будущий API:
133
- import { A11yOverlay } from 'ru-a11y-toolkit-overlay';
140
+ import { RuA11yOverlay } from 'ru-a11y-toolkit-overlay';
134
141
 
135
142
  function App() {
136
143
  return (
137
144
  <>
138
- {process.env.NODE_ENV === 'development' && <A11yOverlay />}
145
+ {process.env.NODE_ENV === 'development' && <RuA11yOverlay />}
139
146
  <YourApp />
140
147
  </>
141
148
  );
142
149
  }
143
150
  ```
144
151
 
145
- → [README](./packages/react-overlay/README.md)
152
+ ### Пропсы
153
+
154
+ | Проп | Тип | По умолчанию | Описание |
155
+ |------|-----|-------------|----------|
156
+ | `preset` | `'recommended' \| 'gost-aa' \| 'strict'` | `'recommended'` | Набор правил проверки (см. ниже) |
157
+ | `autoScan` | `boolean` | `true` | Отслеживать изменения DOM и пересканировать автоматически |
158
+ | `debounceMs` | `number` | `1000` | Задержка в мс перед повторным сканированием после изменений DOM |
159
+ | `excludeSelector` | `string` | — | CSS-селектор элементов, которые нужно исключить из сканирования |
160
+
161
+ #### Пресеты (`preset`)
162
+
163
+ Соответствуют уровням ESLint-плагина:
164
+
165
+ | Пресет | Уровень | Для кого |
166
+ |--------|---------|----------|
167
+ | `recommended` | WCAG 2.1 AA | Все проекты — базовые критические проверки |
168
+ | `gost-aa` | WCAG 2.1 AA + best-practice | Гос. органы, порталы под Постановление №102 |
169
+ | `strict` | WCAG 2.1 AAA | Максимальная строгость, включая экспериментальные правила |
170
+
171
+ ```jsx
172
+ // Пример с пресетом под Постановление №102
173
+ <RuA11yOverlay preset="gost-aa" debounceMs={500} />
174
+ ```
175
+
176
+ ### Что делает
177
+
178
+ - 🔍 **Автоматическое сканирование** — запускается при загрузке и при изменениях DOM (MutationObserver)
179
+ - 🇷🇺 **Русскоязычные описания** — что нарушено, почему это проблема, как исправить
180
+ - 📋 **Нормативные ссылки** — ГОСТ Р 52872-2019, Постановление №102, WCAG 2.1
181
+ - 📊 **Группировка по принципам WCAG**: Воспринимаемость / Управляемость / Понятность / Надёжность
182
+ - 🎯 **Навигация по ошибкам** — клик на ошибку плавно прокручивает к элементу и кратко подсвечивает его
183
+ - 🖱️ **Перетаскиваемая панель** — не мешает работе с приложением
184
+ - ⚡ **Только dev-режим** — никакого влияния на production-бандл
185
+
186
+ → [Подробная документация Overlay](https://www.npmjs.com/package/ru-a11y-toolkit-overlay)
146
187
 
147
188
  ---
148
189
 
@@ -185,7 +226,7 @@ ru-a11y/
185
226
  ├── packages/
186
227
  │ ├── eslint-preset/ # ru-a11y-toolkit-eslint ✅
187
228
  │ ├── cli/ # ru-a11y-toolkit-cli 🚧
188
- │ └── react-overlay/ # ru-a11y-toolkit-overlay 🚧
229
+ │ └── react-overlay/ # ru-a11y-toolkit-overlay ✅
189
230
  ├── README.md # этот файл
190
231
  └── LICENSE
191
232
  ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ru-a11y-toolkit",
3
- "version": "0.2.0",
3
+ "version": "0.3.0",
4
4
  "description": "Toolkit для автоматизированной проверки веб-доступности React/JS-приложений под российские нормативы (ГОСТ Р 52872-2019, Постановление №102)",
5
5
  "main": "index.js",
6
6
  "workspaces": [
@@ -14,7 +14,7 @@
14
14
  },
15
15
  "dependencies": {
16
16
  "ru-a11y-toolkit-eslint": "1.0.2",
17
- "ru-a11y-toolkit-overlay": "0.1.0"
17
+ "ru-a11y-toolkit-overlay": "1.0.0"
18
18
  },
19
19
  "peerDependencies": {
20
20
  "eslint": "^9.0.0 || ^10.0.0"