{"_id":"bvi","_rev":"6-c61ed7f35d9479d939ba24b415dc77b1","name":"bvi","dist-tags":{"latest":"2.0.0"},"versions":{"1.0.2":{"name":"bvi","version":"1.0.2","keywords":["accessibility","accessible","bvi","Button visually impaired","visually impaired"],"author":{"name":"Oleg Korotenko","email":"bvi@isvek.ru"},"license":"MIT","_id":"bvi@1.0.2","maintainers":[{"name":"isvek","email":"veeeeeeeeek@gmail.com"}],"homepage":"https://bvi.isvek.ru","bugs":{"url":"https://github.com/veks/button-visually-impaired-javascript/issues"},"dist":{"shasum":"57e3c8a0295e57552af73f624ba55c7c3de915a7","tarball":"https://registry.npmjs.org/bvi/-/bvi-1.0.2.tgz","fileCount":19,"integrity":"sha512-5oBRLC+p0nwwkpYfCiXeXcu8tWlAAJqXDNrRlIV1Y4xbFgC5lGuF4i5lPXd7wAwWrVXZbyR95O4z6sv69C680g==","signatures":[{"sig":"MEUCIFyFmBnOYfmhANLTvpbY2jQNQ3UTs0fenS/5ePww70ZBAiEAyq4T/1scFH4GmgTxsWJTMDB5rncA9mHt5Ez5P/EurII=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":622031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMzdZCRA9TVsSAnZWagAA7iAP/3TooS4ZabnZKvmTUFiz\nKluhXEy27QC8yckup7Qkpboi4lL+YERJiZWtAwopkyOEVWaIkY7CY2ua/W78\nbIbLjG1HXG7CdrBvKa3BFGLCjGGb+fJJsAN9Q12ntph5gLrXwOmfjLEfv1AR\nfVBaOohwpCRVcETx4krtMjRrg4LGq6QXNk0GvOnDJ5tL1Q+7aIRW7TpqdHou\n383MrOihc17ZaAyntmGkjgG/nITkMdvKLjRNkl/jSZUdnLkl+NuIonG5F4FM\nrWtHXIF7TX0n4cXmRJHxIjJQKydZWWSU+SVJSNqiCdK341Rbn7sOY4XRUuRu\nb6pBg/uWrCmwf1kHw6nbDn5UBVf6ZxUd1jlwlvpvRQ4vP4tDG86GaCvD3C/Y\nqRDwJ5SITic2jv/ITs2X+i7f5nMQ8CXNAEg0hQvrI/ovLOiRiuQFk5mkUmNY\nFyKZ1pEsKAlcSSQ0uvNG3ht0xxgL5hh9LI/Vq0beWnm5M2+vFTmMakhlD98E\n2y4kv2z4aFb92pf6dAfvZNZcBbdyDesLBwr4D6jaJ8Vs1sObS9dvmwow/PwV\nWK7CpDm6FyyZ5tg3NCkEqP6T9M8DGSRJBvBHxcsuSvJhos3VzxAgzecrppW8\nN0+ez6EwEc26DvPLdmJSm3u0Jhli39iWk3WaMc6Dx/MEfJ+clWS5/aefEw8c\nADwc\r\n=Ke9V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/js/bvi.min.js","sass":"src/scss/bvi.scss","type":"module","style":"dist/css/bvi.min.css","unpkg":"dist/js/bvi.js","scripts":{"js":"npm-run-all --parallel js-compile js-minify-umd","css":"npm-run-all --parallel css-compile css-minify","rollup":"rollup -c","js-lint":"eslint src/js/**/*.js","watch-js":"nodemon --watch src/js/ --ext js --exec \"npm-run-all js-compile js-minify-umd\"","watch-css":"nodemon --watch src/scss/ --ext scss --exec \"npm-run-all css-compile\"","css-minify":"cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\"","js-compile":"rollup --config rollup.config.js --sourcemap","css-compile":"sass --style expanded src/scss/bvi.scss --source-map dist/css/bvi.css","js-lint:fix":"eslint src/js/**/*.js --fix","js-minify-esm":"terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/bvi.esm.js.map,includeSources,url=bvi.esm.min.js.map\" --output dist/js/bvi.esm.min.js dist/js/bvi.esm.js","js-minify-umd":"terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/bvi.js.map,includeSources,url=bvi.min.js.map\" --output dist/js/bvi.min.js dist/js/bvi.js"},"_npmUser":{"name":"isvek","email":"veeeeeeeeek@gmail.com"},"repository":{"url":"git+https://github.com/veks/button-visually-impaired-javascript.git","type":"git"},"_npmVersion":"7.15.1","description":"Button visually impaired - is a plugin that automatically changes the visually impaired version of your site. The panel on the site for the visually impaired allows the color scheme of the site, font sizes, the synthesizer reads aloud settings changes. Th","directories":{},"_nodeVersion":"16.3.0","dependencies":{"core-js":"^3.14.0","regenerator-runtime":"^0.13.7"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.34.1","eslint":"^7.28.0","rollup":"^2.51.2","nodemon":"^2.0.7","postcss":"^8.3.3","@babel/core":"^7.14.5","npm-run-all":"^4.1.5","postcss-cli":"^8.3.1","clean-css-cli":"^5.3.0","@babel/preset-env":"^7.14.5","rollup-plugin-babel":"^4.4.0","rollup-plugin-terser":"^7.0.2","rollup-plugin-replace":"^2.2.0","@rollup/plugin-commonjs":"^19.0.0","@rollup/plugin-node-resolve":"^13.0.0","babel-plugin-array-includes":"^2.0.3","rollup-plugin-node-polyfills":"^0.2.1","@babel/plugin-transform-runtime":"^7.14.5","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-transform-object-assign":"^7.14.5"},"_npmOperationalInternal":{"tmp":"tmp/bvi_1.0.2_1630746457435_0.6753083770860089","host":"s3://npm-registry-packages"}},"2.0.0":{"_id":"bvi@2.0.0","bugs":{"url":"https://github.com/veks/button-visually-impaired-javascript/issues"},"dist":{"shasum":"ca3006d5ab2438f6d7c8333832a4912f32145032","tarball":"https://registry.npmjs.org/bvi/-/bvi-2.0.0.tgz","fileCount":86,"integrity":"sha512-/fzIgrzIEDUTIAR1MYkfrC1CI1Jqunjx6KCJMMyt+CwsYOfKl/2lsbYcXFGzRst0eVH83sK6iEXtreHqddaCbA==","signatures":[{"sig":"MEUCIQCSd7Un71ByrhbQkdmvKUF3/cjNiqMD4gKJOPN80fYIXQIgBrhSYAhABokvqltLi3FrjX6FHthFuKqtfE2xYeI6FNk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGB+NJIhvrbZ+9Qisas6ED8KuYMZzjPzaZZ2l6hPmW5wAiAV97yluIHip2TtVIMXc5pIlAXpfuCejPh0LUN9lgr/vg=="}],"unpackedSize":1900236},"main":"dist/js/bvi.cjs","name":"bvi","sass":"src/scss/bvi.scss","type":"module","style":"dist/css/bvi.min.css","types":"types/index.d.ts","unpkg":"dist/js/bvi.min.js","author":{"name":"Oleg Korotenko","email":"bvi@isvek.ru"},"module":"dist/js/bvi.esm.js","exports":{".":{"types":"./types/index.d.ts","import":"./dist/js/bvi.esm.js","default":"./dist/js/bvi.esm.js","require":"./dist/js/bvi.cjs"},"./scss":"./src/scss/bvi.scss","./src/*":"./src/*","./style":{"types":"./types/style.d.ts","default":"./dist/css/bvi.min.css"},"./dist/*":"./dist/*","./style.css":{"types":"./types/style.d.ts","default":"./dist/css/bvi.min.css"},"./package.json":"./package.json"},"gitHead":"1baf7a0052b712aa1e3f14d0bfa7abf8b15b8996","license":"MIT","scripts":{"js":"npm-run-all js-compile --parallel js-minify-umd js-minify-esm","css":"npm-run-all css-compile css-minify","build":"npm-run-all css js","rollup":"rollup -c","server":"node scripts/server.js","js-lint":"eslint src/js e2e scripts rollup.config.js playwright.config.js eslint.config.js","test:e2e":"npm run build && playwright test","watch-js":"nodemon --watch src/js/ --ext js --exec \"npm-run-all js-compile js-minify-umd\"","watch-css":"nodemon --watch src/scss/ --ext scss --exec \"npm-run-all css-compile\"","css-minify":"cleancss -O2 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\"","js-compile":"rollup --config rollup.config.js --sourcemap","css-compile":"sass --style expanded src/scss/bvi.scss --source-map dist/css/bvi.css","js-lint:fix":"eslint src/js e2e scripts rollup.config.js playwright.config.js eslint.config.js --fix","ncu-updates":"ncu -u","npm-install":"npm install","server:stop":"node scripts/server-stop.js","js-minify-esm":"terser --compress passes=3,toplevel=true --mangle toplevel=true --comments \"/^!/\" --source-map \"content=dist/js/bvi.esm.js.map,includeSources,url=bvi.esm.min.js.map\" --output dist/js/bvi.esm.min.js dist/js/bvi.esm.js","js-minify-umd":"terser --compress passes=3,toplevel=true --mangle toplevel=true --comments \"/^!/\" --source-map \"content=dist/js/bvi.js.map,includeSources,url=bvi.min.js.map\" --output dist/js/bvi.min.js dist/js/bvi.js","verify:package":"npm run build && node scripts/verify-package.js","npm-cache-clean":"npm cache clean --force","npm-check-updates":"npx npm-check-updates","npm-install-legacy-peer-deps":"npm install --legacy-peer-deps"},"version":"2.0.0","_npmUser":{"name":"isvek","email":"veeeeeeeeek@gmail.com"},"homepage":"https://bvi.isvek.ru","jsdelivr":"dist/js/bvi.min.js","keywords":["accessibility","accessible","bvi","Button visually impaired","visually impaired"],"repository":{"url":"git+https://github.com/veks/button-visually-impaired-javascript.git","type":"git"},"_npmVersion":"11.14.1","description":"Button visually impaired - is a plugin that automatically changes the visually impaired version of your site. The panel on the site for the visually impaired allows the color scheme of the site, font sizes, the synthesizer reads aloud settings changes. Th","directories":{},"maintainers":[{"name":"isvek","email":"veeeeeeeeek@gmail.com"}],"sideEffects":["*.css","*.scss"],"_nodeVersion":"20.20.2","_hasShrinkwrap":false,"devDependencies":{"sass":"^1.104.1","eslint":"^10.11.0","rollup":"^4.63.4","terser":"^5.51.2","globals":"^17.12.0","nodemon":"^3.1.14","@eslint/js":"^10.0.1","@babel/core":"^7.29.7","npm-run-all":"^4.1.5","clean-css-cli":"^5.6.3","@playwright/test":"^1.63.0","@babel/preset-env":"^7.29.7","npm-check-updates":"^23.1.0","@rollup/plugin-json":"^6.1.0","@rollup/plugin-babel":"^7.1.0","@rollup/plugin-node-resolve":"^16.0.3"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/bvi_2.0.0_1790001271047_0.12632398488783458"}}},"time":{"created":"2021-09-04T09:07:37.434Z","modified":"2026-09-21T14:34:31.310Z","1.0.1":"2021-08-18T11:55:59.983Z","1.0.0":"2021-08-18T11:55:59.983Z","1.0.2":"2021-09-04T09:07:37.564Z","2.0.0":"2026-09-21T14:34:31.141Z"},"bugs":{"url":"https://github.com/veks/button-visually-impaired-javascript/issues"},"author":{"name":"Oleg Korotenko","email":"bvi@isvek.ru"},"license":"MIT","homepage":"https://bvi.isvek.ru","keywords":["accessibility","accessible","bvi","Button visually impaired","visually impaired"],"repository":{"url":"git+https://github.com/veks/button-visually-impaired-javascript.git","type":"git"},"description":"Button visually impaired - is a plugin that automatically changes the visually impaired version of your site. The panel on the site for the visually impaired allows the color scheme of the site, font sizes, the synthesizer reads aloud settings changes. Th","maintainers":[{"name":"isvek","email":"veeeeeeeeek@gmail.com"}],"readme":"# Button visually impaired\n\n[English](README.md) | Русский\n\nButton visually impaired — плагин, который добавляет на сайт версию для слабовидящих. Панель на сайте меняет цветовую\nсхему, размер шрифта и интервалы, скрывает изображения или делает их чёрно-белыми, а синтезатор речи озвучивает каждое\nизменение и любой размеченный вами текст.\n\n* Размер шрифта (до 39 px), шрифт (с засечками или без), межбуквенный и межстрочный интервал;\n* Пять контрастных цветовых схем; панель и окно настроек следуют выбранной схеме;\n* Изображения: оттенки серого или скрытие, а вместо скрытой картинки — подпись из текста `alt`;\n* Отключение встроенных элементов (видео, карт и т. д.);\n* Синтезатор речи: озвучивает изменения и любой текст в блоке `.bvi-speech`, подсвечивает слова и позволяет выбрать голос;\n* Интерфейс и озвучка на 11 языках;\n* Работает на любом экране: на телефонах и планшетах панель сворачивается в меню;\n* Доступность: управление с клавиатуры, заметный фокус, кнопки не меньше 44×44 px, разметка для скринридеров;\n* Настройки запоминаются на сутки (cookie);\n* Без зависимостей; ES-модули, CommonJS и `<script>`, типы TypeScript, удобно с React, Vue и Next.js (`destroy()`, безопасный для SSR импорт);\n* Современные браузеры: Chrome, Edge, Opera, Firefox, Safari (Internet Explorer не поддерживается).\n\n### Демо\n\nДемо-версия доступна [здесь](https://bvi.isvek.ru/demo/).\n\nТестовые страницы с готовыми сценариями и со всеми видами элементов форм доступны на GitHub Pages:\n[Русский](https://veks.github.io/button-visually-impaired-javascript/test/) и\n[English](https://veks.github.io/button-visually-impaired-javascript/test/en.html).\n\n### NPM\n\n```\n$ npm install bvi\n```\n\n``` javascript\nimport Bvi from \"bvi\"\nimport \"bvi/style\" // стили (bvi/dist/css/bvi.min.css)\n\nnew Bvi({ target: \".bvi-open\" })\n```\n\nПакет содержит ES-модули (`import`), CommonJS (`require`) и типы TypeScript. Запись `import * as isvek from \"bvi\"` и\n`isvek.Bvi` тоже работает.\n\nПлагин работает с DOM, поэтому создавайте его только в браузере. Серверный рендеринг безопасен: импорт пакета не\nобращается к `window` и `document`.\n\nГлобальная переменная `isvek` есть только в сборке для `<script>` (`bvi.min.js`, см. [Использование в браузере](#использование-в-браузере)).\nПри `import` и `require` (React, Vue, Next.js, Nuxt, Node) глобальной переменной нет: пользуйтесь импортами из примеров.\nНе импортируйте файлы из `dist/js/` напрямую, `import \"bvi\"` сам выберет нужную сборку.\n\n#### React\n\n``` jsx\nimport { useEffect } from \"react\"\nimport Bvi from \"bvi\"\nimport \"bvi/style\"\n\nexport function AccessibilityButton() {\n  useEffect(() => {\n    const bvi = new Bvi({ target: \".bvi-open\", lang: \"ru-RU\" })\n\n    return () => bvi.destroy() // убирает панель и все обработчики, сохранённые настройки остаются\n  }, [])\n\n  return <button type=\"button\" className=\"bvi-open\">Версия для слабовидящих</button>\n}\n```\n\nСоздавайте экземпляр в `useEffect`, когда кнопка уже есть в DOM, и вызывайте `destroy()` при очистке. Это безопасно и в\n`StrictMode` React, где эффекты в режиме разработки выполняются дважды: сохранённые настройки остаются, и второй\nэкземпляр восстанавливает состояние. В Next.js помещайте компонент в клиентский (`\"use client\"`).\n\nПереиспользуемый хук с типами TypeScript:\n\n``` tsx\nimport { useEffect } from \"react\"\nimport Bvi, { type BviOptions } from \"bvi\"\nimport \"bvi/style\"\n\nexport function useBvi(options: BviOptions = { target: \".bvi-open\" }) {\n  const key = JSON.stringify(options) // плагин пересоздаётся, только когда меняются параметры\n\n  useEffect(() => {\n    const bvi = new Bvi(JSON.parse(key))\n\n    return () => bvi.destroy()\n  }, [key])\n}\n```\n\n#### Vue\n\nVue 3 (`<script setup>`):\n\n``` vue\n<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted } from \"vue\"\nimport Bvi from \"bvi\"\nimport \"bvi/style\"\n\nlet bvi: Bvi | undefined\n\nonMounted(() => {\n  bvi = new Bvi({ target: \".bvi-open\", lang: \"ru-RU\" })\n})\n\nonBeforeUnmount(() => bvi?.destroy()) // убирает панель и все обработчики, сохранённые настройки остаются\n</script>\n\n<template>\n  <button type=\"button\" class=\"bvi-open\">Версия для слабовидящих</button>\n</template>\n```\n\n`onMounted` не выполняется на сервере, поэтому такой код безопасен при серверном рендеринге. В Nuxt 3 подключите стили\nодин раз в `nuxt.config.ts` (`css: [\"bvi/style\"]`), а экземпляр создавайте в `onMounted` компонента (или оберните\nкомпонент в `<ClientOnly>`).\n\nVue 2 (Options API):\n\n``` javascript\nimport Bvi from \"bvi\"\nimport \"bvi/style\"\n\nexport default {\n  mounted() {\n    this.bvi = new Bvi({ target: \".bvi-open\" })\n  },\n  beforeDestroy() {\n    this.bvi.destroy()\n  },\n}\n```\n\nПримеры выше проверены с React 19 и Vue 3.5 в Chromium, Firefox и WebKit: клиентский рендеринг, `StrictMode`,\nразмонтирование и повторное монтирование, серверный рендеринг.\n\nПока плагин включён, он оборачивает содержимое страницы в элемент `.bvi-body`; `destroy()` возвращает всё обратно.\nСелектор `target` должен указывать на элемент, который уже есть в DOM к моменту создания экземпляра.\n\n#### Sass\n\nСоберите стили сами и измените цвета (Sass с `--load-path=node_modules` или `sass-loader` в webpack):\n\n``` scss\n@use \"bvi/src/scss/variables\" with ($theme-bg-blue: #cfe8ff, $link-border-color: #444);\n@use \"bvi/src/scss/bvi\";\n```\n\nПеременные лежат в `src/scss/variables/` (`_panel`, `_themes`, `_buttons`). По умолчанию цвета панели следуют выбранной\nцветовой схеме; значение, которое вы передадите, заменяет их для каждой схемы.\n\n#### CSS-переменные во время работы\n\nТаблица стилей также определяет свойства `--bvi-*` на `:root`. Выбор темы в JavaScript уже задаёт `data-bvi-theme` на\n`.bvi-body`, поэтому настройка в JavaScript не нужна: `--bvi-site-bg` и `--bvi-site-color` сами принимают значения\nактивной темы. Переопределить тему можно до или после подключения стилей:\n\n```css\n:root {\n  --bvi-theme-blue-bg: #d7ecff;\n  --bvi-theme-blue-color: #073763;\n}\n```\n\nТокены панели, кнопок и окна настроек доступны с префиксами `--bvi-panel-*`, `--bvi-link-*` и `--bvi-modal-*`. По умолчанию\nони принимают цвета активной схемы (`--bvi-site-bg`, `--bvi-site-color`), поэтому панель и окно настроек меняются вместе\nс сайтом. Задайте токен, например `--bvi-link-border-color`, чтобы закрепить его цвет для каждой схемы.\n\n### Использование в браузере\n\nСкачайте [последний пакет](https://github.com/veks/button-visually-impaired-javascript/archive/master.zip), распакуйте\nего и посмотрите содержимое. Скопируйте `bvi.min.js` и `bvi.min.css` (или их минифицированные варианты) в папки `dist`\nвашего приложения, как показано ниже. Подключите нужный CSS в теге `<head>` документа\n\n```html\n\n<link href=\"dist/css/bvi.min.css\" rel=\"stylesheet\">\n```\n\nПодключите нужный JS в конце страницы, прямо перед закрывающим тегом `</body>`\n\n```html\n\n<script src=\"dist/js/bvi.min.js\"></script>\n```\n\nЗапуск с настройками по умолчанию\n\n```html\n\n<script>\n  new isvek.Bvi();\n</script>\n```\n\nЗапуск со своими настройками\n\n```html\n\n<script>\n  new isvek.Bvi({\n    target: '.className',\n    fontSize: 24,\n    theme: 'black'\n    //...и т. д.\n  });\n</script>\n```\n\n### HTML-классы\n\nПроизвольные ссылки\n\n```html\n<a href=\"#\" class=\"className\">версия для слабовидящих</a>\n```\n\nСинтез речи\n\n```html\n\n<div class=\"bvi-speech\">\n  Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной «рыбой»\n  для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и\n  форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных\n  изменений пять веков, но и перешагнул в электронный дизайн.\n</div>\n```\n\nСкрыть элемент\n\n```html\n\n<div class=\"bvi-hide\">Текст будет скрыт, когда плагин включён.</div>\n```\n\nПоказать элемент\n\n```html\n\n<div class=\"bvi-show\">Текст будет показан, когда плагин включён.</div>\n```\n\nОтключить стили плагина в блоке\n\n```html\n\n<div class=\"bvi-no-styles\">Стили плагина не применяются в этом блоке.</div>\n```\n\n### Настройки\n\nОпция | Тип | Значение по умолчанию | Допустимые значения | Описание\n------ | ---- | ------- | -------------- | -----------\ntarget | string |  '.bvi-open' | '.className' | Класс элементов, запускающих плагин |\nfontSize | number |  16 | 1-39 | Размер шрифта  |\ntheme | string |  'white' |  (`white`&#124;`black`&#124;`blue`&#124;`brown`&#124;`green`) | Цветовая схема |\nimages |(string&#124;boolean) | 'grayscale' |  (`true`&#124;`false`&#124;`grayscale`) | Режим изображений |\nletterSpacing | string | 'normal' | (`normal`&#124;`average`&#124;`big`) | Межбуквенный интервал |\nlineHeight | string | 'normal' | (`normal`&#124;`average`&#124;`big`) | Межстрочный интервал |\nspeech | boolean | true | (`true`&#124;`false`) | Синтез речи |\nfontFamily | string | 'arial' |  (`arial`&#124;`times`) | Шрифт |\nbuiltElements | boolean | false | (`true`&#124;`false`) | Встроенные элементы: части HTML, которые позволяют встраивать в страницу документы, видео, карты и интерактивные материалы.|\npanelFixed | boolean | true | (`true`&#124;`false`) | Закрепление панели для слабовидящих вверху страницы. |\npanelHide | boolean | false | (`true`&#124;`false`) | Скрывает панель для слабовидящих и показывает значок панели. |\nreload | boolean | false | (`true`&#124;`false`) | Включает и отключает перезагрузку страницы при переходе к обычной версии сайта. |\nlang | string | 'ru-RU' | (`ru-RU`&#124;`en-US`&#124;`es-ES`&#124;`de-DE`&#124;`fr-FR`&#124;`pt-BR`&#124;`it-IT`&#124;`tr-TR`&#124;`pl-PL`&#124;`zh-CN`&#124;`ja-JP`) | Язык интерфейса и озвучки: русский, английский, испанский, немецкий, французский, португальский (Бразилия), итальянский, турецкий, польский, китайский (упрощённый), японский. |\ncopyright | boolean | true | (`true`&#124;`false`) | Показывает ссылку на bvi.isvek.ru в окне настроек. Значение `false` её скрывает. |\n\n### Методы\n\nМетод | Описание\n------ | -----------\n`destroy()` | Убирает со страницы панель, обёртку и все обработчики. Сохранённые настройки (cookie) остаются, поэтому новый экземпляр восстанавливает прежнее состояние. Вызывайте при размонтировании компонента (React, Vue и др.).\n\n### Клавиатура\n\n* `Tab` / `Shift+Tab` — переход между элементами управления (все они — обычные кнопки `<button>`).\n* `←` `→` `↑` `↓` — переход между кнопками панели, окна настроек или элементов озвучки (по кругу). `Home` / `End` — первая / последняя кнопка.\n* `Space` / `Enter` — нажатие кнопки. `Esc` — закрыть окно настроек (фокус возвращается на кнопку, которая его открыла).\n\n### История изменений\n\n#### 2.0.0\n\n**Несовместимые изменения**\n\n* Internet Explorer и другие устаревшие браузеры больше не поддерживаются. Babel нацелен на `defaults and supports es6-module, not dead`; полифилы, `core-js` и `regenerator-runtime` удалены. `bvi.min.js` весит около 62 КБ (16,6 КБ в gzip) вместе с 11 языками.\n* Элементы управления панели — обычные кнопки `<button type=\"button\">` вместо `<a href=\"#\" role=\"button\">`. Свои стили для `a.bvi-link` нужно перенести на `.bvi-link`.\n* Иконки — Font Awesome Free 7.3.1 (Solid), встроены в CSS (data URI) и рисуются через CSS `mask`, поэтому в каждой цветовой схеме принимают цвет текста кнопки. Папка `dist/img` больше не публикуется.\n* Кнопки размера шрифта переименованы под остальные классы: `.bvi-fontSize-minus` / `.bvi-fontSize-plus` теперь `.bvi-font-size-minus` / `.bvi-font-size-plus`. Обновите свои стили и скрипты, которые к ним обращаются.\n* У панели белые кнопки с рамкой цвета текста и залитая активная кнопка вместо нейтральных серых заливок. Текст кнопок 16px вместо 14px, зазор между кнопками не меньше 8px. Панель и окно настроек следуют выбранной цветовой схеме («Цвета сайта»), поэтому тёмная схема больше не оставляет на странице яркую белую панель. Их цвета по умолчанию берутся из `--bvi-site-bg` и `--bvi-site-color`; Sass-переменные (`$panel-*`, `$link-*`, новые `$panel-accent`, `$panel-accent-strong` и `$link-active-border-color`) по-прежнему их переопределяют.\n* Sass-переменные `$breakpoint-*` теперь означают минимальную ширину viewport (mobile-first), а не максимальную. Ниже `$breakpoint-desktop` (78rem) группы настроек свёрнуты за кнопкой «Меню».\n* Все размеры заданы в `rem`, а не в `px`. Размер шрифта страницы отсчитывается от корневого размера (`html.bvi-active { font-size: 100% }`), поэтому учитывает настройку размера шрифта в браузере.\n\n**Добавлено**\n\n* Метод `destroy()`, сборки ES-модуля (`import`) и CommonJS (`require`), карта `exports`, типы TypeScript, `import \"bvi/style\"`, безопасный для SSR импорт. Документация по использованию с React, Next.js, Vue и Sass.\n* Подписи вместо скрытых изображений: текст `alt` (`Изображение: ...`) или «Изображение без описания». Декоративные изображения (`alt=\"\"`) остаются без подписи.\n* Доступность: разметка `role=\"region\"`, `role=\"group\"`, `aria-label`, `aria-pressed` и `role=\"dialog\"`; заметное кольцо фокуса; элементы управления не меньше 44×44 px; контраст рамок 3:1; читаемые недоступные кнопки озвучки; хорошо заметное выбранное состояние (заливка цветом текста, светлое внутреннее кольцо, инвертированная иконка), отличающееся от наведения; закреплённая панель не закрывает цель перехода по якорю (`scroll-padding-top`); ловушка фокуса, `Esc` и возврат фокуса в окне настроек; навигация стрелками, `Home` и `End`.\n* Языки интерфейса и озвучки: русский, английский, испанский, немецкий, французский, португальский (Бразилия), итальянский, турецкий, польский, китайский (упрощённый) и японский (опция `lang`). Переводы — JSON-файлы в `src/js/i18n/locales/`.\n* Опция `copyright`: значение `false` скрывает ссылку на bvi.isvek.ru в окне настроек. Ссылка теперь сообщает, что открывается в новой вкладке.\n* На телефонах и планшетах (ниже `$breakpoint-desktop`) группы настроек свёрнуты за кнопкой «Меню», которая плавно раскрывается и учитывает `prefers-reduced-motion`.\n* Sass-переменные разделены на `variables/`, `mixins/` и `functions/` и переопределяются через `@use ... with (...)`.\n* Тестовая страница с готовыми сценариями и со всеми видами элементов форм и страницы (`test/index.html`), а также браузерные E2E-тесты в Chromium, Firefox и WebKit (`e2e/`); плоская конфигурация ESLint.\n\n**Исправлено**\n\n* Озвучка: цепочка «Воспроизвести → Пауза → Продолжить» больше не сбрасывает состояние и не перестаёт работать (таймер статуса, `cancel()` после `pause()` и события отменённых фраз).\n* CSS плагина менял `html { font-size }` и `box-sizing` на каждой странице, даже когда плагин был выключен.\n* Межстрочный и межбуквенный интервал и шрифт теперь доходят до элементов, у которых заданы собственные значения (заголовки и другие).\n* Элементы с фоновым изображением скрывались целиком; теперь убирается только изображение.\n* Панель «прыгала», когда закреплялась при прокрутке (содержимое под ней сдвигалось вверх); теперь она сохраняет своё место и плавно выезжает (без анимации при `prefers-reduced-motion`).\n* Панель использовала шрифт с засечками; заголовок окна настроек был слишком мелким; цвета выделения текста не применялись в цветовых схемах; удалены сломанные и мёртвые CSS-правила.\n* `bvi.min.css` собирался из предыдущего `bvi.css`; в `package.json` `files` пропускал вложенные папки.\n* Панель не открывалась в браузерах, где у `speechSynthesis` нет `addEventListener` (старый Safari); повторная инициализация больше не дублирует обработчики.\n* Опечатки и непереведённые строки в английских текстах.\n\n#### 1.0.0\n\n* создана новая версия на JavaScript\n\n### Лицензия\n\n[MIT License](https://github.com/veks/button-visually-impaired-javascript/blob/master/LICENSE.md)\n","readmeFilename":"README.ru.md"}