{"_id":"@vue-a11y/announcer","_rev":"21-020681b8ec3376b69d3b1e8f591bca6c","name":"@vue-a11y/announcer","dist-tags":{"latest":"2.1.0","beta":"3.1.3","next":"3.1.5"},"versions":{"2.0.0":{"name":"@vue-a11y/announcer","version":"2.0.0","keywords":["announcer","Vue.js","Vue","accessibility","a11y","screen","readers","Vision","Disability","JAWS","ChromeVox","NVDA"],"author":{"url":"https://medium.com/@ktquez","name":"Alan Ktquez","email":"ktquez@gmail.com"},"license":"MIT","_id":"@vue-a11y/announcer@2.0.0","maintainers":[{"name":"kddeisz","email":"kevin.deisz@gmail.com"},{"name":"mlama007","email":"marialamardo@outlook.com"},{"name":"ktquez","email":"ktquez@gmail.com"}],"homepage":"https://github.com/vue-a11y/vue-announcer#readme","bugs":{"url":"https://github.com/vue-a11y/vue-announcer/issues"},"dist":{"shasum":"0cd77c75f7d53324078235577b906df56ba83841","tarball":"https://registry.npmjs.org/@vue-a11y/announcer/-/announcer-2.0.0.tgz","fileCount":40,"integrity":"sha512-5QxVK8ugI32cGHcWqDrvFTIMdCv5idLaoR/tp0WgpyFFJmTvHvtSalktDQVmQNk5UMS8b/PnnRtx2GlohjR8Pw==","signatures":[{"sig":"MEUCIQDUo9pOBhljUqcWTxp8apNXNAZLCpPw5JyQDq1Bv4xP+AIgait6mDHocgcBV+YoSPr0Q9hMLWOSjecaA9lw3DTixr8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":55309,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerFuhCRA9TVsSAnZWagAANywP/R8OUFucMWflkBxUg6Dv\nRS/vLirvJlUecjojvwYfPYUikalRJ4gjKIzIENsBn/pebvACL9m28qP8S0FB\nGuYdz9B+fFG35GwzOXHaWMvsQpWd9231s3FJAA95V2j/FvOZd4/XUZFZ1mJs\nGOKQqd8sv56FhColzUxEJqlg8hztM1ZnRZsP/AJSBBdd2+B0Mzwjasp7HcBc\n/K0KPx94g9gjJmV0CBi1Ulpx9BAtva1hUyfTZMAUV8v7Vrv8i+WvI9H/cBme\n0XZiy67u9lfpGcJGf4MBwmcalEpl+wK5gqWk0fGIT61BgvBAkPuWUnO2cbpc\nu2qAI1MewSZfyuBF0AQHFlQuKrI2gz+zZGMNkXPHaBkFMBYLnonJ5Q/x8sbF\ngL8KYQGCW/Bpu2QhcvzqJ+flflO+DHtEuipdIcyBgISvpOmFYldn8oVNoXM3\n+9BwODBjonl5b/QbR5yzkvpvRRJgE7KRGhIOEs9+3onK71Uj/uRBX5sa7Ymk\nRYeGC/m7QQlLgHoXnlVD42wyoZ2eXxWl1e9vtQ651HJpLdS6siDOqOGJqNVO\n5jcF3RIR5YTIw2R2ptHa9Be9Cz2ZIZnwvYD8hGwBAJ/OfzShVeI1MQ9ByGvH\n+N0hhkQd/GF4zex/m/kPHJbtG2zWsti8+EP00cOTCDd5zmxr7tuY8esWRnJ3\n+jOb\r\n=avTQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-announcer.umd.js","unpkg":"dist/vue-announcer.min.js","module":"dist/vue-announcer.esm.js","gitHead":"35abeff9eeef3709283c8ae8f88bf9ed625e5fbe","scripts":{"dev":"rollup --config rollup.config.dev.js --watch","docs":"vuepress dev docs","test":"cypress run","build":"npm run build:umd & npm run build:es & npm run build:unpkg","release":"standard-version","build:es":"rollup --config rollup.config.prod.js --format es --file dist/vue-announcer.esm.js","build:umd":"rollup --config rollup.config.prod.js --format umd --file dist/vue-announcer.umd.js","test:open":"cypress open","docs:build":"vuepress build docs","build:unpkg":"rollup --config rollup.config.prod.js --format iife --file dist/vue-announcer.min.js","docs:publish":"surge docs/.vuepress/dist https://vue-announcer-v2.surge.sh","projectPublish":"git push --follow-tags origin master && npm publish"},"_npmUser":{"name":"ktquez","email":"ktquez@gmail.com"},"repository":{"url":"git+https://github.com/vue-a11y/vue-announcer.git","type":"git"},"_npmVersion":"6.12.0","description":"A simple way with Vue to announce any information to the screen readers.","directories":{"doc":"docs","test":"tests","example":"example"},"_nodeVersion":"12.13.0","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"vue":"^2.6.11","jest":"^25.1.0","surge":"^0.21.3","eslint":"^6.8.0","rollup":"^1.29.0","cypress":"^4.5.0","chokidar":"^3.3.1","vue-jest":"^3.0.5","vuepress":"^1.3.1","babel-core":"^6.26.3","babel-jest":"^25.1.0","babel-eslint":"^10.0.3","@vue/test-utils":"^1.0.0-beta.31","babel-preset-env":"^1.7.0","standard-version":"^7.1.0","eslint-plugin-vue":"^6.1.2","rollup-plugin-vue":"^5.1.1","eslint-plugin-node":"^11.0.0","jest-serializer-vue":"^2.0.2","jest-transform-stub":"^2.0.0","rollup-plugin-babel":"^3.0.4","rollup-plugin-buble":"^0.19.8","rollup-plugin-serve":"^1.0.1","babel-preset-stage-2":"^6.24.1","eslint-plugin-import":"^2.20.0","rollup-plugin-eslint":"^7.0.0","rollup-plugin-terser":"^5.2.0","eslint-plugin-cypress":"^2.10.3","eslint-plugin-promise":"^4.2.1","rollup-plugin-replace":"^2.0.0","vue-template-compiler":"^2.6.11","eslint-plugin-standard":"^4.0.1","rollup-plugin-commonjs":"^10.1.0","@vuepress/theme-default":"^1.3.1","rollup-plugin-livereload":"^1.0.4","@rollup/plugin-node-resolve":"^7.1.1","@vue/eslint-config-standard":"^5.1.0","eslint-plugin-vuejs-accessibility":"^0.1.1"},"_npmOperationalInternal":{"tmp":"tmp/announcer_2.0.0_1588353952689_0.49217721796038316","host":"s3://npm-registry-packages"}},"2.0.1":{"name":"@vue-a11y/announcer","version":"2.0.1","keywords":["announcer","Vue.js","Vue","accessibility","a11y","screen","readers","Vision","Disability","JAWS","ChromeVox","NVDA"],"author":{"url":"https://medium.com/@ktquez","name":"Alan Ktquez","email":"ktquez@gmail.com"},"license":"MIT","_id":"@vue-a11y/announcer@2.0.1","maintainers":[{"name":"kddeisz","email":"kevin.deisz@gmail.com"},{"name":"ktquez","email":"ktquez@gmail.com"},{"name":"mlama007","email":"marialamardo@outlook.com"}],"homepage":"https://github.com/vue-a11y/vue-announcer#readme","bugs":{"url":"https://github.com/vue-a11y/vue-announcer/issues"},"dist":{"shasum":"3d0c68fd8a8d0e4b097d04a30e3340d8358f1e71","tarball":"https://registry.npmjs.org/@vue-a11y/announcer/-/announcer-2.0.1.tgz","fileCount":40,"integrity":"sha512-IQGxeI3Gh5/SprnMG4202ebwuT8lyoGOG0D2rjwWmWET/FWIPcj/l4jEVZbiCJNFOYj0nr64kWFjeVMSVJEpUQ==","signatures":[{"sig":"MEUCIQD3ON4bTYsC7rWnpMJK8fwT4TvEqbbKYoKz5bvupw5CmgIgUc2BKBu/ZqGj5Ble6V2MdN76vNmFyXF9fcxm6mGu6d8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":55670,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKY6CRA9TVsSAnZWagAA3KgP/2Xa+qhUwhoG9XYtIe4/\nUQNOm+6zY51l6CUjt397gCgifjE1B8Uz7/L75ZYXl0dazPB/StVo2PcqZvCK\nQCQ8NobtnzQ5KRMdBI9YBSrBzCPaXd+6hQC9T/FDrjR/9Xa5pZ5gjkN2eRAy\nbpT7BzEhZMV6qRnTxfcO5xjt8+LTED7RdUAOv6XNKFmCemf2oVqiU88G1T2O\nHl3wJC9GUdy0u5TyaqWfC4HUNX1KpQpxJseACoHCfplmUJuU91Q6RNBuVrk/\negUNrHn5v+w9yAz8+7qE0tpaXdjhhnE17vbweLK3oTNsyTQPUyPNicdReyJJ\nMV67iUMLjWEput0X2phY8APVDBIQXpPeYAq3LTO97xq15BrVc40PoEh6u/VS\nt9HthhgfFyiACwhZ1eJAI/0+Dbo+gGdN9JjOEkIWrPygYZuluuNsp36Dm07X\n5DSOUYEe1qoz520RgnJlWI+AQ73qZzUfVV937iwJ3Cs7wNpK6hHMRTpT67nt\ndBE3ukvJBuTpxG3pPrTfxR5297ocj8vgm52EoD6TwHAvm7gxoWTcoj7Cq+Mj\njts1x/Q/4f56CCY+eK2cE+wRjHbvXd86d5f2cfX/crQeraOUnZEZjpwfkPIM\nsF9K10hJSbW6KGF4HDfiAWJvmzsTIKtzowI/qnth8+ZQrBz/64myTNt7d1ci\nmjy8\r\n=MOwP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-announcer.umd.js","unpkg":"dist/vue-announcer.min.js","module":"dist/vue-announcer.esm.js","gitHead":"b17d923d725f642585f3be90c0416db1347070b8","scripts":{"dev":"rollup --config rollup.config.dev.js --watch","docs":"vuepress dev docs","test":"cypress run","build":"npm run build:umd & npm run build:es & npm run build:unpkg","release":"standard-version","build:es":"rollup --config rollup.config.prod.js --format es --file dist/vue-announcer.esm.js","build:umd":"rollup --config rollup.config.prod.js --format umd --file dist/vue-announcer.umd.js","test:open":"cypress open","docs:build":"vuepress build docs","build:unpkg":"rollup --config rollup.config.prod.js --format iife --file dist/vue-announcer.min.js","docs:publish":"surge docs/.vuepress/dist https://vue-announcer-v2.surge.sh","projectPublish":"git push --follow-tags origin master && npm publish --access public"},"_npmUser":{"name":"ktquez","email":"ktquez@gmail.com"},"repository":{"url":"git+https://github.com/vue-a11y/vue-announcer.git","type":"git"},"_npmVersion":"6.12.0","description":"A simple way with Vue to announce any information to the screen readers.","directories":{"doc":"docs","test":"tests","example":"example"},"_nodeVersion":"12.13.0","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"vue":"^2.6.11","jest":"^25.1.0","surge":"^0.21.3","eslint":"^6.8.0","rollup":"^1.29.0","cypress":"^4.5.0","chokidar":"^3.3.1","vue-jest":"^3.0.5","vuepress":"^1.3.1","babel-core":"^6.26.3","babel-jest":"^25.1.0","babel-eslint":"^10.0.3","@vue/test-utils":"^1.0.0-beta.31","babel-preset-env":"^1.7.0","standard-version":"^7.1.0","eslint-plugin-vue":"^6.1.2","rollup-plugin-vue":"^5.1.1","eslint-plugin-node":"^11.0.0","jest-serializer-vue":"^2.0.2","jest-transform-stub":"^2.0.0","rollup-plugin-babel":"^3.0.4","rollup-plugin-buble":"^0.19.8","rollup-plugin-serve":"^1.0.1","babel-preset-stage-2":"^6.24.1","eslint-plugin-import":"^2.20.0","rollup-plugin-eslint":"^7.0.0","rollup-plugin-terser":"^5.2.0","eslint-plugin-cypress":"^2.10.3","eslint-plugin-promise":"^4.2.1","rollup-plugin-replace":"^2.0.0","vue-template-compiler":"^2.6.11","eslint-plugin-standard":"^4.0.1","rollup-plugin-commonjs":"^10.1.0","@vuepress/theme-default":"^1.3.1","rollup-plugin-livereload":"^1.0.4","@rollup/plugin-node-resolve":"^7.1.1","@vue/eslint-config-standard":"^5.1.0","eslint-plugin-vuejs-accessibility":"^0.1.1"},"_npmOperationalInternal":{"tmp":"tmp/announcer_2.0.1_1588373050456_0.5195671472720895","host":"s3://npm-registry-packages"}},"2.0.2":{"name":"@vue-a11y/announcer","version":"2.0.2","keywords":["announcer","Vue.js","Vue","accessibility","a11y","screen","readers","Vision","Disability","JAWS","ChromeVox","NVDA"],"author":{"url":"https://medium.com/@ktquez","name":"Alan Ktquez","email":"ktquez@gmail.com"},"license":"MIT","_id":"@vue-a11y/announcer@2.0.2","maintainers":[{"name":"kddeisz","email":"kevin.deisz@gmail.com"},{"name":"ktquez","email":"ktquez@gmail.com"},{"name":"mlama007","email":"marialamardo@outlook.com"}],"homepage":"https://github.com/vue-a11y/vue-announcer#readme","bugs":{"url":"https://github.com/vue-a11y/vue-announcer/issues"},"dist":{"shasum":"9666cba54af850e5bfe8334eee55aeabd1b75e8c","tarball":"https://registry.npmjs.org/@vue-a11y/announcer/-/announcer-2.0.2.tgz","fileCount":43,"integrity":"sha512-SxUk89MSIrR5y2jWPqn/ZBB2TTgLfQUfDeiw3mandc83uY8X5OZGxV8VBY0a7cXMtMFJyj4Q4WKcQ6f+FD5+Rg==","signatures":[{"sig":"MEUCIAJVKSpTEtgltAoeqs8JBkGR0xWxjt+OyusXFOZhveMZAiEAxhZpMlecpRxVVQB/mpPMUTIwkYsbA4OL/hbYtbcucW0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":55760,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetbIvCRA9TVsSAnZWagAAlaAP/A7ARhqYSBjG+oeW6zxE\nZcq+LUWDVsABx8+hJgqNHkh8X0bRjb+OGr6f07D3zcJ8oBOusieq6GhPsKjN\nmZKs/6RbSXPXgNPspSkzRop4aX6HM2nWo8aVEsLferX2C9EOEJu4KSzNRcI4\nIZkP0a9NaR+aHehEW9WIAqgR27wZnozn1DVNYMSBIF7B+r107+zgNTwnASIP\nJ7V5qiPAEvfHtwnII5LLi3GpoiU+VOjT/h5y/6lftZfQchzkxsawZlfWOKHh\nSkIakG+HYU1OUPOIS+Rl4r/cfRufeLhMa+yIdL4PT/+piIRuv1gnRsdTmYPQ\nGBDHeGoX7Dw/KUFXrqW7av/WPvcDGZreJvXqMFdl//HfqoZYowvUhylE021O\nT94FQibhNUralKSRUJeIxWDcZPpD6ysfgXT0HzsQs58AOYMhFQVDOCvwUHT+\n5VS1uGSg6s+DdnzhIFKdTTcWRbzQC0vgcvn21evPMdKm00UYsncj19L4ReFG\nD+YPNIBwE0uY4nXcsimXqXdTvGv574U1HOpQOXxAUchhLr4EkS0r8TQ3iDMn\nw8TWLivvCKhf4enDbvECGwmlBZ22hoFYspUGdQ7F7siL+RY/yQyFvW+9Y8Dx\n2tPgloTtzrkpkuYwVi0F2qXF10fHQWQCqpwoBYq97/K01Wumm5d+BXSdcmw3\nRdXp\r\n=Bj07\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-announcer.umd.js","unpkg":"dist/vue-announcer.min.js","module":"dist/vue-announcer.esm.js","gitHead":"705f5dbd05d323111ade38f2266888d366f5bee0","scripts":{"dev":"rollup --config rollup.config.dev.js --watch","docs":"vuepress dev docs","test":"cypress run","build":"npm run build:umd & npm run build:es & npm run build:unpkg","release":"standard-version","build:es":"rollup --config rollup.config.prod.js --format es --file dist/vue-announcer.esm.js","build:umd":"rollup --config rollup.config.prod.js --format umd --file dist/vue-announcer.umd.js","test:open":"cypress open","docs:build":"vuepress build docs","build:unpkg":"rollup --config rollup.config.prod.js --format iife --file dist/vue-announcer.min.js","docs:publish":"surge docs/.vuepress/dist https://vue-announcer-v2.surge.sh","projectPublish":"git push --follow-tags origin master && npm publish --access public"},"_npmUser":{"name":"ktquez","email":"ktquez@gmail.com"},"repository":{"url":"git+https://github.com/vue-a11y/vue-announcer.git","type":"git"},"_npmVersion":"6.12.0","description":"A simple way with Vue to announce any information to the screen readers.","directories":{"doc":"docs","test":"tests","example":"example"},"_nodeVersion":"12.13.0","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"vue":"^2.6.11","jest":"^25.1.0","surge":"^0.21.3","eslint":"^6.8.0","rollup":"^1.29.0","cypress":"^4.5.0","chokidar":"^3.3.1","vue-jest":"^3.0.5","vuepress":"^1.3.1","babel-core":"^6.26.3","babel-jest":"^25.1.0","babel-eslint":"^10.0.3","@vue/test-utils":"^1.0.0-beta.31","babel-preset-env":"^1.7.0","standard-version":"^7.1.0","eslint-plugin-vue":"^6.1.2","rollup-plugin-vue":"^5.1.1","eslint-plugin-node":"^11.0.0","jest-serializer-vue":"^2.0.2","jest-transform-stub":"^2.0.0","rollup-plugin-babel":"^3.0.4","rollup-plugin-buble":"^0.19.8","rollup-plugin-serve":"^1.0.1","babel-preset-stage-2":"^6.24.1","eslint-plugin-import":"^2.20.0","rollup-plugin-eslint":"^7.0.0","rollup-plugin-terser":"^5.2.0","eslint-plugin-cypress":"^2.10.3","eslint-plugin-promise":"^4.2.1","rollup-plugin-replace":"^2.0.0","vue-template-compiler":"^2.6.11","eslint-plugin-standard":"^4.0.1","rollup-plugin-commonjs":"^10.1.0","@vuepress/theme-default":"^1.3.1","rollup-plugin-livereload":"^1.0.4","@rollup/plugin-node-resolve":"^7.1.1","@vue/eslint-config-standard":"^5.1.0","eslint-plugin-vuejs-accessibility":"^0.1.1"},"_npmOperationalInternal":{"tmp":"tmp/announcer_2.0.2_1588965935199_0.023595448461440238","host":"s3://npm-registry-packages"}},"2.1.0":{"name":"@vue-a11y/announcer","version":"2.1.0","keywords":["announcer","Vue.js","Vue","accessibility","a11y","screen","readers","Vision","Disability","JAWS","ChromeVox","NVDA"],"author":{"url":"https://medium.com/@ktquez","name":"Alan Ktquez","email":"ktquez@gmail.com"},"license":"MIT","_id":"@vue-a11y/announcer@2.1.0","maintainers":[{"name":"kddeisz","email":"kevin.deisz@gmail.com"},{"name":"ktquez","email":"ktquez@gmail.com"},{"name":"mlama007","email":"marialamardo@outlook.com"}],"homepage":"https://vue-a11y.github.io/vue-announcer/","bugs":{"url":"https://github.com/vue-a11y/vue-announcer/issues"},"dist":{"shasum":"ed725e90b91870c76285840e0aaa637cfafbf27f","tarball":"https://registry.npmjs.org/@vue-a11y/announcer/-/announcer-2.1.0.tgz","fileCount":48,"integrity":"sha512-7V1osiJQxZPBA+2duF2nZugwgbIba/yvKLsHWvGIBJGY0VZhR4vYyFH3VFyFH2Yi46tHEVBN+X+a0uQaJMhCsQ==","signatures":[{"sig":"MEUCIQD1muoB2JxABtsvicP/EdRFq3iUtZWs7cvlWvhcyhBFbAIgKbINBQHD53rZ6ZOfCXyGhj6J1rtzwl/xikKLKsTPkeE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":73970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTaQ9CRA9TVsSAnZWagAARI4P/j2CDmJxSe3G49eYszkZ\noutLpCeLzJyztodg9YklY3GWRSLPUqLRQ7vI/lWHW8usuENeK4PQTkbdFst5\nNbnO3LiZnKBNdwvG9cKJCEm765cR1AqjA9qfLVlnrvdXBWOZC8wcHh3xNHkl\nsN7rydmzIMHb5zq89jsujg3hDYn0ihekAQRsS5MVTzctU4yYwl56bKkLwzBR\nOtHm7hWxVW8ml+paavVBeg9HUH/eTaAi/uB+cS74QepMjbOCNOLccsLrtrqJ\nZyLwOnpeAheEXNK3XE+u4QLK/PQlKP40uq8ghPryU2EsHVDIY62FriYmb3DM\n9F35xliSdv5qznvvE4iEHmLN7/EAMmZe+ZeHy7C1dGdrqYhfXEZyfnPhlchj\nAOR4HAmoyGxzK+bqqxfk0ic2eo3IjNlSZWMYiG3cy78+vnBqSpbVohmjKzvT\nMRWAqh0r+rhjGeTPguMLDVR+wTQ+eJHa/pyxFLTfT6PkCYjBdavxpsZe4cRR\nmDMTyL6CsR/xuLl1DV3ywf53EmjUOqzFiwYd7Q70nD6PsaJI/WCrUSA7oiCA\ngIYxOwUP6upWGIej36PWOzkS4+YCeVgPu9A/zqWxM3Eyq/LtELXncGITxSDi\nhMRc532tK5WclDO5bHZRnevXKQRv1iEw0rB7CdPW500Ps4+U5RTtP1Jzuygb\nO1U9\r\n=YR2U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/vue-announcer.ssr.js","types":"index.d.ts","unpkg":"dist/vue-announcer.min.js","module":"dist/vue-announcer.esm.js","browser":"dist/vue-announcer.esm.js","gitHead":"f34ee91ac69af5cc6564ee3d31078e0b6eaa0426","scripts":{"dev":"rollup --config rollup.config.dev.js --watch","test":"cypress run","build":"npm run build:ssr & npm run build:es & npm run build:unpkg","release":"standard-version","build:es":"rollup --config rollup.config.prod.js --format es --file dist/vue-announcer.esm.js","demo:dev":"cd demo && npm run dev","docs:dev":"vuepress dev docs --no-cache","build:ssr":"rollup --config rollup.config.prod.js --format cjs --file dist/vue-announcer.ssr.js","test:open":"cypress open","demo:build":"cd demo && npm run build","docs:build":"vuepress build docs --no-cache && echo announcer.vue-a11y.com >> docs/.vuepress/dist/CNAME","build:unpkg":"rollup --config rollup.config.prod.js --format iife --file dist/vue-announcer.min.js","demo:publish":"cp ./demo/dist/index.html ./demo/dist/200.html && surge ./demo/dist https://vue-announcer.surge.sh/","docs:publish":"gh-pages -d docs/.vuepress/dist","projectPublish":"git push --follow-tags origin master && npm run build && npm publish --access public"},"_npmUser":{"name":"ktquez","email":"ktquez@gmail.com"},"repository":{"url":"git+https://github.com/vue-a11y/vue-announcer.git","type":"git"},"_npmVersion":"6.12.0","description":"A simple way with Vue to announce any information to the screen readers.","directories":{"doc":"docs","test":"tests","example":"example"},"_nodeVersion":"12.13.0","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{"vue":"^2.6.11","jest":"^25.1.0","eslint":"^6.8.0","rollup":"^2.16.0","cypress":"^4.5.0","chokidar":"^3.3.1","gh-pages":"^3.0.0","vuepress":"^1.5.1","watchpack":"^1.6.1","babel-jest":"^25.1.0","babel-eslint":"^10.0.3","@vue/test-utils":"^1.0.0-beta.31","standard-version":"^8.0.0","eslint-plugin-vue":"^6.1.2","rollup-plugin-vue":"^5.1.1","eslint-plugin-node":"^11.0.0","jest-serializer-vue":"^2.0.2","jest-transform-stub":"^2.0.0","@rollup/plugin-buble":"^0.21.3","eslint-plugin-import":"^2.20.0","rollup-plugin-eslint":"^7.0.0","rollup-plugin-terser":"^6.1.0","eslint-plugin-cypress":"^2.10.3","eslint-plugin-promise":"^4.2.1","vue-template-compiler":"^2.6.11","@rollup/plugin-replace":"^2.3.3","eslint-plugin-standard":"^4.0.1","@rollup/plugin-commonjs":"^13.0.0","@vuepress/theme-default":"^1.3.1","@rollup/plugin-node-resolve":"^7.1.3","@vue/eslint-config-standard":"^5.1.0","vuepress-theme-default-vue-a11y":"^0.1.15","eslint-plugin-vuejs-accessibility":"^0.1.1"},"_npmOperationalInternal":{"tmp":"tmp/announcer_2.1.0_1598923837273_0.14093826088676642","host":"s3://npm-registry-packages"}},"3.0.0-beta.0":{"name":"@vue-a11y/announcer","version":"3.0.0-beta.0","_id":"@vue-a11y/announcer@3.0.0-beta.0","maintainers":[{"name":"ktquez","email":"ktquez@gmail.com"},{"name":"mlama007","email":"marialamardo@outlook.com"},{"name":"kddeisz","email":"kevin.deisz@gmail.com"}],"dist":{"shasum":"02ab9e7885ccff09264569345f2cae3cc7df2269","tarball":"https://registry.npmjs.org/@vue-a11y/announcer/-/announcer-3.0.0-beta.0.tgz","fileCount":9,"integrity":"sha512-F01+Xfh6v7PGfw3Elni3M1IXd9fcJZJEuSOp+HVqa9+/NsjmNDKeEQR0tssYPZCAFq/pBxpSHm4Ogjm+6q6nDw==","signatures":[{"sig":"MEQCIHEwViahNvQ9FL0FVafj25MmpXlIpLwRdIj4vZDj+jv2AiAQM37NUmZ0o/J/QDZebKIUXF6Y0WgLvb4OdIEY7plnqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18112,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBkGuCRA9TVsSAnZWagAA2VcP/j7A8oeKyvKQ/Rw27KrH\nsHG8IYqqyu9RjiIF0TrfiEAlnG5CluCdKW1GPE0QF8dgKZ3txdBbOusVUpfn\nbt1vS1MONt2kuqfybm7Gkyd4JocCvT1kyixtg5XaVYleBj/9VXOt0p4eeuuJ\nNPaUWlqAFVVey5LVWMVI3qrjw/xhUCx71xhtyz2ExHSWkwvMznUBpLouPlWs\nfe7L4Lcf6qIyp2wYneY3iDOCziGqXmyxZ5f2mXZmF3TUOZDhMaXyqnocxgsr\nuiHw4HQb0CnAIbfLj9qdl2xwf+u93/+kmuj5Enx3wEXmiYZLQUAbIin/btDp\nKxqravXaOyKhqlCrQTkp8u2MOFw0jSopSoyKtZBnaxiKsV4UamXlw8G1PKwk\nHAo5PcN0UPl1/se+50Ukye1Lp//CFNSE+TC884ae0SgXliZFsSmM4DUEmYqy\n2gmUW3ro1uqjD/z6Q3OVevFO4v5RychEaY/oBk64DVUEBrXDacs2T4Y9QSra\n5ViV2aZDJuj5fZm8ufhsGpg8RJZXsMrBvDgzIz/NHT1k1bsL/g/HkCBxJRY5\nno32Q/nb1rFVNelXT3x8uS5JKBMOO9RN6knv8YzFKklNhHVLWO3kccrOCkex\nxVwE9KLmfVqfDf0XRDIiwDaCWRsKxCbDp7UxAWSjQvEzna0dDjjoxWA4ZLK0\nKPiV\r\n=Og1e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/announcer.umd.js","types":"dist/types/index.d.ts","unpkg":"dist/announcer.iife.js","module":"dist/announcer.es.js","readme":"# Introduction\r\n\r\nImagine browsing pages (routes), receiving alerts and notifications, having a countdown timer on the page, a progress bar, a loading or a change of route in a SPA. Now imagine all this happening to people who have visual disabilities and who use screen readers. \r\n\r\nThe [@vue-a11y/announcer@next](https://github.com/vue-a11y/vue-announcer/tree/next) (v3.*) for Vue 3 provides an easy way to really tell what’s going on in your application to people using screen readers.\r\n\r\n> For vue-announcer version 2.* you can access [this link](https://github.com/vue-a11y/vue-announcer/tree/master)\r\n\r\n## Setup\r\n\r\n### Installation\r\n\r\n```shell\r\nnpm install -S @vue-a11y/announcer@next\r\n# or\r\nyarn add -D @vue-a11y/announcer@next\r\n```\r\n\r\n### Basic usage\r\n\r\nIn your `main.(js|ts)`\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport router from './router'\r\n\r\nimport VueAnnouncer from '@vue-a11y/announcer'\r\nimport '@vue-a11y/announcer/index.css'\r\n\r\ncreateApp(App)\r\n .use(VueAnnouncer)\r\n .use(router)\r\n .mount('#app')\r\n```\r\n\r\nIn your `App.vue`\r\n\r\n```vue\r\n\r\n```\r\n\r\n## useAnnouncer\r\n\r\nWe provide the Vue composition `useAnnouncer` to announce to a person with a screen reader any information needed, anywhere in your app and in real time.\r\n\r\n```js\r\n// e.g.\r\nconst { assertive } = useAnnouncer()\r\n// or \r\nconst { polite } = useAnnouncer()\r\n```\r\n\r\n### Change routeComplement\r\n\r\nIf you need to set the `routeComplement` option dynamically without reloading the application, for example if you're dynamically loading translations, you can use this method to update it.\r\n\r\n```js\r\n// e.g.\r\nconst { setRouteComplement } = useAnnouncer()\r\nsetRouteComplement(translations.routeComplementKey)\r\n```\r\n\r\n## Announce route changes\r\n\r\nFor page changes (routes) to be announced automatically, you only need to pass the router object as a parameter at the time of installation.\r\n\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport router from './router'\r\nimport VueAnnouncer from '@vue-a11y/announcer'\r\n\r\ncreateApp(App)\r\n .use(VueAnnouncer, { router: true })\r\n .use(router)\r\n .mount('#app')\r\n```\r\n\r\n### Custom announcer (object meta)\r\n\r\nYou can customize the message by defining the announcer on the \"meta\" object for each specific route.\r\n\r\n```js\r\n{\r\n name: 'home',\r\n path: '/',\r\n component: Home,\r\n meta: {\r\n announcer: {\r\n message: 'Página de inicio se'\r\n }\r\n }\r\n}\r\n```\r\n\r\nWhen the page loads, the screen reader user will hear:\r\n\r\n```shell\r\nPágina de inicio se ha cargado.\r\n```\r\n\r\nKey | Data Type | data | default |\r\n------------------ | ---------- | ------------------------- | ----------------------------------- |\r\n`message` | String | | document.title |\r\n`politeness` | String | polite, assertive, off | polite |\r\n`skip` | Boolean | | false |\r\n`routeComplement` | String | | `has loaded` or set at installation |\r\n\r\n#### Note\r\n- The plug-in checks whether the message to be announced has been defined in the meta.announcer object, otherwise the document title to be loaded will be announced.\r\n- The `@vue-a11y/announcer@next` uses the global after hooks `router.afterEach` to announce the route changes.\r\n\r\n### Skip in specific route\r\nNecessary for dynamic content pages that require asynchronous data to compose the page title.\r\n\r\nThe skip property on the `meta.announcer` object is used to `skip` the automatic announcement made on the `router.afterEach`, that way you can announce when the asynchronous data is available.\r\n\r\nFor example:\r\n\r\nIn you [`routes.js`](/demo/src/router/routes.ts)\r\n\r\n```js\r\n// ...\r\n{\r\n name: 'post',\r\n path: '/posts/:id',\r\n component: Post,\r\n meta: {\r\n announcer: {\r\n skip: true\r\n }\r\n }\r\n}\r\n// ...\r\n```\r\n\r\nIn you [`Post.vue`](/demo/src/pages/Post.vue)\r\n\r\n```vue\r\n\r\n\r\n\r\n```\r\n\r\n# Browser Testing\r\n\r\nVue Announcer was tested and works as expected in the latest versions of:\r\n\r\n- NVDA (Chrome) ✔️\r\n- ChromeVox (Chrome extension) ✔️\r\n\r\n## To test\r\n\r\n- Android TalkBack\r\n- JAWS\r\n- iOS VoiceOver (Safari)\r\n\r\n## Contributing\r\n- From typos in documentation to coding new features;\r\n- Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;\r\n- Fork repository, make changes and send a pull request;\r\n\r\nFollow us on Twitter [@vue_a11y](https://twitter.com/vue_a11y)\r\n\r\n**Thank you**\r\n","browser":"dist/announcer.es.js","exports":{".":{"import":"./dist/announcer.es.js","require":"./dist/announcer.umd.js"}},"gitHead":"30fe3d93b9a79ebcb5c70e8390f540386e8596ff","scripts":{"dev":"vite","build":"vuedx-typecheck . && vite build && npm run fixFiles","release":"standard-version","demo:dev":"cd demo && vite","fixFiles":"cp -r src/types dist && cp -a dist/@vue-a11y/. dist && rm -rf dist/@vue-a11y","demo:build":"cd demo && vuedx-typecheck . && vite build","demo:publish":"surge ./demo/dist https://vue-announcer.surge.sh/","project:publish":"git push --tags origin next && npm run build && npm publish --tag beta"},"_npmUser":{"name":"ktquez","email":"ktquez@gmail.com"},"jsdelivr":"dist/announcer.iife.js","_npmVersion":"6.12.0","description":"Imagine browsing pages (routes), receiving alerts and notifications, having a countdown timer on the page, a progress bar, a loading or a change of route in a SPA. Now imagine all this happening to people who have visual disabilities and who use screen re","directories":{},"_nodeVersion":"12.13.0","dependencies":{"vue":"^3.0.5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vite":"^2.0.0-beta.12","typescript":"^4.1.3","vue-router":"^4.0.3","@types/node":"^14.14.21","@vuedx/typecheck":"^0.6.0","standard-version":"^9.1.0","@vue/compiler-sfc":"^3.0.5","@vitejs/plugin-vue":"^1.0.4","@vuedx/typescript-plugin-vue":"^0.4.1"},"_npmOperationalInternal":{"tmp":"tmp/announcer_3.0.0-beta.0_1611022766053_0.5767856636794724","host":"s3://npm-registry-packages"}},"3.0.0-beta.1":{"name":"@vue-a11y/announcer","version":"3.0.0-beta.1","_id":"@vue-a11y/announcer@3.0.0-beta.1","maintainers":[{"name":"ktquez","email":"ktquez@gmail.com"},{"name":"mlama007","email":"marialamardo@outlook.com"},{"name":"kddeisz","email":"kevin.deisz@gmail.com"}],"dist":{"shasum":"b331cebe8c330b3030ef14fedba3dc26db30bb85","tarball":"https://registry.npmjs.org/@vue-a11y/announcer/-/announcer-3.0.0-beta.1.tgz","fileCount":37,"integrity":"sha512-3P9/eF2p59a/r0tAO8rjkeGdaxZU0K/1MKX2eAU4Gb9lAd4jhHIz/JZeBusjzi3vUVHRnGuJJmU8pxmkYjVOhA==","signatures":[{"sig":"MEUCIQC7LgVRUVwqEWQq2Hm5bcoNlfAE9/TyrZJPh7LOYSLDfQIgUOQvcKR/tVo7YYpKK5LNd3QmQcj2lJgMjoUL6LAVO8c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBkbwCRA9TVsSAnZWagAAEtQP/3xKapgM2Z1RRRQGpXP/\nNo4d+z5zkXqGvLpv9N4v9x/XaXpL7eqSDDzw84ZSKuBlJZxelxNiqv9LkFq6\nYYJPA4Soyo74pog822qnnt8GUBAgxO6QWC+booV5Gk2VbqqF7kLyYnV6vUfo\nV3AtVRRuJfbH8vfH0EyjECzHw8YYuDGt4oi7/Nz5lRKX+4MCPUHZmk9EK6/P\nnaLcOuXsKS8W8K1IdiHw/OBWrawSXj+625elzz/d3rCuviH23y+OAgRr1dgP\n2S+1m64zQ5kcbBNfP4dTnPvY4zDSaM79MN3n1qEc6n6MXt/R2/fMiUYVwfrr\n/mgKLXdzZ6vrkIH9YU0gM7zQYSzXGcXvXsHKfVoSI0K7oQGlrpZ7CTAaxQw0\nmv5hUtkvwMMet9xOCEcUJrHRinxqEJ9NM+HhJk8Y5/NPMPb5OO8qWJmVZJzO\n8N+K9dDvvAU8+yJo9QndjUgXeFVtSDJI6nJE9PJk5SjHddA8TxOtojX9FtdY\ndkVS6njrL5FZXC2D5icYHAZ5VyicoYJob0idA9+tuyNz25EOOUnmtyuTC1el\nwUSdZmCdoYkuCe1yLLkqzQ0CS52zZgXPQoyXnF53ZlfZzgqeE9vDeoSjFGZd\nbELljow9AT7DrO9MC2qP5BDddghGUkLnI9W/n5YXVT4YXuZlyvh8Cj3MENgi\noSUT\r\n=1qHl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/announcer.umd.js","types":"dist/index.d.ts","unpkg":"dist/announcer.iife.js","module":"dist/announcer.es.js","readme":"# Introduction\r\n\r\nImagine browsing pages (routes), receiving alerts and notifications, having a countdown timer on the page, a progress bar, a loading or a change of route in a SPA. Now imagine all this happening to people who have visual disabilities and who use screen readers. \r\n\r\nThe [@vue-a11y/announcer@next](https://github.com/vue-a11y/vue-announcer/tree/next) (v3.*) for Vue 3 provides an easy way to really tell what’s going on in your application to people using screen readers.\r\n\r\n> For vue-announcer version 2.* you can access [this link](https://github.com/vue-a11y/vue-announcer/tree/master)\r\n\r\n## Links\r\n- [Demo](https://vue-announcer.surge.sh/)\r\n\r\n## Setup\r\n\r\n### Installation\r\n\r\n```shell\r\nnpm install -S @vue-a11y/announcer@next\r\n# or\r\nyarn add -D @vue-a11y/announcer@next\r\n```\r\n\r\n### Basic usage\r\n\r\nIn your `main.(js|ts)`\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport router from './router'\r\n\r\nimport VueAnnouncer from '@vue-a11y/announcer'\r\nimport '@vue-a11y/announcer/index.css'\r\n\r\ncreateApp(App)\r\n .use(VueAnnouncer)\r\n .use(router)\r\n .mount('#app')\r\n```\r\n\r\nIn your `App.vue`\r\n\r\n```vue\r\n\r\n```\r\n\r\n## useAnnouncer\r\n\r\nWe provide the Vue composition `useAnnouncer` to announce to a person with a screen reader any information needed, anywhere in your app and in real time.\r\n\r\n```js\r\n// e.g.\r\nconst { assertive } = useAnnouncer()\r\n// or \r\nconst { polite } = useAnnouncer()\r\n```\r\n\r\n### Change routeComplement\r\n\r\nIf you need to set the `routeComplement` option dynamically without reloading the application, for example if you're dynamically loading translations, you can use this method to update it.\r\n\r\n```js\r\n// e.g.\r\nconst { setRouteComplement } = useAnnouncer()\r\nsetRouteComplement(translations.routeComplementKey)\r\n```\r\n\r\n## Announce route changes\r\n\r\nFor page changes (routes) to be announced automatically, you only need to pass the router object as a parameter at the time of installation.\r\n\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport router from './router'\r\nimport VueAnnouncer from '@vue-a11y/announcer'\r\n\r\ncreateApp(App)\r\n .use(VueAnnouncer, { router: true })\r\n .use(router)\r\n .mount('#app')\r\n```\r\n\r\n### Custom announcer (object meta)\r\n\r\nYou can customize the message by defining the announcer on the \"meta\" object for each specific route.\r\n\r\n```js\r\n{\r\n name: 'home',\r\n path: '/',\r\n component: Home,\r\n meta: {\r\n announcer: {\r\n message: 'Página de inicio se'\r\n }\r\n }\r\n}\r\n```\r\n\r\nWhen the page loads, the screen reader user will hear:\r\n\r\n```shell\r\nPágina de inicio se ha cargado.\r\n```\r\n\r\nKey | Data Type | data | default |\r\n------------------ | ---------- | ------------------------- | ----------------------------------- |\r\n`message` | String | | document.title |\r\n`politeness` | String | polite, assertive, off | polite |\r\n`skip` | Boolean | | false |\r\n`routeComplement` | String | | `has loaded` or set at installation |\r\n\r\n#### Note\r\n- The plug-in checks whether the message to be announced has been defined in the meta.announcer object, otherwise the document title to be loaded will be announced.\r\n- The `@vue-a11y/announcer@next` uses the global after hooks `router.afterEach` to announce the route changes.\r\n\r\n### Skip in specific route\r\nNecessary for dynamic content pages that require asynchronous data to compose the page title.\r\n\r\nThe skip property on the `meta.announcer` object is used to `skip` the automatic announcement made on the `router.afterEach`, that way you can announce when the asynchronous data is available.\r\n\r\nFor example:\r\n\r\nIn you [`routes.js`](/demo/src/router/routes.ts)\r\n\r\n```js\r\n// ...\r\n{\r\n name: 'post',\r\n path: '/posts/:id',\r\n component: Post,\r\n meta: {\r\n announcer: {\r\n skip: true\r\n }\r\n }\r\n}\r\n// ...\r\n```\r\n\r\nIn you [`Post.vue`](/demo/src/pages/Post.vue)\r\n\r\n```vue\r\n\r\n\r\n\r\n```\r\n\r\n# Browser Testing\r\n\r\nVue Announcer was tested and works as expected in the latest versions of:\r\n\r\n- NVDA (Chrome) ✔️\r\n- ChromeVox (Chrome extension) ✔️\r\n\r\n## To test\r\n\r\n- Android TalkBack\r\n- JAWS\r\n- iOS VoiceOver (Safari)\r\n\r\n## Contributing\r\n- From typos in documentation to coding new features;\r\n- Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;\r\n- Fork repository, make changes and send a pull request;\r\n\r\nFollow us on Twitter [@vue_a11y](https://twitter.com/vue_a11y)\r\n\r\n**Thank you**\r\n","browser":"dist/announcer.es.js","exports":{".":{"import":"./dist/announcer.es.js","require":"./dist/announcer.umd.js"}},"gitHead":"e79ad718a249551f1373569aba3ca4f3f2f94869","scripts":{"dev":"vite","build":"vuedx-typecheck . && vite build && npm run fixFiles","release":"standard-version","demo:dev":"cd demo && vite","fixFiles":"cp -a src/types/. dist && cp -a dist/@vue-a11y/. dist && rm -rf dist/@vue-a11y","demo:build":"cd demo && vuedx-typecheck . && vite build","demo:publish":"surge ./demo/dist https://vue-announcer.surge.sh/","project:publish":"git push --tags origin next && npm run build && npm publish --tag beta"},"_npmUser":{"name":"ktquez","email":"ktquez@gmail.com"},"jsdelivr":"dist/announcer.iife.js","_npmVersion":"6.12.0","description":"Imagine browsing pages (routes), receiving alerts and notifications, having a countdown timer on the page, a progress bar, a loading or a change of route in a SPA. Now imagine all this happening to people who have visual disabilities and who use screen re","directories":{},"_nodeVersion":"12.13.0","dependencies":{"vue":"^3.0.5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vite":"^2.0.0-beta.12","typescript":"^4.1.3","vue-router":"^4.0.3","@types/node":"^14.14.21","@vuedx/typecheck":"^0.6.0","standard-version":"^9.1.0","@vue/compiler-sfc":"^3.0.5","@vitejs/plugin-vue":"^1.0.4","@vuedx/typescript-plugin-vue":"^0.4.1"},"_npmOperationalInternal":{"tmp":"tmp/announcer_3.0.0-beta.1_1611024111807_0.3015967545343272","host":"s3://npm-registry-packages"}},"3.0.0-beta.2":{"name":"@vue-a11y/announcer","version":"3.0.0-beta.2","_id":"@vue-a11y/announcer@3.0.0-beta.2","maintainers":[{"name":"ktquez","email":"ktquez@gmail.com"},{"name":"mlama007","email":"marialamardo@outlook.com"},{"name":"kddeisz","email":"kevin.deisz@gmail.com"}],"dist":{"shasum":"4036166ae07d93cb623ef6724c442226666b238f","tarball":"https://registry.npmjs.org/@vue-a11y/announcer/-/announcer-3.0.0-beta.2.tgz","fileCount":38,"integrity":"sha512-DywNPtoTxPgVeTyy1t7Re69Fea4HJB/50m9qaSkBlOASGxVywbjelNoAtnxb7fiB2gChMb0CHRapWeC70o84Uw==","signatures":[{"sig":"MEUCIEwzK+4xsvQylqM/UMxq49CQjRwWfT7aXCVqo72xlmJGAiEAyMbOaRSshMHOjNvE4pypylQ7K6IXbDbLqCLwnSrwhiM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":129864,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBlGICRA9TVsSAnZWagAAjIsP/AzZtBYSwRA+zayl902n\ntmsv09dw86qdV09G2DKR/dLvMBErFsJZPHa1kjfGonoPzn9DQ8ag+aOUFoQd\nqtenIL8gfsPj3b5iOb2WcwUvoYGM6ddaYLynNQEJQeOX2yvNhdEYH918Ho2g\nod72BzPopRFHJVRvQaFNl5ZMN3It/2NKWUh3M6UuFld+ngrj27ypQUc7Or7z\njcYJ9Q4dZzl17Xg1Sz1gNmnIZ3ZOQAIGRFwIdzcrIqHXGaGrVv1ZRLSMPrya\n0OhMsTo6P7tEzOL3VitqZ0/GFdICODXN6t/z2neVH88k79KwVT44dm+TN06B\nDAuA3zfUc6MS94wEvG0UNL8ZhRNGcm1DCz46aBo7mb2w327EFkSP5G3y/HZA\nA4Oeq36gN4qauO1gm4PQz/lK0Mud7uCW2tzctQrtMzanuCWcbc2qXcvrdt2h\n1eT+HtSow957yFaLu/t1g0Vo7SoK2CefVYF4SSsYsHfAemLOFPTBLOSYQLFq\n2uqyw5EJFGji6XONJUdbem6hysg9DY+IVlwRyK7D2IrF6SjGYlHfAKUcZVAB\nN3nEq6WAuAWncCAc5dFHWohSD9N0PMd50yuLUzw7NJ9CXQOurHRTcxumG6j0\nd4xTvUzpzhL/DLAZDEDakH8Q03hv8Vdvf2mXCChncTm5UDwn91y1llKcO2wW\nGmKr\r\n=m//8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/announcer.umd.js","types":"dist/index.d.ts","unpkg":"dist/announcer.iife.js","module":"dist/announcer.es.js","readme":"# Introduction\r\n\r\nImagine browsing pages (routes), receiving alerts and notifications, having a countdown timer on the page, a progress bar, a loading or a change of route in a SPA. Now imagine all this happening to people who have visual disabilities and who use screen readers. \r\n\r\nThe [@vue-a11y/announcer@next](https://github.com/vue-a11y/vue-announcer/tree/next) (v3.*) for Vue 3 provides an easy way to really tell what’s going on in your application to people using screen readers.\r\n\r\n> For vue-announcer version 2.* you can access [this link](https://github.com/vue-a11y/vue-announcer/tree/master)\r\n\r\n## Links\r\n- [Demo](https://vue-announcer.surge.sh/)\r\n\r\n## Setup\r\n\r\n### Installation\r\n\r\n```shell\r\nnpm install -S @vue-a11y/announcer@next\r\n# or\r\nyarn add -D @vue-a11y/announcer@next\r\n```\r\n\r\n### Basic usage\r\n\r\nIn your `main.(js|ts)`\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport router from './router'\r\n\r\nimport VueAnnouncer from '@vue-a11y/announcer'\r\nimport '@vue-a11y/announcer/index.css'\r\n\r\ncreateApp(App)\r\n .use(VueAnnouncer)\r\n .use(router)\r\n .mount('#app')\r\n```\r\n\r\nIn your `App.vue`\r\n\r\n```vue\r\n\r\n```\r\n\r\n## useAnnouncer\r\n\r\nWe provide the Vue composition `useAnnouncer` to announce to a person with a screen reader any information needed, anywhere in your app and in real time.\r\n\r\n```js\r\n// e.g.\r\nconst { assertive } = useAnnouncer()\r\n// or \r\nconst { polite } = useAnnouncer()\r\n```\r\n\r\n### Change routeComplement\r\n\r\nIf you need to set the `routeComplement` option dynamically without reloading the application, for example if you're dynamically loading translations, you can use this method to update it.\r\n\r\n```js\r\n// e.g.\r\nconst { setRouteComplement } = useAnnouncer()\r\nsetRouteComplement(translations.routeComplementKey)\r\n```\r\n\r\n## Announce route changes\r\n\r\nFor page changes (routes) to be announced automatically, you only need to pass the router object as a parameter at the time of installation.\r\n\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport router from './router'\r\nimport VueAnnouncer from '@vue-a11y/announcer'\r\n\r\ncreateApp(App)\r\n .use(VueAnnouncer, { router: true })\r\n .use(router)\r\n .mount('#app')\r\n```\r\n\r\n### Custom announcer (object meta)\r\n\r\nYou can customize the message by defining the announcer on the \"meta\" object for each specific route.\r\n\r\n```js\r\n{\r\n name: 'home',\r\n path: '/',\r\n component: Home,\r\n meta: {\r\n announcer: {\r\n message: 'Página de inicio se'\r\n }\r\n }\r\n}\r\n```\r\n\r\nWhen the page loads, the screen reader user will hear:\r\n\r\n```shell\r\nPágina de inicio se ha cargado.\r\n```\r\n\r\nKey | Data Type | data | default |\r\n------------------ | ---------- | ------------------------- | ----------------------------------- |\r\n`message` | String | | document.title |\r\n`politeness` | String | polite, assertive, off | polite |\r\n`skip` | Boolean | | false |\r\n`routeComplement` | String | | `has loaded` or set at installation |\r\n\r\n#### Note\r\n- The plug-in checks whether the message to be announced has been defined in the meta.announcer object, otherwise the document title to be loaded will be announced.\r\n- The `@vue-a11y/announcer@next` uses the global after hooks `router.afterEach` to announce the route changes.\r\n\r\n### Skip in specific route\r\nNecessary for dynamic content pages that require asynchronous data to compose the page title.\r\n\r\nThe skip property on the `meta.announcer` object is used to `skip` the automatic announcement made on the `router.afterEach`, that way you can announce when the asynchronous data is available.\r\n\r\nFor example:\r\n\r\nIn you [`routes.js`](/demo/src/router/routes.ts)\r\n\r\n```js\r\n// ...\r\n{\r\n name: 'post',\r\n path: '/posts/:id',\r\n component: Post,\r\n meta: {\r\n announcer: {\r\n skip: true\r\n }\r\n }\r\n}\r\n// ...\r\n```\r\n\r\nIn you [`Post.vue`](/demo/src/pages/Post.vue)\r\n\r\n```vue\r\n\r\n\r\n\r\n```\r\n\r\n# Browser Testing\r\n\r\nVue Announcer was tested and works as expected in the latest versions of:\r\n\r\n- NVDA (Chrome) ✔️\r\n- ChromeVox (Chrome extension) ✔️\r\n\r\n## To test\r\n\r\n- Android TalkBack\r\n- JAWS\r\n- iOS VoiceOver (Safari)\r\n\r\n## Contributing\r\n- From typos in documentation to coding new features;\r\n- Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;\r\n- Fork repository, make changes and send a pull request;\r\n\r\nFollow us on Twitter [@vue_a11y](https://twitter.com/vue_a11y)\r\n\r\n**Thank you**\r\n","browser":"dist/announcer.es.js","exports":{".":{"import":"./dist/announcer.es.js","require":"./dist/announcer.umd.js"}},"gitHead":"da78fcdc6656f7c0b77bafcbdeb05ee16bbe6fe0","scripts":{"dev":"vite","build":"vuedx-typecheck . && vite build && npm run fixFiles","release":"standard-version","demo:dev":"cd demo && vite","fixFiles":"cp -a src/types/. dist && cp -a dist/@vue-a11y/. dist && rm -rf dist/@vue-a11y","demo:build":"cd demo && vuedx-typecheck . && vite build","demo:publish":"surge ./demo/dist https://vue-announcer.surge.sh/","project:publish":"git push --tags origin next && npm run build && npm publish --tag beta"},"_npmUser":{"name":"ktquez","email":"ktquez@gmail.com"},"jsdelivr":"dist/announcer.iife.js","_npmVersion":"6.12.0","description":"Imagine browsing pages (routes), receiving alerts and notifications, having a countdown timer on the page, a progress bar, a loading or a change of route in a SPA. Now imagine all this happening to people who have visual disabilities and who use screen re","directories":{},"_nodeVersion":"12.13.0","dependencies":{"vue":"^3.0.5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vite":"^2.0.0-beta.12","typescript":"^4.1.3","vue-router":"^4.0.3","@types/node":"^14.14.21","@vuedx/typecheck":"^0.6.0","standard-version":"^9.1.0","@vue/compiler-sfc":"^3.0.5","@vitejs/plugin-vue":"^1.0.4","@vuedx/typescript-plugin-vue":"^0.4.1"},"_npmOperationalInternal":{"tmp":"tmp/announcer_3.0.0-beta.2_1611026823555_0.7358482339916443","host":"s3://npm-registry-packages"}},"3.0.0-beta.3":{"name":"@vue-a11y/announcer","version":"3.0.0-beta.3","_id":"@vue-a11y/announcer@3.0.0-beta.3","maintainers":[{"name":"ktquez","email":"ktquez@gmail.com"},{"name":"mlama007","email":"marialamardo@outlook.com"},{"name":"kddeisz","email":"kevin.deisz@gmail.com"}],"dist":{"shasum":"3b3e9daa78b7128b3df22311d2c5afd40e41c364","tarball":"https://registry.npmjs.org/@vue-a11y/announcer/-/announcer-3.0.0-beta.3.tgz","fileCount":38,"integrity":"sha512-jXE7Ys5FkYauDkl46ac4MJxamDI6FFWALEII7kZ/SyloMdOE4SZw2VRqtNAmPn+thpWcEz6jUqLq9DO5ihGFeg==","signatures":[{"sig":"MEUCIFUXqEGXbbiest6DUNckkiMBNr0C9L98bpi9L9y21vW4AiEA8WIGt79gsILWhjIIHrLZFCWmhhP1tBIZYGcCdeLYauc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":129987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBljqCRA9TVsSAnZWagAAnWAP/3dQVAaPaSIOsh8+bLvz\nISd0CrdtaxmoO5+kLE5uwcvbG93udGSfELZa4JUsfldX3jSIwWJ0SdkORb4B\n199h7Z3CXAfbGP4SsJVwcUPo/q+cijP1XWjOOXa7hRh5XqyhQndycn8xEcHu\nOD+Wg+OZ04XQDA1WQkQ0vcqV38EdgrQgqCXn5W6nBD4kf07jN3KG23WOJeW6\n+z8bmJ/zT/ULorJSO/JgL9Ekf3FKowUZKK+CwbY817X0FVzRmLnT6p7RuE0W\nCTRiNaBpHwExGcZ2XLgg7d5gScmKpIt+aFGje6k7R2YsBV4K5oMVBoaRM2i4\nJIg9Zg5mUdn/jFx7LP8Ie/gI+7uruJdlWx3OUc1Oec31OSfzl5uhpV8fdcRD\nIL4McwJkWZRwyofpsUWuIjV5yVuWof0vSEhqEmCLAmFY4qA3qi2A2m7wXvL1\nJR6VVhdcmlHJ9gbs5JSnYLMTUMvhpz/Q2vkJu2VHMJzQPTYhBVD/+lmeD1O/\nC1YoBEVVwkpIo2MXsn5DEGHG8Ml1A8GLi8bRuyi1aPemodCJhUUpWxnUf+FP\nzPTdkdDObNZ2JGlpvvLVw8NMJwdfDJTDBpnIJqYyeP218KJsfAdkA+dUkHZ4\nHAntfQ9CjBvHnlTu0AIGcVUvveCDTbqfn7zpw3kts0DRug6hLyLKtWBVg7bf\nCDmf\r\n=BSXx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/announcer.umd.js","types":"dist/index.d.ts","unpkg":"dist/announcer.iife.js","module":"dist/announcer.es.js","readme":"# Introduction\r\n\r\nImagine browsing pages (routes), receiving alerts and notifications, having a countdown timer on the page, a progress bar, a loading or a change of route in a SPA. Now imagine all this happening to people who have visual disabilities and who use screen readers. \r\n\r\nThe [@vue-a11y/announcer@next](https://github.com/vue-a11y/vue-announcer/tree/next) (v3.*) for Vue 3 provides an easy way to really tell what’s going on in your application to people using screen readers.\r\n\r\n> For vue-announcer version 2.* you can access [this link](https://github.com/vue-a11y/vue-announcer/tree/master)\r\n\r\n## Links\r\n- [Demo](https://vue-announcer.surge.sh/)\r\n\r\n## Setup\r\n\r\n### Installation\r\n\r\n```shell\r\nnpm install -S @vue-a11y/announcer@next\r\n# or\r\nyarn add -D @vue-a11y/announcer@next\r\n```\r\n\r\n### Basic usage\r\n\r\nIn your `main.(js|ts)`\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport router from './router'\r\n\r\nimport VueAnnouncer from '@vue-a11y/announcer'\r\nimport '@vue-a11y/announcer/index.css'\r\n\r\ncreateApp(App)\r\n .use(VueAnnouncer)\r\n .use(router)\r\n .mount('#app')\r\n```\r\n\r\nIn your `App.vue`\r\n\r\n```vue\r\n\r\n```\r\n\r\n## useAnnouncer\r\n\r\nWe provide the Vue composition `useAnnouncer` to announce to a person with a screen reader any information needed, anywhere in your app and in real time.\r\n\r\n```js\r\n// e.g.\r\nconst { assertive } = useAnnouncer()\r\n// or \r\nconst { polite } = useAnnouncer()\r\n```\r\n\r\n### Change routeComplement\r\n\r\nIf you need to set the `routeComplement` option dynamically without reloading the application, for example if you're dynamically loading translations, you can use this method to update it.\r\n\r\n```js\r\n// e.g.\r\nconst { setRouteComplement } = useAnnouncer()\r\nsetRouteComplement(translations.routeComplementKey)\r\n```\r\n\r\n## Announce route changes\r\n\r\nFor page changes (routes) to be announced automatically, you only need to pass the router object as a parameter at the time of installation.\r\n\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport router from './router'\r\nimport VueAnnouncer from '@vue-a11y/announcer'\r\n\r\ncreateApp(App)\r\n .use(VueAnnouncer, { router: true })\r\n .use(router)\r\n .mount('#app')\r\n```\r\n\r\n### Custom announcer (object meta)\r\n\r\nYou can customize the message by defining the announcer on the \"meta\" object for each specific route.\r\n\r\n```js\r\n{\r\n name: 'home',\r\n path: '/',\r\n component: Home,\r\n meta: {\r\n announcer: {\r\n message: 'Página de inicio se'\r\n }\r\n }\r\n}\r\n```\r\n\r\nWhen the page loads, the screen reader user will hear:\r\n\r\n```shell\r\nPágina de inicio se ha cargado.\r\n```\r\n\r\nKey | Data Type | data | default |\r\n------------------ | ---------- | ------------------------- | ----------------------------------- |\r\n`message` | String | | document.title |\r\n`politeness` | String | polite, assertive, off | polite |\r\n`skip` | Boolean | | false |\r\n`routeComplement` | String | | `has loaded` or set at installation |\r\n\r\n#### Note\r\n- The plug-in checks whether the message to be announced has been defined in the meta.announcer object, otherwise the document title to be loaded will be announced.\r\n- The `@vue-a11y/announcer@next` uses the global after hooks `router.afterEach` to announce the route changes.\r\n\r\n### Skip in specific route\r\nNecessary for dynamic content pages that require asynchronous data to compose the page title.\r\n\r\nThe skip property on the `meta.announcer` object is used to `skip` the automatic announcement made on the `router.afterEach`, that way you can announce when the asynchronous data is available.\r\n\r\nFor example:\r\n\r\nIn you [`routes.js`](/demo/src/router/routes.ts)\r\n\r\n```js\r\n// ...\r\n{\r\n name: 'post',\r\n path: '/posts/:id',\r\n component: Post,\r\n meta: {\r\n announcer: {\r\n skip: true\r\n }\r\n }\r\n}\r\n// ...\r\n```\r\n\r\nIn you [`Post.vue`](/demo/src/pages/Post.vue)\r\n\r\n```vue\r\n\r\n\r\n\r\n```\r\n\r\n# Browser Testing\r\n\r\nVue Announcer was tested and works as expected in the latest versions of:\r\n\r\n- NVDA (Chrome) ✔️\r\n- ChromeVox (Chrome extension) ✔️\r\n\r\n## To test\r\n\r\n- Android TalkBack\r\n- JAWS\r\n- iOS VoiceOver (Safari)\r\n\r\n## Contributing\r\n- From typos in documentation to coding new features;\r\n- Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;\r\n- Fork repository, make changes and send a pull request;\r\n\r\nFollow us on Twitter [@vue_a11y](https://twitter.com/vue_a11y)\r\n\r\n**Thank you**\r\n","browser":"dist/announcer.es.js","exports":{".":{"import":"./dist/announcer.es.js","require":"./dist/announcer.umd.js"}},"gitHead":"1a09a12723203739dee775ead021b463f93d87a8","scripts":{"dev":"vite","build":"vuedx-typecheck . && vite build && npm run fixFiles","release":"standard-version","demo:dev":"cd demo && vite","fixFiles":"cp -a src/types/. dist && cp -a dist/@vue-a11y/. dist && rm -rf dist/@vue-a11y","demo:build":"cd demo && vuedx-typecheck . && vite build","demo:publish":"surge ./demo/dist https://vue-announcer.surge.sh/","project:publish":"git push --tags origin next && npm run build && npm publish --tag beta"},"_npmUser":{"name":"ktquez","email":"ktquez@gmail.com"},"jsdelivr":"dist/announcer.iife.js","_npmVersion":"6.12.0","description":"Imagine browsing pages (routes), receiving alerts and notifications, having a countdown timer on the page, a progress bar, a loading or a change of route in a SPA. Now imagine all this happening to people who have visual disabilities and who use screen re","directories":{},"_nodeVersion":"12.13.0","dependencies":{"vue":"^3.0.5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vite":"^2.0.0-beta.12","typescript":"^4.1.3","vue-router":"^4.0.3","@types/node":"^14.14.21","@vuedx/typecheck":"^0.6.0","standard-version":"^9.1.0","@vue/compiler-sfc":"^3.0.5","@vitejs/plugin-vue":"^1.0.4","@vuedx/typescript-plugin-vue":"^0.4.1"},"_npmOperationalInternal":{"tmp":"tmp/announcer_3.0.0-beta.3_1611028713593_0.3443715929181117","host":"s3://npm-registry-packages"}},"3.0.1":{"name":"@vue-a11y/announcer","version":"3.0.1","_id":"@vue-a11y/announcer@3.0.1","maintainers":[{"name":"ktquez","email":"ktquez@gmail.com"},{"name":"mlama007","email":"marialamardo@outlook.com"},{"name":"kddeisz","email":"kevin.deisz@gmail.com"}],"dist":{"shasum":"4ffd28a7d2970d76cbac774af0b4f9b05bc6c87c","tarball":"https://registry.npmjs.org/@vue-a11y/announcer/-/announcer-3.0.1.tgz","fileCount":38,"integrity":"sha512-k+W/VpyuEmaAZ2dm8FPJTW1IBSgj8nDNS1+mmlsMELci8C1soaKCMpimJQTsX2+Sk+aIO1917A7y29a9QOSK2w==","signatures":[{"sig":"MEUCIQC7qKOYuWoU4brf24z6S+MeNQSO5XS3Ehw/nI1z7OhbGQIgM9vWeHHQsPWQEu8hORXC9pOOCW+81MZtgFzAVn1zUfk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBlpCCRA9TVsSAnZWagAA+uoP/08kJC2Zl5NRyw2c+BIS\nOrTET7Ai5X+s3qCxy8CPgRnZxfhS8BtFSGoz64xnrGh+5iOmmVACjJ6NvcVh\npNc8Aqhmmkt0/K8uYnPaL8yAkJ7iGjmkBi5R74mq9ki8SsqsOMQJmXZGHhPy\nvkByRXHBwkwLcJj+ymauu6Cd9XQmXqUY5shf77ijgYppWYMYdT2en1bUMauy\nKYqpctrFAwyynX47BGmOt7CXuwBN0kUBt3KMqTolnfFps9de2EFmk3nVYbHE\nHAyaiy01c8eAVd+sDrA0lOBzOAdIGhYhCIRFld53LErj/MSdJHXH0qrtEhwF\nnKPVJStBNfJK0+BxvzRBA/F/aKqJM4OzNO/i2yr/ivQS00h7xovDA2s9JL1j\n13E4j6toVXt+qPAClPOKqLXiWBKGD2PeZPcoFSlyemwAkM64YTI8P4kVq+I/\n1197ZpSojZKpZOcCdwCvH73YhXnwmzKXRwfuFojaTbbyuCHdFzZyg+WbLReq\n1gEA/8RIOndqqWUOEve59lKiKiJDDEIxv9A/DKUgaH7XOd3OY8szTG1Y9cAn\n9IFfFvnP12WfPDHLKKQPh9q6vqN5itC3OEBctM13bdLklnVmvTF5y74agt2w\nn2LKeRNC4b9c+65iezc13kQvBQ7tCTJmvKpmZK6uWmsHsLZPp3HjfE2GjEli\nC/Eg\r\n=vQil\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/announcer.cjs.js","types":"dist/index.d.ts","unpkg":"dist/announcer.iife.js","module":"dist/announcer.es.js","readme":"# Introduction\r\n\r\nImagine browsing pages (routes), receiving alerts and notifications, having a countdown timer on the page, a progress bar, a loading or a change of route in a SPA. Now imagine all this happening to people who have visual disabilities and who use screen readers. \r\n\r\nThe [@vue-a11y/announcer@next](https://github.com/vue-a11y/vue-announcer/tree/next) (v3.*) for Vue 3 provides an easy way to really tell what’s going on in your application to people using screen readers.\r\n\r\n> For vue-announcer version 2.* you can access [this link](https://github.com/vue-a11y/vue-announcer/tree/master)\r\n\r\n## Links\r\n- [Demo](https://vue-announcer.surge.sh/)\r\n\r\n## Setup\r\n\r\n### Installation\r\n\r\n```shell\r\nnpm install -S @vue-a11y/announcer@next\r\n# or\r\nyarn add -D @vue-a11y/announcer@next\r\n```\r\n\r\n### Basic usage\r\n\r\nIn your `main.(js|ts)`\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport router from './router'\r\n\r\nimport VueAnnouncer from '@vue-a11y/announcer'\r\nimport '@vue-a11y/announcer/index.css'\r\n\r\ncreateApp(App)\r\n .use(VueAnnouncer)\r\n .use(router)\r\n .mount('#app')\r\n```\r\n\r\nIn your `App.vue`\r\n\r\n```vue\r\n\r\n```\r\n\r\n## useAnnouncer\r\n\r\nWe provide the Vue composition `useAnnouncer` to announce to a person with a screen reader any information needed, anywhere in your app and in real time.\r\n\r\n```js\r\n// e.g.\r\nconst { assertive } = useAnnouncer()\r\n// or \r\nconst { polite } = useAnnouncer()\r\n```\r\n\r\n### Change routeComplement\r\n\r\nIf you need to set the `routeComplement` option dynamically without reloading the application, for example if you're dynamically loading translations, you can use this method to update it.\r\n\r\n```js\r\n// e.g.\r\nconst { setRouteComplement } = useAnnouncer()\r\nsetRouteComplement(translations.routeComplementKey)\r\n```\r\n\r\n## Announce route changes\r\n\r\nFor page changes (routes) to be announced automatically, you only need to pass the router object as a parameter at the time of installation.\r\n\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport router from './router'\r\nimport VueAnnouncer from '@vue-a11y/announcer'\r\n\r\ncreateApp(App)\r\n .use(VueAnnouncer, { router: true })\r\n .use(router)\r\n .mount('#app')\r\n```\r\n\r\n### Custom announcer (object meta)\r\n\r\nYou can customize the message by defining the announcer on the \"meta\" object for each specific route.\r\n\r\n```js\r\n{\r\n name: 'home',\r\n path: '/',\r\n component: Home,\r\n meta: {\r\n announcer: {\r\n message: 'Página de inicio se'\r\n }\r\n }\r\n}\r\n```\r\n\r\nWhen the page loads, the screen reader user will hear:\r\n\r\n```shell\r\nPágina de inicio se ha cargado.\r\n```\r\n\r\nKey | Data Type | data | default |\r\n------------------ | ---------- | ------------------------- | ----------------------------------- |\r\n`message` | String | | document.title |\r\n`politeness` | String | polite, assertive, off | polite |\r\n`skip` | Boolean | | false |\r\n`routeComplement` | String | | `has loaded` or set at installation |\r\n\r\n#### Note\r\n- The plug-in checks whether the message to be announced has been defined in the meta.announcer object, otherwise the document title to be loaded will be announced.\r\n- The `@vue-a11y/announcer@next` uses the global after hooks `router.afterEach` to announce the route changes.\r\n\r\n### Skip in specific route\r\nNecessary for dynamic content pages that require asynchronous data to compose the page title.\r\n\r\nThe skip property on the `meta.announcer` object is used to `skip` the automatic announcement made on the `router.afterEach`, that way you can announce when the asynchronous data is available.\r\n\r\nFor example:\r\n\r\nIn you [`routes.js`](/demo/src/router/routes.ts)\r\n\r\n```js\r\n// ...\r\n{\r\n name: 'post',\r\n path: '/posts/:id',\r\n component: Post,\r\n meta: {\r\n announcer: {\r\n skip: true\r\n }\r\n }\r\n}\r\n// ...\r\n```\r\n\r\nIn you [`Post.vue`](/demo/src/pages/Post.vue)\r\n\r\n```vue\r\n\r\n\r\n\r\n```\r\n\r\n# Browser Testing\r\n\r\nVue Announcer was tested and works as expected in the latest versions of:\r\n\r\n- NVDA (Chrome) ✔️\r\n- ChromeVox (Chrome extension) ✔️\r\n\r\n## To test\r\n\r\n- Android TalkBack\r\n- JAWS\r\n- iOS VoiceOver (Safari)\r\n\r\n## Contributing\r\n- From typos in documentation to coding new features;\r\n- Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;\r\n- Fork repository, make changes and send a pull request;\r\n\r\nFollow us on Twitter [@vue_a11y](https://twitter.com/vue_a11y)\r\n\r\n**Thank you**\r\n","browser":"dist/announcer.es.js","exports":{".":{"import":"./dist/announcer.es.js","require":"./dist/announcer.cjs.js"}},"gitHead":"50a5ba0bab38167c913a1843e2ca745dd40fdcb4","scripts":{"dev":"vite","build":"vuedx-typecheck . && vite build && npm run fixFiles","release":"standard-version","demo:dev":"cd demo && vite","fixFiles":"cp -a src/types/. dist && cp -a dist/@vue-a11y/. dist && rm -rf dist/@vue-a11y","demo:build":"cd demo && vuedx-typecheck . && vite build","demo:publish":"surge ./demo/dist https://vue-announcer.surge.sh/","project:publish":"git push --tags origin next && npm run build && npm publish --tag next"},"_npmUser":{"name":"ktquez","email":"ktquez@gmail.com"},"jsdelivr":"dist/announcer.iife.js","_npmVersion":"6.12.0","description":"Imagine browsing pages (routes), receiving alerts and notifications, having a countdown timer on the page, a progress bar, a loading or a change of route in a SPA. Now imagine all this happening to people who have visual disabilities and who use screen re","directories":{},"_nodeVersion":"12.13.0","dependencies":{"vue":"^3.0.5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vite":"^2.0.0-beta.12","typescript":"^4.1.3","vue-router":"^4.0.3","@types/node":"^14.14.21","@vuedx/typecheck":"^0.6.0","standard-version":"^9.1.0","@vue/compiler-sfc":"^3.0.5","@vitejs/plugin-vue":"^1.0.4","@vuedx/typescript-plugin-vue":"^0.4.1"},"_npmOperationalInternal":{"tmp":"tmp/announcer_3.0.1_1611029058483_0.14958658248052736","host":"s3://npm-registry-packages"}},"3.0.2":{"name":"@vue-a11y/announcer","version":"3.0.2","_id":"@vue-a11y/announcer@3.0.2","maintainers":[{"name":"ktquez","email":"ktquez@gmail.com"},{"name":"mlama007","email":"marialamardo@outlook.com"},{"name":"kddeisz","email":"kevin.deisz@gmail.com"}],"dist":{"shasum":"bfe12f18efb05472e752dd5c1bb4889b632ef81e","tarball":"https://registry.npmjs.org/@vue-a11y/announcer/-/announcer-3.0.2.tgz","fileCount":9,"integrity":"sha512-nT2kJEkq+F3rESShjVExHdx/HQuV6UuRa0Zig6go4gfgz+bA5yk3UyvfmspISDrvBm54GVCPaDtEs/y9GR0hRQ==","signatures":[{"sig":"MEQCIGI2oPTSysItUc6ePzPSRWI/lM1mWEK4jpVgTzqoZqkKAiB+9q4T6Xx99/peWA2Ux+yNi3ldPaHaltoBEplLp8luxQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18529,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBlswCRA9TVsSAnZWagAAi8wP+waCq+TE8w+UQx1HEXZ2\nQX77gs9Ycft+QmFartewVEh2USRmaHFSDoQmnm/Pk4j75F0qfqb0hmu75rz1\nw0cSXJ26tc8AstFhG8S3LwO9dh1kvOQCoiffgJcQwrsIUoUgyykv1aA0qo43\nPlMKCTH121f7TfHhj38qpasDmDv7dzE4BvxFNpTqRYX0c8KGC2Nu469ydn1U\nUN5Lq5rPtqWDcA8G9KtHqCIBbCpXDjGno5NfzL2KiG1KWvbT7uOIgBNXf2O3\nuqmPThTuzV1SUFDdvZT1lb7su0ir2V9SohxaWUEMmtP/DZRQaRBmp5uY+vlO\nhZxgysUOi0BWVXIEkOry0H69VCKx5RWEwy1MC5wg2W9EwMiXS0Z/g3LqRa7K\n54TFzWmYTXeGleiO2FXffv5Qg5mgfthT/erqXaPz3Js0eV5OvCB8U+98bJoP\nTTLlCJ9jziAvQVOV5Q9+pvYgdbiGtbjojG6eRDihptdEZipKhJDfisJRQh62\nhuiZdZgmbKMI80KmuD/ajsfIrMOeZWWUWu2v9Zi1UpkhlypTMPHdXVAr6yKH\nnA0x1PjYmFJNjqac+cKw6HJDGJIQ3SVWB5MbI3GfVaEF/F7wj69GsTIy2bs3\n1yUwoMi4pRIr6u7Yx0jvG3qDFsOGNlQLpGrbYjKUTSc2UaHwbxdFPt7jXMBK\nHo72\r\n=8j4F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/announcer.cjs.js","types":"dist/index.d.ts","unpkg":"dist/announcer.iife.js","module":"dist/announcer.es.js","readme":"# Introduction\r\n\r\nImagine browsing pages (routes), receiving alerts and notifications, having a countdown timer on the page, a progress bar, a loading or a change of route in a SPA. Now imagine all this happening to people who have visual disabilities and who use screen readers. \r\n\r\nThe [@vue-a11y/announcer@next](https://github.com/vue-a11y/vue-announcer/tree/next) (v3.*) for Vue 3 provides an easy way to really tell what’s going on in your application to people using screen readers.\r\n\r\n> For vue-announcer version 2.* you can access [this link](https://github.com/vue-a11y/vue-announcer/tree/master)\r\n\r\n## Links\r\n- [Demo](https://vue-announcer.surge.sh/)\r\n\r\n## Setup\r\n\r\n### Installation\r\n\r\n```shell\r\nnpm install -S @vue-a11y/announcer@next\r\n# or\r\nyarn add -D @vue-a11y/announcer@next\r\n```\r\n\r\n### Basic usage\r\n\r\nIn your `main.(js|ts)`\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport router from './router'\r\n\r\nimport VueAnnouncer from '@vue-a11y/announcer'\r\nimport '@vue-a11y/announcer/index.css'\r\n\r\ncreateApp(App)\r\n .use(VueAnnouncer)\r\n .use(router)\r\n .mount('#app')\r\n```\r\n\r\nIn your `App.vue`\r\n\r\n```vue\r\n\r\n```\r\n\r\n## useAnnouncer\r\n\r\nWe provide the Vue composition `useAnnouncer` to announce to a person with a screen reader any information needed, anywhere in your app and in real time.\r\n\r\n```js\r\n// e.g.\r\nconst { assertive } = useAnnouncer()\r\n// or \r\nconst { polite } = useAnnouncer()\r\n```\r\n\r\n### Change routeComplement\r\n\r\nIf you need to set the `routeComplement` option dynamically without reloading the application, for example if you're dynamically loading translations, you can use this method to update it.\r\n\r\n```js\r\n// e.g.\r\nconst { setRouteComplement } = useAnnouncer()\r\nsetRouteComplement(translations.routeComplementKey)\r\n```\r\n\r\n## Announce route changes\r\n\r\nFor page changes (routes) to be announced automatically, you only need to pass the router object as a parameter at the time of installation.\r\n\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport router from './router'\r\nimport VueAnnouncer from '@vue-a11y/announcer'\r\n\r\ncreateApp(App)\r\n .use(VueAnnouncer, { router: true })\r\n .use(router)\r\n .mount('#app')\r\n```\r\n\r\n### Custom announcer (object meta)\r\n\r\nYou can customize the message by defining the announcer on the \"meta\" object for each specific route.\r\n\r\n```js\r\n{\r\n name: 'home',\r\n path: '/',\r\n component: Home,\r\n meta: {\r\n announcer: {\r\n message: 'Página de inicio se'\r\n }\r\n }\r\n}\r\n```\r\n\r\nWhen the page loads, the screen reader user will hear:\r\n\r\n```shell\r\nPágina de inicio se ha cargado.\r\n```\r\n\r\nKey | Data Type | data | default |\r\n------------------ | ---------- | ------------------------- | ----------------------------------- |\r\n`message` | String | | document.title |\r\n`politeness` | String | polite, assertive, off | polite |\r\n`skip` | Boolean | | false |\r\n`routeComplement` | String | | `has loaded` or set at installation |\r\n\r\n#### Note\r\n- The plug-in checks whether the message to be announced has been defined in the meta.announcer object, otherwise the document title to be loaded will be announced.\r\n- The `@vue-a11y/announcer@next` uses the global after hooks `router.afterEach` to announce the route changes.\r\n\r\n### Skip in specific route\r\nNecessary for dynamic content pages that require asynchronous data to compose the page title.\r\n\r\nThe skip property on the `meta.announcer` object is used to `skip` the automatic announcement made on the `router.afterEach`, that way you can announce when the asynchronous data is available.\r\n\r\nFor example:\r\n\r\nIn you [`routes.js`](/demo/src/router/routes.ts)\r\n\r\n```js\r\n// ...\r\n{\r\n name: 'post',\r\n path: '/posts/:id',\r\n component: Post,\r\n meta: {\r\n announcer: {\r\n skip: true\r\n }\r\n }\r\n}\r\n// ...\r\n```\r\n\r\nIn you [`Post.vue`](/demo/src/pages/Post.vue)\r\n\r\n```vue\r\n\r\n\r\n\r\n```\r\n\r\n# Browser Testing\r\n\r\nVue Announcer was tested and works as expected in the latest versions of:\r\n\r\n- NVDA (Chrome) ✔️\r\n- ChromeVox (Chrome extension) ✔️\r\n\r\n## To test\r\n\r\n- Android TalkBack\r\n- JAWS\r\n- iOS VoiceOver (Safari)\r\n\r\n## Contributing\r\n- From typos in documentation to coding new features;\r\n- Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;\r\n- Fork repository, make changes and send a pull request;\r\n\r\nFollow us on Twitter [@vue_a11y](https://twitter.com/vue_a11y)\r\n\r\n**Thank you**\r\n","browser":"dist/announcer.es.js","exports":{".":{"import":"./dist/announcer.es.js","require":"./dist/announcer.cjs.js"}},"gitHead":"dbcae4d77de124744f7895765a4eb34c2dbef401","scripts":{"dev":"vite","build":"vuedx-typecheck . && vite build && npm run fixFiles","release":"standard-version","demo:dev":"cd demo && vite","fixFiles":"cp -a src/types/. dist && cp -a dist/@vue-a11y/. dist && rm -rf dist/@vue-a11y","demo:build":"cd demo && vuedx-typecheck . && vite build","demo:publish":"surge ./demo/dist https://vue-announcer.surge.sh/","project:publish":"git push --tags origin next && npm run build && npm publish --tag next"},"_npmUser":{"name":"ktquez","email":"ktquez@gmail.com"},"jsdelivr":"dist/announcer.iife.js","_npmVersion":"6.12.0","description":"Imagine browsing pages (routes), receiving alerts and notifications, having a countdown timer on the page, a progress bar, a loading or a change of route in a SPA. Now imagine all this happening to people who have visual disabilities and who use screen re","directories":{},"_nodeVersion":"12.13.0","dependencies":{"vue":"^3.0.5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vite":"^2.0.0-beta.12","typescript":"^4.1.3","vue-router":"^4.0.3","@types/node":"^14.14.21","@vuedx/typecheck":"^0.6.0","standard-version":"^9.1.0","@vue/compiler-sfc":"^3.0.5","@vitejs/plugin-vue":"^1.0.4","@vuedx/typescript-plugin-vue":"^0.4.1"},"_npmOperationalInternal":{"tmp":"tmp/announcer_3.0.2_1611029296221_0.13421381076767336","host":"s3://npm-registry-packages"}},"3.0.3":{"name":"@vue-a11y/announcer","version":"3.0.3","_id":"@vue-a11y/announcer@3.0.3","maintainers":[{"name":"ktquez","email":"ktquez@gmail.com"},{"name":"mlama007","email":"marialamardo@outlook.com"},{"name":"kddeisz","email":"kevin.deisz@gmail.com"}],"dist":{"shasum":"3ca8f170085a94880d7c05b37adc55f0ed194e80","tarball":"https://registry.npmjs.org/@vue-a11y/announcer/-/announcer-3.0.3.tgz","fileCount":9,"integrity":"sha512-0Ekl5IzKqT0W7Aky3tu8nZPlPS+Z1vuX5pSFDd++yG3UQN5Gb0foY6IMhOxzcYMfJGCWhM9CCS43CdxVJZtZbg==","signatures":[{"sig":"MEYCIQC9/GLg8MMZOcvD2TQjXJY+H6hyMAbARKI9hgh/e6zJogIhAMzO5v9tkTJDv1e9+LxtmGPWbHOJov3u0Asrh7ZMbxlK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBlxACRA9TVsSAnZWagAAjAMQAJp8msFAH/RTU/4VLZPc\n/gFyJYSzWMT+vuYZgdQ+asQkYC7sWKdbqyZ3bGm4lhorcUainF4mnpYdTTDD\nLoAOqit3mpdI8f74qlwcq9PzJE/Q1eQgIkRoLa7QCkoJNyL3gYRURkxuqgq5\n4Bb1JinALom1YAr0EerlVo+s5iEU1WFW+LgufivhMO9WRcVkCZlW14hq3tWo\nGMglSgPv1ioJFNR/Tk79XMPvhui/PcBO+V619ilp6ggO9hidzMhrc3nkpR7k\n+63artwxo5BCGvFRZw0kRMosZ09BT/lXB5h/owGedeuLNKUFb4cl5ikaRq+6\n6dgYSi+UG0um/oQfb6yT7gFQGXzy/wqRt/kqcE+OxEI6NNdi11nkpGSRZmgw\nPZ2F+KxRv3WU65HyFk0bWlZyOezI6kmarS/4c0vFgo1Bp4hDccrzBavzIdHb\nbMs5ax2RjypyzJ5ZKTtvnKFl9dr7BX7CqBg2c2/B0zkgJAQNfZP/GxnJrULW\n62TBLwAvxDDybC2b9iweMS3Kh+dZwdGpDqyu0am5EXzLL/svRq5v/hC5g9tC\n5jl1JJPEvmjqLoagWcDXLNNNh+fa49Xv/h7WDkbVwgJ6h7YtpXKNSS44ESS7\nndecdjchY4U1Xen6MaXgSqLDGtU4jLb2/bHKTe5sqmPSnVjy5KhmUZcalFZ6\nk7vD\r\n=W01a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/announcer.cjs.js","style":"dist/index.css","types":"dist/index.d.ts","unpkg":"dist/announcer.iife.js","module":"dist/announcer.es.js","readme":"# Introduction\r\n\r\nImagine browsing pages (routes), receiving alerts and notifications, having a countdown timer on the page, a progress bar, a loading or a change of route in a SPA. Now imagine all this happening to people who have visual disabilities and who use screen readers. \r\n\r\nThe [@vue-a11y/announcer@next](https://github.com/vue-a11y/vue-announcer/tree/next) (v3.*) for Vue 3 provides an easy way to really tell what’s going on in your application to people using screen readers.\r\n\r\n> For vue-announcer version 2.* you can access [this link](https://github.com/vue-a11y/vue-announcer/tree/master)\r\n\r\n## Links\r\n- [Demo](https://vue-announcer.surge.sh/)\r\n\r\n## Setup\r\n\r\n### Installation\r\n\r\n```shell\r\nnpm install -S @vue-a11y/announcer@next\r\n# or\r\nyarn add -D @vue-a11y/announcer@next\r\n```\r\n\r\n### Basic usage\r\n\r\nIn your `main.(js|ts)`\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport router from './router'\r\n\r\nimport VueAnnouncer from '@vue-a11y/announcer'\r\nimport '@vue-a11y/announcer/index.css'\r\n\r\ncreateApp(App)\r\n .use(VueAnnouncer)\r\n .use(router)\r\n .mount('#app')\r\n```\r\n\r\nIn your `App.vue`\r\n\r\n```vue\r\n\r\n```\r\n\r\n## useAnnouncer\r\n\r\nWe provide the Vue composition `useAnnouncer` to announce to a person with a screen reader any information needed, anywhere in your app and in real time.\r\n\r\n```js\r\n// e.g.\r\nconst { assertive } = useAnnouncer()\r\n// or \r\nconst { polite } = useAnnouncer()\r\n```\r\n\r\n### Change routeComplement\r\n\r\nIf you need to set the `routeComplement` option dynamically without reloading the application, for example if you're dynamically loading translations, you can use this method to update it.\r\n\r\n```js\r\n// e.g.\r\nconst { setRouteComplement } = useAnnouncer()\r\nsetRouteComplement(translations.routeComplementKey)\r\n```\r\n\r\n## Announce route changes\r\n\r\nFor page changes (routes) to be announced automatically, you only need to pass the router object as a parameter at the time of installation.\r\n\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport router from './router'\r\nimport VueAnnouncer from '@vue-a11y/announcer'\r\n\r\ncreateApp(App)\r\n .use(VueAnnouncer, { router: true })\r\n .use(router)\r\n .mount('#app')\r\n```\r\n\r\n### Custom announcer (object meta)\r\n\r\nYou can customize the message by defining the announcer on the \"meta\" object for each specific route.\r\n\r\n```js\r\n{\r\n name: 'home',\r\n path: '/',\r\n component: Home,\r\n meta: {\r\n announcer: {\r\n message: 'Página de inicio se'\r\n }\r\n }\r\n}\r\n```\r\n\r\nWhen the page loads, the screen reader user will hear:\r\n\r\n```shell\r\nPágina de inicio se ha cargado.\r\n```\r\n\r\nKey | Data Type | data | default |\r\n------------------ | ---------- | ------------------------- | ----------------------------------- |\r\n`message` | String | | document.title |\r\n`politeness` | String | polite, assertive, off | polite |\r\n`skip` | Boolean | | false |\r\n`routeComplement` | String | | `has loaded` or set at installation |\r\n\r\n#### Note\r\n- The plug-in checks whether the message to be announced has been defined in the meta.announcer object, otherwise the document title to be loaded will be announced.\r\n- The `@vue-a11y/announcer@next` uses the global after hooks `router.afterEach` to announce the route changes.\r\n\r\n### Skip in specific route\r\nNecessary for dynamic content pages that require asynchronous data to compose the page title.\r\n\r\nThe skip property on the `meta.announcer` object is used to `skip` the automatic announcement made on the `router.afterEach`, that way you can announce when the asynchronous data is available.\r\n\r\nFor example:\r\n\r\nIn you [`routes.js`](/demo/src/router/routes.ts)\r\n\r\n```js\r\n// ...\r\n{\r\n name: 'post',\r\n path: '/posts/:id',\r\n component: Post,\r\n meta: {\r\n announcer: {\r\n skip: true\r\n }\r\n }\r\n}\r\n// ...\r\n```\r\n\r\nIn you [`Post.vue`](/demo/src/pages/Post.vue)\r\n\r\n```vue\r\n\r\n\r\n\r\n```\r\n\r\n# Browser Testing\r\n\r\nVue Announcer was tested and works as expected in the latest versions of:\r\n\r\n- NVDA (Chrome) ✔️\r\n- ChromeVox (Chrome extension) ✔️\r\n\r\n## To test\r\n\r\n- Android TalkBack\r\n- JAWS\r\n- iOS VoiceOver (Safari)\r\n\r\n## Contributing\r\n- From typos in documentation to coding new features;\r\n- Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;\r\n- Fork repository, make changes and send a pull request;\r\n\r\nFollow us on Twitter [@vue_a11y](https://twitter.com/vue_a11y)\r\n\r\n**Thank you**\r\n","browser":"dist/announcer.es.js","exports":{".":{"import":"./dist/announcer.es.js","require":"./dist/announcer.cjs.js"}},"gitHead":"660cf86e27968b525dc0f99ce544a9f824df71c1","scripts":{"dev":"vite","build":"vuedx-typecheck . && vite build && npm run fixFiles","release":"standard-version","demo:dev":"cd demo && vite","fixFiles":"cp -a src/types/. dist && cp -a dist/@vue-a11y/. dist && rm -rf dist/@vue-a11y","demo:build":"cd demo && vuedx-typecheck . && vite build","demo:publish":"surge ./demo/dist https://vue-announcer.surge.sh/","project:publish":"git push --tags origin next && npm run build && npm publish --tag next"},"_npmUser":{"name":"ktquez","email":"ktquez@gmail.com"},"jsdelivr":"dist/announcer.iife.js","_npmVersion":"6.12.0","description":"Imagine browsing pages (routes), receiving alerts and notifications, having a countdown timer on the page, a progress bar, a loading or a change of route in a SPA. Now imagine all this happening to people who have visual disabilities and who use screen re","directories":{},"_nodeVersion":"12.13.0","dependencies":{"vue":"^3.0.5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vite":"^2.0.0-beta.12","typescript":"^4.1.3","vue-router":"^4.0.3","@types/node":"^14.14.21","@vuedx/typecheck":"^0.6.0","standard-version":"^9.1.0","@vue/compiler-sfc":"^3.0.5","@vitejs/plugin-vue":"^1.0.4","@vuedx/typescript-plugin-vue":"^0.4.1"},"_npmOperationalInternal":{"tmp":"tmp/announcer_3.0.3_1611029567648_0.4165485864406997","host":"s3://npm-registry-packages"}},"3.0.4":{"name":"@vue-a11y/announcer","version":"3.0.4","_id":"@vue-a11y/announcer@3.0.4","maintainers":[{"name":"ktquez","email":"ktquez@gmail.com"},{"name":"mlama007","email":"marialamardo@outlook.com"},{"name":"kddeisz","email":"kevin.deisz@gmail.com"}],"dist":{"shasum":"0b318a1c086060b4108158929958f6e608ab748b","tarball":"https://registry.npmjs.org/@vue-a11y/announcer/-/announcer-3.0.4.tgz","fileCount":8,"integrity":"sha512-fSwvfnjviW2BgVuvis99dr/YeGp4bEWNPHHU9+gYFX3xEy/Q5xb8FqSLfEe3oIL8OUGtMvMTC0NG2l063cH31g==","signatures":[{"sig":"MEUCIGPWPp9fpu3df/N/NKyzBVLQzZWBgM3bfVmXwe18uFGXAiEAzo1JN6DpBUqFZmF8Ro3bQNoR/N0RJW4Rx743QIu11+o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":17860,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBl4TCRA9TVsSAnZWagAA3pgP/3Whqgp2Rydwpj0u9jEQ\n7nNrBBby1ve4L+1tc7aRvM1di5q5EEURve1X2OMeQewdeaz/fvS0Qyl93tb8\n3Rs/nUZNGCxfEnnrmwpKwokNPYgqPZps7wBxk1/DPdIYAUYTixlZ1N/dBaqs\nY0PunN64VE+OYevPnfHA2fCrfMp6L+Wjh+zrMXlU3dzmxXtCMMHdlB/T/8Lz\nFUJoljoRrFoX9p30sHXpI2rbFx9An+/8zzq5mrnCzqGZqT111VGBBWaQpX20\ntsWsnFl47gLdq327FA4RggaVvbLTG8jlG07fn9yxKOvsYKcK5i85oZuVRdvO\nCwZE6oC1HEKJDWj8exFV7OjJEvrmdwfJJvFM2UbRfbMxdwNKNORI0hF0bbnw\n+VmII0QI2zOrtmLEdDTYwrf6wyfsJmWc96iTmpS2vTRxE7AZkEthAKb23oMk\nU1l/PvnYK86vVUc7T95b8rQ5/Q8cqJPfEZ7Sys5qmJqk84B+aKxuJMDyVvQg\nawdnDtuUQaCEfJdfbvzB2oW0wlF7OpaPn3lRPgHcUFoDU/9ddIkyt1ZQC4c4\nxLIP9uYWwC/wG5XnyEvpuGWIgp9RgoeYLRVpknbTiFfcBC9WqjR7q9sqh4U3\np79VCRnr6PVuczIqUmUWnmthL8knzBYDYaXi/4Kyy/clggib5rAFg/x2UQ3R\nsH2g\r\n=v7SH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/announcer.cjs.js","style":"dist/index.css","types":"index.d.ts","unpkg":"dist/announcer.iife.js","module":"dist/announcer.es.js","readme":"# Introduction\r\n\r\nImagine browsing pages (routes), receiving alerts and notifications, having a countdown timer on the page, a progress bar, a loading or a change of route in a SPA. Now imagine all this happening to people who have visual disabilities and who use screen readers. \r\n\r\nThe [@vue-a11y/announcer@next](https://github.com/vue-a11y/vue-announcer/tree/next) (v3.*) for Vue 3 provides an easy way to really tell what’s going on in your application to people using screen readers.\r\n\r\n> For vue-announcer version 2.* you can access [this link](https://github.com/vue-a11y/vue-announcer/tree/master)\r\n\r\n## Links\r\n- [Demo](https://vue-announcer.surge.sh/)\r\n\r\n## Setup\r\n\r\n### Installation\r\n\r\n```shell\r\nnpm install -S @vue-a11y/announcer@next\r\n# or\r\nyarn add -D @vue-a11y/announcer@next\r\n```\r\n\r\n### Basic usage\r\n\r\nIn your `main.(js|ts)`\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport router from './router'\r\n\r\nimport VueAnnouncer from '@vue-a11y/announcer'\r\nimport '@vue-a11y/announcer/index.css'\r\n\r\ncreateApp(App)\r\n .use(VueAnnouncer)\r\n .use(router)\r\n .mount('#app')\r\n```\r\n\r\nIn your `App.vue`\r\n\r\n```vue\r\n\r\n```\r\n\r\n## useAnnouncer\r\n\r\nWe provide the Vue composition `useAnnouncer` to announce to a person with a screen reader any information needed, anywhere in your app and in real time.\r\n\r\n```js\r\n// e.g.\r\nconst { assertive } = useAnnouncer()\r\n// or \r\nconst { polite } = useAnnouncer()\r\n```\r\n\r\n### Change routeComplement\r\n\r\nIf you need to set the `routeComplement` option dynamically without reloading the application, for example if you're dynamically loading translations, you can use this method to update it.\r\n\r\n```js\r\n// e.g.\r\nconst { setRouteComplement } = useAnnouncer()\r\nsetRouteComplement(translations.routeComplementKey)\r\n```\r\n\r\n## Announce route changes\r\n\r\nFor page changes (routes) to be announced automatically, you only need to pass the router object as a parameter at the time of installation.\r\n\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport router from './router'\r\nimport VueAnnouncer from '@vue-a11y/announcer'\r\n\r\ncreateApp(App)\r\n .use(VueAnnouncer, { router: true })\r\n .use(router)\r\n .mount('#app')\r\n```\r\n\r\n### Custom announcer (object meta)\r\n\r\nYou can customize the message by defining the announcer on the \"meta\" object for each specific route.\r\n\r\n```js\r\n{\r\n name: 'home',\r\n path: '/',\r\n component: Home,\r\n meta: {\r\n announcer: {\r\n message: 'Página de inicio se'\r\n }\r\n }\r\n}\r\n```\r\n\r\nWhen the page loads, the screen reader user will hear:\r\n\r\n```shell\r\nPágina de inicio se ha cargado.\r\n```\r\n\r\nKey | Data Type | data | default |\r\n------------------ | ---------- | ------------------------- | ----------------------------------- |\r\n`message` | String | | document.title |\r\n`politeness` | String | polite, assertive, off | polite |\r\n`skip` | Boolean | | false |\r\n`routeComplement` | String | | `has loaded` or set at installation |\r\n\r\n#### Note\r\n- The plug-in checks whether the message to be announced has been defined in the meta.announcer object, otherwise the document title to be loaded will be announced.\r\n- The `@vue-a11y/announcer@next` uses the global after hooks `router.afterEach` to announce the route changes.\r\n\r\n### Skip in specific route\r\nNecessary for dynamic content pages that require asynchronous data to compose the page title.\r\n\r\nThe skip property on the `meta.announcer` object is used to `skip` the automatic announcement made on the `router.afterEach`, that way you can announce when the asynchronous data is available.\r\n\r\nFor example:\r\n\r\nIn you [`routes.js`](/demo/src/router/routes.ts)\r\n\r\n```js\r\n// ...\r\n{\r\n name: 'post',\r\n path: '/posts/:id',\r\n component: Post,\r\n meta: {\r\n announcer: {\r\n skip: true\r\n }\r\n }\r\n}\r\n// ...\r\n```\r\n\r\nIn you [`Post.vue`](/demo/src/pages/Post.vue)\r\n\r\n```vue\r\n\r\n\r\n\r\n```\r\n\r\n# Browser Testing\r\n\r\nVue Announcer was tested and works as expected in the latest versions of:\r\n\r\n- NVDA (Chrome) ✔️\r\n- ChromeVox (Chrome extension) ✔️\r\n\r\n## To test\r\n\r\n- Android TalkBack\r\n- JAWS\r\n- iOS VoiceOver (Safari)\r\n\r\n## Contributing\r\n- From typos in documentation to coding new features;\r\n- Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;\r\n- Fork repository, make changes and send a pull request;\r\n\r\nFollow us on Twitter [@vue_a11y](https://twitter.com/vue_a11y)\r\n\r\n**Thank you**\r\n","browser":"dist/announcer.es.js","exports":{".":{"import":"./dist/announcer.es.js","require":"./dist/announcer.cjs.js"}},"gitHead":"38360e73fca9cdca5e5be6f07a7c0f831cf88fe9","scripts":{"dev":"vite","build":"vuedx-typecheck . && vite build && npm run fixFiles","release":"standard-version","demo:dev":"cd demo && vite","fixFiles":"cp -a src/types/. . && cp -a dist/@vue-a11y/. dist && rm -rf dist/@vue-a11y","demo:build":"cd demo && vuedx-typecheck . && vite build","demo:publish":"surge ./demo/dist https://vue-announcer.surge.sh/","project:publish":"git push --tags origin next && npm run build && npm publish --tag next"},"_npmUser":{"name":"ktquez","email":"ktquez@gmail.com"},"jsdelivr":"dist/announcer.iife.js","_npmVersion":"6.12.0","description":"Imagine browsing pages (routes), receiving alerts and notifications, having a countdown timer on the page, a progress bar, a loading or a change of route in a SPA. Now imagine all this happening to people who have visual disabilities and who use screen re","directories":{},"_nodeVersion":"12.13.0","dependencies":{"vue":"^3.0.5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vite":"^2.0.0-beta.12","typescript":"^4.1.3","vue-router":"^4.0.3","@types/node":"^14.14.21","@vuedx/typecheck":"^0.6.0","standard-version":"^9.1.0","@vue/compiler-sfc":"^3.0.5","@vitejs/plugin-vue":"^1.0.4","@vuedx/typescript-plugin-vue":"^0.4.1"},"_npmOperationalInternal":{"tmp":"tmp/announcer_3.0.4_1611030034967_0.8082615283714258","host":"s3://npm-registry-packages"}},"3.0.5":{"name":"@vue-a11y/announcer","version":"3.0.5","_id":"@vue-a11y/announcer@3.0.5","maintainers":[{"name":"ktquez","email":"ktquez@gmail.com"},{"name":"mlama007","email":"marialamardo@outlook.com"},{"name":"kddeisz","email":"kevin.deisz@gmail.com"}],"dist":{"shasum":"69c4f9dff07aa2b021434f637f69716106a780fd","tarball":"https://registry.npmjs.org/@vue-a11y/announcer/-/announcer-3.0.5.tgz","fileCount":38,"integrity":"sha512-lKvox9mb0r7nW1h5GB5aEDUaIQXjRjqr8QucJJFN9iaU+uGwhcS4kMXtpTwrjloO+M1w9lLunAFMfQnGbDvULQ==","signatures":[{"sig":"MEUCIQDAtq5BFTm2SU95uF1kFTDxkW03+BUFewp7Dskvqw1XQAIgSyIMuFi3gOUT79qUz8KN0Lc0mltzxXHR/8qMwF7Hia0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":130865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBl6kCRA9TVsSAnZWagAAPkMP/R+PZ4ZbX3OP2wgrFZ49\nvI7+tMT4h7BhWobg9SBUkCmRTvuhH2w08U4bA8NZvOTuRmlpcePHrbXK8/0z\nKj4o20PZa4t/yAGf1e2vZ0akTcswCwJymCBEIjdr8t14m2pPufI8SB6payq9\n4xir0Qk5pcOTuMA7I5hnIEqaCLCbvAxtq1PLkTVldQ3T2oHNg16qi3A5+co2\nBQKdbQRG1/rwxwR96XoZ5lamYp+TLz5I5tcMrHd3wNtJImnCNC0lk+wwByO9\nA58vGXRJ5Cjyc1G/rJ/F1osFuSw3eul5R0SLnsdwrA2TIpZJjGnYLGrDSPlJ\nANrHZZD5fFYTS0TZ5unM/PDDvvRzlODm6t9sKOwxOK+/wwdcLhCqbb74a3T8\n/yJ89o5XsecAanE8QbRSuOhBWe0I89rXTUIW20vjK/TPp4WiHLoQKbAmzbuU\ngakyA5Unud46FMh+G3nuLufccpEsGONpZE8G53UuLSJZWQkACrz+8d50Hiuh\nAAsMcy33vKZWv+AXuB48ntGKQbgPr3dJEwC6Hlv5w2/DkaAg1YXtDpSzmRU/\nmFTg9M3ND4c5UYSMU11q2M6Z31yXSnWScN4tjaRx1/7b902dTAvFI8Vk24eN\ngTwlrulMxEwaxCEOaDeZKKJWPi/dATW/6+D8YxTZbSivm3/rfm66th9bBOKH\nlzUR\r\n=2VsX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/announcer.cjs.js","style":"dist/index.css","types":"index.d.ts","unpkg":"dist/announcer.iife.js","module":"dist/announcer.es.js","readme":"# Introduction\r\n\r\nImagine browsing pages (routes), receiving alerts and notifications, having a countdown timer on the page, a progress bar, a loading or a change of route in a SPA. Now imagine all this happening to people who have visual disabilities and who use screen readers. \r\n\r\nThe [@vue-a11y/announcer@next](https://github.com/vue-a11y/vue-announcer/tree/next) (v3.*) for Vue 3 provides an easy way to really tell what’s going on in your application to people using screen readers.\r\n\r\n> For vue-announcer version 2.* you can access [this link](https://github.com/vue-a11y/vue-announcer/tree/master)\r\n\r\n## Links\r\n- [Demo](https://vue-announcer.surge.sh/)\r\n\r\n## Setup\r\n\r\n### Installation\r\n\r\n```shell\r\nnpm install -S @vue-a11y/announcer@next\r\n# or\r\nyarn add -D @vue-a11y/announcer@next\r\n```\r\n\r\n### Basic usage\r\n\r\nIn your `main.(js|ts)`\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport router from './router'\r\n\r\nimport VueAnnouncer from '@vue-a11y/announcer'\r\nimport '@vue-a11y/announcer/index.css'\r\n\r\ncreateApp(App)\r\n .use(VueAnnouncer)\r\n .use(router)\r\n .mount('#app')\r\n```\r\n\r\nIn your `App.vue`\r\n\r\n```vue\r\n\r\n```\r\n\r\n## useAnnouncer\r\n\r\nWe provide the Vue composition `useAnnouncer` to announce to a person with a screen reader any information needed, anywhere in your app and in real time.\r\n\r\n```js\r\n// e.g.\r\nconst { assertive } = useAnnouncer()\r\n// or \r\nconst { polite } = useAnnouncer()\r\n```\r\n\r\n### Change routeComplement\r\n\r\nIf you need to set the `routeComplement` option dynamically without reloading the application, for example if you're dynamically loading translations, you can use this method to update it.\r\n\r\n```js\r\n// e.g.\r\nconst { setRouteComplement } = useAnnouncer()\r\nsetRouteComplement(translations.routeComplementKey)\r\n```\r\n\r\n## Announce route changes\r\n\r\nFor page changes (routes) to be announced automatically, you only need to pass the router object as a parameter at the time of installation.\r\n\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport router from './router'\r\nimport VueAnnouncer from '@vue-a11y/announcer'\r\n\r\ncreateApp(App)\r\n .use(VueAnnouncer, { router: true })\r\n .use(router)\r\n .mount('#app')\r\n```\r\n\r\n### Custom announcer (object meta)\r\n\r\nYou can customize the message by defining the announcer on the \"meta\" object for each specific route.\r\n\r\n```js\r\n{\r\n name: 'home',\r\n path: '/',\r\n component: Home,\r\n meta: {\r\n announcer: {\r\n message: 'Página de inicio se'\r\n }\r\n }\r\n}\r\n```\r\n\r\nWhen the page loads, the screen reader user will hear:\r\n\r\n```shell\r\nPágina de inicio se ha cargado.\r\n```\r\n\r\nKey | Data Type | data | default |\r\n------------------ | ---------- | ------------------------- | ----------------------------------- |\r\n`message` | String | | document.title |\r\n`politeness` | String | polite, assertive, off | polite |\r\n`skip` | Boolean | | false |\r\n`routeComplement` | String | | `has loaded` or set at installation |\r\n\r\n#### Note\r\n- The plug-in checks whether the message to be announced has been defined in the meta.announcer object, otherwise the document title to be loaded will be announced.\r\n- The `@vue-a11y/announcer@next` uses the global after hooks `router.afterEach` to announce the route changes.\r\n\r\n### Skip in specific route\r\nNecessary for dynamic content pages that require asynchronous data to compose the page title.\r\n\r\nThe skip property on the `meta.announcer` object is used to `skip` the automatic announcement made on the `router.afterEach`, that way you can announce when the asynchronous data is available.\r\n\r\nFor example:\r\n\r\nIn you [`routes.js`](/demo/src/router/routes.ts)\r\n\r\n```js\r\n// ...\r\n{\r\n name: 'post',\r\n path: '/posts/:id',\r\n component: Post,\r\n meta: {\r\n announcer: {\r\n skip: true\r\n }\r\n }\r\n}\r\n// ...\r\n```\r\n\r\nIn you [`Post.vue`](/demo/src/pages/Post.vue)\r\n\r\n```vue\r\n\r\n\r\n\r\n```\r\n\r\n# Browser Testing\r\n\r\nVue Announcer was tested and works as expected in the latest versions of:\r\n\r\n- NVDA (Chrome) ✔️\r\n- ChromeVox (Chrome extension) ✔️\r\n\r\n## To test\r\n\r\n- Android TalkBack\r\n- JAWS\r\n- iOS VoiceOver (Safari)\r\n\r\n## Contributing\r\n- From typos in documentation to coding new features;\r\n- Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;\r\n- Fork repository, make changes and send a pull request;\r\n\r\nFollow us on Twitter [@vue_a11y](https://twitter.com/vue_a11y)\r\n\r\n**Thank you**\r\n","browser":"dist/announcer.es.js","exports":{".":{"import":"./dist/announcer.es.js","require":"./dist/announcer.cjs.js"}},"gitHead":"1396a0d7bf87a3c973fab91ff2e8f65f72704f81","scripts":{"dev":"vite","build":"vuedx-typecheck . && vite build && npm run fixFiles","release":"standard-version","demo:dev":"cd demo && vite","fixFiles":"cp -a src/types/. . && cp -a dist/@vue-a11y/. dist && rm -rf dist/@vue-a11y","demo:build":"cd demo && vuedx-typecheck . && vite build","demo:publish":"surge ./demo/dist https://vue-announcer.surge.sh/","project:publish":"git push --tags origin next && npm run build && npm publish --tag next"},"_npmUser":{"name":"ktquez","email":"ktquez@gmail.com"},"jsdelivr":"dist/announcer.iife.js","_npmVersion":"6.12.0","description":"Imagine browsing pages (routes), receiving alerts and notifications, having a countdown timer on the page, a progress bar, a loading or a change of route in a SPA. Now imagine all this happening to people who have visual disabilities and who use screen re","directories":{},"_nodeVersion":"12.13.0","dependencies":{"vue":"^3.0.5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vite":"^2.0.0-beta.12","typescript":"^4.1.3","vue-router":"^4.0.3","@types/node":"^14.14.21","@vuedx/typecheck":"^0.6.0","standard-version":"^9.1.0","@vue/compiler-sfc":"^3.0.5","@vitejs/plugin-vue":"^1.0.4","@vuedx/typescript-plugin-vue":"^0.4.1"},"_npmOperationalInternal":{"tmp":"tmp/announcer_3.0.5_1611030179828_0.9566526169396614","host":"s3://npm-registry-packages"}},"3.0.6":{"name":"@vue-a11y/announcer","version":"3.0.6","_id":"@vue-a11y/announcer@3.0.6","maintainers":[{"name":"ktquez","email":"ktquez@gmail.com"},{"name":"mlama007","email":"marialamardo@outlook.com"},{"name":"kddeisz","email":"kevin.deisz@gmail.com"}],"dist":{"shasum":"8038d9553b2582579aae7a2f7f81518677e1823e","tarball":"https://registry.npmjs.org/@vue-a11y/announcer/-/announcer-3.0.6.tgz","fileCount":38,"integrity":"sha512-rdzTkojyIFMNd+Taj36msZmNi5nIIxmGP36uSnBnwYadyT2QApk/M6curFLcQD1R2MFB/U07HsHdwGeOhOF+4g==","signatures":[{"sig":"MEYCIQC/glYmZwOFB3WyzgGmCn4tJbgET2xX0sr8V71hPfwUhAIhAJQbHdYfYlLlZLdOrH1P+t0/smRel6EVQHNz+8PYEQh4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":131341,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBmH1CRA9TVsSAnZWagAAwR0P/RzoSmzuvwST7uP2RQz5\n/V/U+3HZpIM/6h6G73aQE3UK2Io9FpfZLB8OpjQhx95YOFMQExcuSaV5phFt\nINI5xp4mwhbQWr+VpKdyfTWn6vTrpJYpp265cisr/UgUbnOLa3mquUd/3+U3\n865TwN3it/fKT0NHulxt++mcIrCZzE1UNlZKL8lvgMxJeM6HK02hziAQ4R0Z\n4ttvaxAWFBATTdvhCRZiIunadjWb4Z7fPrRkez1ADE8pq10hRxx7b+564jvd\nJMxnXHnPvcgWDkCVM8ympxiISk9XJaM+12TGLiaEGfU/1MoQwYw/l5s1hB+M\nmisTZy4tF9oQz2Y2soMks7w5iRWk08hoKC35X5y8YBEDaVsE6wptWpW9yXhk\nOpN+DzutLwY4chNDWsj/Jfli8JJHSkE46kfTOim7x6X8ffPT/30GmlYbjQ1J\n3h9LPJ2mJEjH5J1xeae1VxZhEk4SBHFUBqInILPUgHPAbsQG8AMnZ+rAykV8\n62cBn3lu952paP81Q3QDpegnst7jD5StAk3+TKtF2zQ6FOl6sgl7IAzHfAO5\nzGlIWo/eKe9g31X4r6jytmOsPaDdb7kCTHSh7+/3TMkjt/GGbY/U85IYZWJ3\nXuUEU+XRy1DZ0+8p5bxzsCXXSKnRSb7a8gF8COnX9qjj8kkyH0tcFW7M6iBR\nlA+M\r\n=hbk1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/announcer.cjs.js","style":"dist/index.css","types":"dist/index.d.ts","unpkg":"dist/announcer.iife.js","module":"dist/announcer.es.js","readme":"# Introduction\r\n\r\nImagine browsing pages (routes), receiving alerts and notifications, having a countdown timer on the page, a progress bar, a loading or a change of route in a SPA. Now imagine all this happening to people who have visual disabilities and who use screen readers. \r\n\r\nThe [@vue-a11y/announcer@next](https://github.com/vue-a11y/vue-announcer/tree/next) (v3.*) for Vue 3 provides an easy way to really tell what’s going on in your application to people using screen readers.\r\n\r\n> For vue-announcer version 2.* you can access [this link](https://github.com/vue-a11y/vue-announcer/tree/master)\r\n\r\n## Links\r\n- [Demo](https://vue-announcer.surge.sh/)\r\n\r\n## Setup\r\n\r\n### Installation\r\n\r\n```shell\r\nnpm install -S @vue-a11y/announcer@next\r\n# or\r\nyarn add -D @vue-a11y/announcer@next\r\n```\r\n\r\n### Basic usage\r\n\r\nIn your `main.(js|ts)`\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport router from './router'\r\n\r\nimport VueAnnouncer from '@vue-a11y/announcer'\r\nimport '@vue-a11y/announcer/dist/index.css'\r\n\r\ncreateApp(App)\r\n .use(VueAnnouncer)\r\n .use(router)\r\n .mount('#app')\r\n```\r\n\r\nIn your `App.vue`\r\n\r\n```vue\r\n\r\n```\r\n\r\n## useAnnouncer\r\n\r\nWe provide the Vue composition `useAnnouncer` to announce to a person with a screen reader any information needed, anywhere in your app and in real time.\r\n\r\n```js\r\n// e.g.\r\nconst { assertive } = useAnnouncer()\r\n// or \r\nconst { polite } = useAnnouncer()\r\n```\r\n\r\n### Change routeComplement\r\n\r\nIf you need to set the `routeComplement` option dynamically without reloading the application, for example if you're dynamically loading translations, you can use this method to update it.\r\n\r\n```js\r\n// e.g.\r\nconst { setRouteComplement } = useAnnouncer()\r\nsetRouteComplement(translations.routeComplementKey)\r\n```\r\n\r\n## Announce route changes\r\n\r\nFor page changes (routes) to be announced automatically, you only need to pass the router object as a parameter at the time of installation.\r\n\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport router from './router'\r\nimport VueAnnouncer from '@vue-a11y/announcer'\r\nimport '@vue-a11y/announcer/dist/index.css'\r\n\r\ncreateApp(App)\r\n .use(VueAnnouncer, { router })\r\n .use(router)\r\n .mount('#app')\r\n```\r\n### options\r\nKey | Data Type | default |\r\n------------------ | ------------- | ------------ |\r\n`router` | Router|false | false |\r\n`message` | String | '' |\r\n`politeness` | String | `polite` |\r\n`complementRoute` | String | `has loaded` |\r\n\r\n### Custom announcer (object meta)\r\n\r\nYou can customize the message by defining the announcer on the \"meta\" object for each specific route.\r\n\r\n```js\r\n{\r\n name: 'home',\r\n path: '/',\r\n component: Home,\r\n meta: {\r\n announcer: {\r\n message: 'Página de inicio se'\r\n }\r\n }\r\n}\r\n```\r\n\r\nWhen the page loads, the screen reader user will hear:\r\n\r\n```shell\r\nPágina de inicio se ha cargado.\r\n```\r\n\r\nKey | Data Type | data | default |\r\n------------------ | ---------- | ------------------------- | ----------------------------------- |\r\n`message` | String | | document.title |\r\n`politeness` | String | polite, assertive, off | polite |\r\n`skip` | Boolean | | false |\r\n`routeComplement` | String | | `has loaded` or set at installation |\r\n\r\n#### Note\r\n- The plug-in checks whether the message to be announced has been defined in the meta.announcer object, otherwise the document title to be loaded will be announced.\r\n- The `@vue-a11y/announcer@next` uses the global after hooks `router.afterEach` to announce the route changes.\r\n\r\n### Skip in specific route\r\nNecessary for dynamic content pages that require asynchronous data to compose the page title.\r\n\r\nThe skip property on the `meta.announcer` object is used to `skip` the automatic announcement made on the `router.afterEach`, that way you can announce when the asynchronous data is available.\r\n\r\nFor example:\r\n\r\nIn you [`routes.js`](/demo/src/router/routes.ts)\r\n\r\n```js\r\n// ...\r\n{\r\n name: 'post',\r\n path: '/posts/:id',\r\n component: Post,\r\n meta: {\r\n announcer: {\r\n skip: true\r\n }\r\n }\r\n}\r\n// ...\r\n```\r\n\r\nIn you [`Post.vue`](/demo/src/pages/Post.vue)\r\n\r\n```vue\r\n\r\n\r\n\r\n```\r\n\r\n# Browser Testing\r\n\r\nVue Announcer was tested and works as expected in the latest versions of:\r\n\r\n- NVDA (Chrome) ✔️\r\n- ChromeVox (Chrome extension) ✔️\r\n\r\n## To test\r\n\r\n- Android TalkBack\r\n- JAWS\r\n- iOS VoiceOver (Safari)\r\n\r\n## Contributing\r\n- From typos in documentation to coding new features;\r\n- Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;\r\n- Fork repository, make changes and send a pull request;\r\n\r\nFollow us on Twitter [@vue_a11y](https://twitter.com/vue_a11y)\r\n\r\n**Thank you**\r\n","browser":"dist/announcer.es.js","exports":{".":{"import":"./dist/announcer.es.js","require":"./dist/announcer.cjs.js"}},"gitHead":"895fac206e6afa5d323a328ca598b379f07f721b","scripts":{"dev":"vite","build":"vuedx-typecheck . && vite build && npm run fixFiles","release":"standard-version","demo:dev":"cd demo && vite","fixFiles":"cp -a src/types/. dist && cp -a dist/@vue-a11y/. dist && rm -rf dist/@vue-a11y","demo:build":"cd demo && vuedx-typecheck . && vite build","demo:publish":"surge ./demo/dist https://vue-announcer.surge.sh/","project:publish":"git push --tags origin next && npm run build && npm publish --tag next"},"_npmUser":{"name":"ktquez","email":"ktquez@gmail.com"},"jsdelivr":"dist/announcer.iife.js","_npmVersion":"6.12.0","description":"Imagine browsing pages (routes), receiving alerts and notifications, having a countdown timer on the page, a progress bar, a loading or a change of route in a SPA. Now imagine all this happening to people who have visual disabilities and who use screen re","directories":{},"_nodeVersion":"12.13.0","dependencies":{"vue":"^3.0.5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vite":"^2.0.0-beta.12","typescript":"^4.1.3","vue-router":"^4.0.3","@types/node":"^14.14.21","@vuedx/typecheck":"^0.6.0","standard-version":"^9.1.0","@vue/compiler-sfc":"^3.0.5","@vitejs/plugin-vue":"^1.0.4","@vuedx/typescript-plugin-vue":"^0.4.1"},"_npmOperationalInternal":{"tmp":"tmp/announcer_3.0.6_1611031028857_0.5430857863341407","host":"s3://npm-registry-packages"}},"3.1.0":{"name":"@vue-a11y/announcer","version":"3.1.0","_id":"@vue-a11y/announcer@3.1.0","maintainers":[{"name":"ktquez","email":"ktquez@gmail.com"},{"name":"mlama007","email":"marialamardo@outlook.com"},{"name":"kddeisz","email":"kddnewton+npm@gmail.com"}],"dist":{"shasum":"dcd96f1e9e699c23ddcfb210dda292e4c438ef67","tarball":"https://registry.npmjs.org/@vue-a11y/announcer/-/announcer-3.1.0.tgz","fileCount":39,"integrity":"sha512-kPPyGM5LiejgZC4tsuU1v7UGuu2wPsIgUIvPURIExFNNR7uaSbmnNs0hoBkG+dn2zg8HgyuwATsuT/9gMzTF2Q==","signatures":[{"sig":"MEQCIFKL7sJc7Hh8PsxNlVjDo3uqA7Lg6XyXcU1NZ18npNTOAiBFPp2qWNx6Xvq8P6NJlzmBzhxgWBJ9WI5WfLmSo3ChxQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":135315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDZksCRA9TVsSAnZWagAAHL4QAJeaQJGoguCEvAw0Tu53\nj/wFeRsaSZ4KmpsFUQVxzYzxfh9yzfERFEsU+nVkoxcFNXIMYTVI9uujf7zj\nNDhBhkhyhefBZm+Q5mqxmPiro9XLORXi/ziHmQK9DhVdfse7M0rCvl+J6RfK\nfTwNlDEiEJbZcszzszxMc6FQs48/d5BKQXDB2KkIqEeUEwu1fz1A+QEqbStP\nxEHud22u8RFZM9cLGdFs4Visw/sISJSFYZGMk7ksLNt5JIgyIwxQiJga3h1e\n8vXhNVXdguYh7caIa1Ir5viYWoUqoE3UGUflUrX6kFC+SsL6rPaTPP4p/cnV\n9Ojp6VetUGaNvF0Y3Qkj7Hr4c1UMocKUKOY+8iw4+2L1pe9cSeuRAqnf/qVm\nTv1UvyGVE9pnjxaaWVQuO9IZRmEYa80krv8lRLrgTbcOsRTP4P96dqLs1Hoh\n/vxW572Rq/TbvuTXC9KGvUvbyVt3fiRghJ7FociLXYwq7KQFTxEdW/DbR9lQ\nmav0OF5sswUXRQUXeoC6dviCyK7HLT2WNyWLGlUOtrXvoJMZkuUVszoIXVHE\nG3vO6J5/FqUY2GYVPq4pfugbfjJAuQInJHhbZWErRtX7g4RjLsiAfrrPu2Oc\n3rcmsevLH0xnhsUnKXwK1WnQPGHrYtMqqT+OByrvN7ENw9Qu8E+McS+MueiW\njDsm\r\n=FoTe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/announcer.cjs.js","style":"dist/index.css","types":"dist/index.d.ts","unpkg":"dist/announcer.iife.js","module":"dist/announcer.es.js","readme":"# [@vue-a11y/announcer](https://github.com/vue-a11y/vue-announcer/tree/next)\r\n\r\n---\r\n🔥 HEADS UP! You are in the Vue 3 compatible branch, [check the branch for Vue 2 support](https://github.com/vue-a11y/vue-announcer).\r\n\r\n---\r\n\r\n## Introduction\r\n\r\nImagine browsing pages (routes), receiving alerts and notifications, having a countdown timer on the page, a progress bar, a loading or a change of route in a SPA. Now imagine all this happening to people who have visual disabilities and who use screen readers. \r\n\r\nThe [@vue-a11y/announcer@next](https://github.com/vue-a11y/vue-announcer/tree/next) (v3.*) for Vue 3 provides an easy way to really tell what’s going on in your application to people using screen readers.\r\n\r\n## Links\r\n- [Demo](https://vue-announcer.surge.sh/)\r\n- [ARIA live regions](#aria-live-regions)\r\n\r\n## Setup\r\n\r\n### Installation\r\n\r\n```shell\r\nnpm install -S @vue-a11y/announcer@next\r\n# or\r\nyarn add -D @vue-a11y/announcer@next\r\n```\r\n\r\n### Basic usage\r\n\r\nIn your `main.(js|ts)`\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport router from './router'\r\n\r\nimport VueAnnouncer from '@vue-a11y/announcer'\r\nimport '@vue-a11y/announcer/dist/index.css'\r\n\r\ncreateApp(App)\r\n .use(VueAnnouncer)\r\n .use(router)\r\n .mount('#app')\r\n```\r\n\r\nIn your `App.vue`\r\n\r\n```vue\r\n\r\n```\r\n\r\n### Style\r\nYou can import the style via the `@vue-a11y/announcer/dist/index.css` path as in the previous one.\r\n\r\nHowever, if you are using a CSS tool like TailwindCSS or Bootstrap, you don't need to import the @vue-a11y/announcer style, as you just add the `sr-only` class to the component.\r\n\r\n```vue\r\n\r\n```\r\n\r\n## useAnnouncer\r\n\r\nWe provide the Vue composition `useAnnouncer` to announce to a person with a screen reader any information needed, anywhere in your app and in real time.\r\n\r\n### Import\r\n\r\n```js\r\nimport { useAnnouncer } from '@vue-a11y/announcer'\r\n```\r\n\r\n### Usage\r\n\r\n```js\r\nconst { assertive } = useAnnouncer()\r\nassertive('My error notification')\r\n\r\n// or \r\n\r\nconst { polite } = useAnnouncer()\r\npolite('My info notification')\r\n```\r\n\r\n## Option API\r\n\r\nYou can also use `this.$announcer` in your component.\r\n\r\n```js\r\nexport default {\r\n // ...\r\n methods: {\r\n setError() {\r\n this.$announcer.assertive('My notification error')\r\n }\r\n }\r\n}\r\n```\r\n\r\n## Change routeComplement\r\n\r\nIf you need to set the `routeComplement` option dynamically without reloading the application, for example if you're dynamically loading translations, you can use this method to update it.\r\n\r\n### Using Composition API\r\n\r\n```js\r\nexport default {\r\n setup () {\r\n const { setRouteComplement } = useAnnouncer()\r\n \r\n function onTranslationsUpdated (translations) {\r\n /* 'ha cargado' e.g. in spanish */\r\n setRouteComplement(translations.routeComplementKey)\r\n }\r\n // ...\r\n }\r\n}\r\n\r\n```\r\n\r\n### Using Option API\r\n\r\n```js\r\nexport default {\r\n // ...\r\n methods: {\r\n onTranslationsUpdated (translations) {\r\n /* 'Foi carregada' e.g. in portuguese */\r\n this.$announcer.setRouteComplement(translations.routeComplementKey)\r\n }\r\n }\r\n}\r\n```\r\n\r\n## Announce route changes\r\n\r\nFor page changes (routes) to be announced automatically, you only need to pass the router object as a parameter at the time of installation.\r\n\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport router from './router'\r\nimport VueAnnouncer from '@vue-a11y/announcer'\r\nimport '@vue-a11y/announcer/dist/index.css'\r\n\r\ncreateApp(App)\r\n .use(VueAnnouncer, { router })\r\n .use(router)\r\n .mount('#app')\r\n```\r\n### options\r\nKey | Data Type | data | default |\r\n------------------ | ------------- | ---------------------- | ------------ |\r\n`router` | Router | | false |\r\n`message` | String | | '' |\r\n`politeness` | String | polite, assertive, off | `polite` |\r\n`complementRoute` | String | | `has loaded` |\r\n\r\n## Custom announcer (object meta)\r\n\r\nYou can customize the message by defining the announcer on the \"meta\" object for each specific route.\r\n\r\n```js\r\n{\r\n name: 'home',\r\n path: '/',\r\n component: Home,\r\n meta: {\r\n announcer: {\r\n message: 'Página de inicio se'\r\n }\r\n }\r\n}\r\n```\r\n\r\nWhen the page loads, the screen reader user will hear:\r\n\r\n```shell\r\nPágina de inicio se ha cargado.\r\n```\r\n\r\nKey | Data Type | data | default |\r\n------------------ | ---------- | ------------------------- | ----------------------------------- |\r\n`message` | String | | document.title |\r\n`politeness` | String | polite, assertive, off | polite |\r\n`skip` | Boolean | | false |\r\n`routeComplement` | String | | `has loaded` or set at installation |\r\n\r\n### Note\r\n- The plug-in checks whether the message to be announced has been defined in the meta.announcer object, otherwise the document title to be loaded will be announced.\r\n- The `@vue-a11y/announcer@next` uses the global after hooks `router.afterEach` to announce the route changes.\r\n\r\n## Skip in specific route\r\nNecessary for dynamic content pages that require asynchronous data to compose the page title.\r\n\r\nThe skip property on the `meta.announcer` object is used to `skip` the automatic announcement made on the `router.afterEach`, that way you can announce when the asynchronous data is available.\r\n\r\nFor example:\r\n\r\nIn you [`routes.js`](/demo/src/router/routes.ts)\r\n\r\n```js\r\n{\r\n name: 'post',\r\n path: '/posts/:id',\r\n component: Post,\r\n meta: {\r\n announcer: {\r\n skip: true\r\n }\r\n }\r\n}\r\n```\r\n\r\n## ARIA live regions\r\n\r\n\"Using JavaScript, it is possible to dynamically change parts of a page without requiring the entire page to reload — for instance, to update a list of search results on the fly, or to display a discreet alert or notification which does not require user interaction. While these changes are usually visually apparent to users who can see the page, they may not be obvious to users of assistive technologies. ARIA live regions fill this gap and **provide a way to programmatically expose dynamic content changes in a way that can be announced by assistive technologies.**\"\r\n\r\n--- [ARIA live regions - Accessibility | MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)\r\n\r\n## Politeness settings\r\n\r\nYou can use the options `polite`, `assertive` and `off`, if no configuration is defined, the default is `off`.\r\n\r\n### polite\r\nIt is used in most situations that present new information to users. \r\nThe notification will take place at the next available point, without interruptions.\r\n\r\n---\r\nNOTE: `polite` is default\r\n\r\n---\r\n\r\n### assertive\r\nIt is used in situations where the notification is important enough to communicate it immediately, for example, error messages or alerts.\r\n\r\n\r\n```javascript\r\nconst { assertive } = useAnnouncer()\r\nassertive('My error notification')\r\n```\r\n\r\n### off\r\nIs the default and prevent assistive technology from keeping up with changes.\r\n\r\n\r\n### Referencies\r\n\r\n- [ARIA live regions - Accessibility | MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)\r\n- [Using aria-live - Bitsofcode](https://bitsofco.de/using-aria-live/)\r\n\r\n## Browser Testing\r\n\r\nVue Announcer was tested and works as expected in the latest versions of:\r\n\r\n- NVDA (Chrome) ✔️\r\n- ChromeVox (Chrome extension) ✔️\r\n\r\n### To test\r\n\r\n- Android TalkBack\r\n- JAWS\r\n- iOS VoiceOver (Safari)\r\n\r\n## Contributing\r\n- From typos in documentation to coding new features;\r\n- Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;\r\n- Fork repository, make changes and send a pull request;\r\n\r\nFollow us on Twitter [@vue_a11y](https://twitter.com/vue_a11y)\r\n\r\n**Thank you**\r\n","browser":"dist/announcer.es.js","exports":{".":{"import":"./dist/announcer.es.js","require":"./dist/announcer.cjs.js"}},"gitHead":"618c348a3852a8b28e01394a6742187d92a390e4","scripts":{"dev":"vite","build":"vuedx-typecheck . && vite build && npm run fixFiles","release":"standard-version","demo:dev":"cd demo && vite","fixFiles":"cp -a src/types/. dist && cp -a dist/@vue-a11y/. dist && rm -rf dist/@vue-a11y","demo:build":"cd demo && vuedx-typecheck . && vite build","demo:publish":"surge ./demo/dist https://vue-announcer.surge.sh/","project:publish":"git push --tags origin next && npm run build && npm publish --tag next"},"_npmUser":{"name":"ktquez","email":"ktquez@gmail.com"},"jsdelivr":"dist/announcer.iife.js","_npmVersion":"6.12.0","description":"---\r 🔥 HEADS UP! You are in the Vue 3 compatible branch, [check the branch for Vue 2 support](https://github.com/vue-a11y/vue-announcer).","directories":{},"_nodeVersion":"12.13.0","dependencies":{"vue":"^3.0.5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vite":"^2.0.0-beta.12","typescript":"^4.1.3","vue-router":"^4.0.3","@types/node":"^14.14.21","@vuedx/typecheck":"^0.6.0","standard-version":"^9.1.0","@vue/compiler-sfc":"^3.0.5","@vitejs/plugin-vue":"^1.0.4","@vuedx/typescript-plugin-vue":"^0.4.1"},"_npmOperationalInternal":{"tmp":"tmp/announcer_3.1.0_1611503916058_0.11788130693788523","host":"s3://npm-registry-packages"}},"3.1.1":{"name":"@vue-a11y/announcer","version":"3.1.1","_id":"@vue-a11y/announcer@3.1.1","maintainers":[{"name":"ktquez","email":"ktquez@gmail.com"},{"name":"mlama007","email":"marialamardo@outlook.com"},{"name":"kddeisz","email":"kddnewton+npm@gmail.com"}],"dist":{"shasum":"17a79d0e45ebde38f103cf1003a16d60f3ec9e61","tarball":"https://registry.npmjs.org/@vue-a11y/announcer/-/announcer-3.1.1.tgz","fileCount":39,"integrity":"sha512-IQs3h6yfgHsYjIbsOxMpatQeukEGf6R4s/PPA8yLWsXgXniOse0VNxvLyUtaAPqRRFtLeUU4k6+DfMvd+aPUZw==","signatures":[{"sig":"MEUCIQCeftwdSTR/U6qFNvQdxmpJBWCxbnjwdWa+UObALClAmwIga17bc/MU55cFlpv3b11/c3pZGfZK1c9Qi+sGNpPpUNI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":135711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDaWWCRA9TVsSAnZWagAAJKUP/2sJJcNnwFo6K9PDRNLM\nY9PeqCvuuVj8W7wHBpYE9GQuGBeKrh0iq7q2fMIS3OrmL5MpnMg5k1bb6aPx\nSG/iF6yJ47EqfxcyDQ/jGeLOwA55pYYKG9DfREnoP6ea+5iREZU7OsAO0QwC\nM4LejwEtu+VkPVJiERcCs5ubze+JdMuor7F+RaIhY9TGAQJrqRDSGKj4/+jq\nIQyLxM7uTx623+R1C8/T/g8eodOoT2jfaE0MB7/uQ5yPnN4xcui6LTpD7qgT\nIp2oyvJ9aqIE7bkTrF/Rm/ewzRwaSP3B3+DMUYU0UtAvbXDSvHjhwPUXOxSC\npE+q+JqG5/K617jLiD2dUdnTwIZRH8T5ItY8gYzJ06ATkX1YbIl9I32Z0Ede\nS2sppAgtFPCdBwZmMgs2LUKkJ8pwKbjbTRki8aC5Py/weL/ZWiY3LhrcdVPW\n4AqsJLWusgSWwlZLgV7EautvBM36ncfUY/LWYBk7Xu245YnWSDrxwM9YtOI3\nhZhmk8bHeaPkiZ+LMNfCpBqvwozTfpGf/hapcYM4ndqGqH62A2/ezSRLwSIb\neoafcAjWlL/D0Wo77opDnUbDmQNKCAcrdpQR/qt308FbAxwq2of4Bac0NH0P\n4lzeG3lD/smBBITwhNpnT1HwhAYieN3S2x+lof54aHxnnk4i/rAwiPqjt9wP\nFJhk\r\n=M88T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/announcer.cjs.js","style":"dist/index.css","types":"dist/index.d.ts","unpkg":"dist/announcer.iife.js","module":"dist/announcer.es.js","readme":"# [@vue-a11y/announcer](https://github.com/vue-a11y/vue-announcer/tree/next)\r\n\r\n---\r\n🔥 HEADS UP! You are in the Vue 3 compatible branch, [check the branch for Vue 2 support](https://github.com/vue-a11y/vue-announcer).\r\n\r\n---\r\n\r\n## Introduction\r\n\r\nImagine browsing pages (routes), receiving alerts and notifications, having a countdown timer on the page, a progress bar, a loading or a change of route in a SPA. Now imagine all this happening to people who have visual disabilities and who use screen readers. \r\n\r\nThe [@vue-a11y/announcer@next](https://github.com/vue-a11y/vue-announcer/tree/next) (v3.*) for Vue 3 provides an easy way to really tell what’s going on in your application to people using screen readers.\r\n\r\n## Links\r\n- [Demo](https://vue-announcer.surge.sh/)\r\n- [ARIA live regions](#aria-live-regions)\r\n\r\n## Setup\r\n\r\n### Installation\r\n\r\n```shell\r\nnpm install -S @vue-a11y/announcer@next\r\n# or\r\nyarn add -D @vue-a11y/announcer@next\r\n```\r\n\r\n### Basic usage\r\n\r\nIn your `main.(js|ts)`\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport router from './router'\r\n\r\nimport VueAnnouncer from '@vue-a11y/announcer'\r\nimport '@vue-a11y/announcer/dist/index.css'\r\n\r\ncreateApp(App)\r\n .use(VueAnnouncer)\r\n .use(router)\r\n .mount('#app')\r\n```\r\n\r\nIn your `App.vue`\r\n\r\n```vue\r\n\r\n```\r\n\r\n### Style\r\nYou can import the style via the `@vue-a11y/announcer/dist/index.css` path as in the previous one.\r\n\r\nHowever, if you are using a CSS tool like TailwindCSS or Bootstrap, you don't need to import the @vue-a11y/announcer style, as you just add the `sr-only` class to the component.\r\n\r\n```vue\r\n\r\n```\r\n\r\n## useAnnouncer\r\n\r\nWe provide the Vue composition `useAnnouncer` to announce to a person with a screen reader any information needed, anywhere in your app and in real time.\r\n\r\n### Import\r\n\r\n```js\r\nimport { useAnnouncer } from '@vue-a11y/announcer'\r\n```\r\n\r\n### Usage\r\n\r\n```js\r\nconst { assertive } = useAnnouncer()\r\nassertive('My error notification')\r\n\r\n// or \r\n\r\nconst { polite } = useAnnouncer()\r\npolite('My info notification')\r\n```\r\n\r\n## Option API\r\n\r\nYou can also use `this.$announcer` in your component.\r\n\r\n```js\r\nexport default {\r\n // ...\r\n methods: {\r\n setError() {\r\n this.$announcer.assertive('My notification error')\r\n }\r\n }\r\n}\r\n```\r\n\r\n## Change routeComplement\r\n\r\nIf you need to set the `routeComplement` option dynamically without reloading the application, for example if you're dynamically loading translations, you can use this method to update it.\r\n\r\n### Using Composition API\r\n\r\n```js\r\nexport default {\r\n setup () {\r\n const { setRouteComplement } = useAnnouncer()\r\n \r\n function onTranslationsUpdated (translations) {\r\n /* 'ha cargado' e.g. in spanish */\r\n setRouteComplement(translations.routeComplementKey)\r\n }\r\n // ...\r\n }\r\n}\r\n\r\n```\r\n\r\n### Using Option API\r\n\r\n```js\r\nexport default {\r\n // ...\r\n methods: {\r\n onTranslationsUpdated (translations) {\r\n /* 'Foi carregada' e.g. in portuguese */\r\n this.$announcer.setRouteComplement(translations.routeComplementKey)\r\n }\r\n }\r\n}\r\n```\r\n\r\n## Announce route changes\r\n\r\nFor page changes (routes) to be announced automatically, you only need to pass the router object as a parameter at the time of installation.\r\n\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport router from './router'\r\nimport VueAnnouncer from '@vue-a11y/announcer'\r\nimport '@vue-a11y/announcer/dist/index.css'\r\n\r\ncreateApp(App)\r\n .use(VueAnnouncer, { router })\r\n .use(router)\r\n .mount('#app')\r\n```\r\n### options\r\nKey | Data Type | data | default |\r\n------------------ | ------------- | ---------------------- | ------------ |\r\n`router` | Router | | false |\r\n`message` | String | | '' |\r\n`politeness` | String | polite, assertive, off | `polite` |\r\n`routeComplement` | String | | `has loaded` |\r\n\r\n## Custom announcer (object meta)\r\n\r\nYou can customize the message by defining the announcer on the \"meta\" object for each specific route.\r\n\r\n```js\r\n{\r\n name: 'home',\r\n path: '/',\r\n component: Home,\r\n meta: {\r\n announcer: {\r\n message: 'Página de inicio se'\r\n }\r\n }\r\n}\r\n```\r\n\r\nWhen the page loads, the screen reader user will hear:\r\n\r\n```shell\r\nPágina de inicio se ha cargado.\r\n```\r\n\r\nKey | Data Type | data | default |\r\n------------------ | ---------- | ------------------------- | ----------------------------------- |\r\n`message` | String | | document.title |\r\n`politeness` | String | polite, assertive, off | polite |\r\n`skip` | Boolean | | false |\r\n`routeComplement` | String | | `has loaded` or set at installation |\r\n\r\n### Note\r\n- The plug-in checks whether the message to be announced has been defined in the meta.announcer object, otherwise the document title to be loaded will be announced.\r\n- The `@vue-a11y/announcer@next` uses the global after hooks `router.afterEach` to announce the route changes.\r\n\r\n## Skip in specific route\r\nNecessary for dynamic content pages that require asynchronous data to compose the page title.\r\n\r\nThe skip property on the `meta.announcer` object is used to `skip` the automatic announcement made on the `router.afterEach`, that way you can announce when the asynchronous data is available.\r\n\r\nFor example:\r\n\r\nIn you [`routes.js`](/demo/src/router/routes.ts)\r\n\r\n```js\r\n{\r\n name: 'post',\r\n path: '/posts/:id',\r\n component: Post,\r\n meta: {\r\n announcer: {\r\n skip: true\r\n }\r\n }\r\n}\r\n```\r\n\r\n## ARIA live regions\r\n\r\n\"Using JavaScript, it is possible to dynamically change parts of a page without requiring the entire page to reload — for instance, to update a list of search results on the fly, or to display a discreet alert or notification which does not require user interaction. While these changes are usually visually apparent to users who can see the page, they may not be obvious to users of assistive technologies. ARIA live regions fill this gap and **provide a way to programmatically expose dynamic content changes in a way that can be announced by assistive technologies.**\"\r\n\r\n--- [ARIA live regions - Accessibility | MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)\r\n\r\n## Politeness settings\r\n\r\nYou can use the options `polite`, `assertive` and `off`, if no configuration is defined, the default is `off`.\r\n\r\n### polite\r\nIt is used in most situations that present new information to users. \r\nThe notification will take place at the next available point, without interruptions.\r\n\r\n---\r\nNOTE: `polite` is default\r\n\r\n---\r\n\r\n### assertive\r\nIt is used in situations where the notification is important enough to communicate it immediately, for example, error messages or alerts.\r\n\r\n\r\n```javascript\r\nconst { assertive } = useAnnouncer()\r\nassertive('My error notification')\r\n```\r\n\r\n### off\r\nIs the default and prevent assistive technology from keeping up with changes.\r\n\r\n\r\n### Referencies\r\n\r\n- [ARIA live regions - Accessibility | MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)\r\n- [Using aria-live - Bitsofcode](https://bitsofco.de/using-aria-live/)\r\n\r\n## Browser Testing\r\n\r\nVue Announcer was tested and works as expected in the latest versions of:\r\n\r\n- NVDA (Chrome) ✔️\r\n- ChromeVox (Chrome extension) ✔️\r\n\r\n### To test\r\n\r\n- Android TalkBack\r\n- JAWS\r\n- iOS VoiceOver (Safari)\r\n\r\n## Contributing\r\n- From typos in documentation to coding new features;\r\n- Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;\r\n- Fork repository, make changes and send a pull request;\r\n\r\nFollow us on Twitter [@vue_a11y](https://twitter.com/vue_a11y)\r\n\r\n**Thank you**\r\n","browser":"dist/announcer.es.js","exports":{".":{"import":"./dist/announcer.es.js","require":"./dist/announcer.cjs.js"}},"gitHead":"21c37e8c1bc933e81ce8228d5419a6fd7ce10741","scripts":{"dev":"vite","build":"vuedx-typecheck . && vite build && npm run fixFiles","release":"standard-version","demo:dev":"cd demo && vite","fixFiles":"cp -a src/types/. dist && cp -a dist/@vue-a11y/. dist && rm -rf dist/@vue-a11y","demo:build":"cd demo && vuedx-typecheck . && vite build","demo:publish":"surge ./demo/dist https://vue-announcer.surge.sh/","project:publish":"git push --tags origin next && npm run build && npm publish --tag next"},"_npmUser":{"name":"ktquez","email":"ktquez@gmail.com"},"jsdelivr":"dist/announcer.iife.js","_npmVersion":"6.12.0","description":"---\r 🔥 HEADS UP! You are in the Vue 3 compatible branch, [check the branch for Vue 2 support](https://github.com/vue-a11y/vue-announcer).","directories":{},"_nodeVersion":"12.13.0","dependencies":{"vue":"^3.0.5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vite":"^2.0.0-beta.12","typescript":"^4.1.3","vue-router":"^4.0.3","@types/node":"^14.14.21","@vuedx/typecheck":"^0.6.0","standard-version":"^9.1.0","@vue/compiler-sfc":"^3.0.5","@vitejs/plugin-vue":"^1.0.4","@vuedx/typescript-plugin-vue":"^0.4.1"},"_npmOperationalInternal":{"tmp":"tmp/announcer_3.1.1_1611507093731_0.6159826133366051","host":"s3://npm-registry-packages"}},"3.1.2":{"name":"@vue-a11y/announcer","version":"3.1.2","_id":"@vue-a11y/announcer@3.1.2","maintainers":[{"name":"ktquez","email":"ktquez@gmail.com"},{"name":"mlama007","email":"marialamardo@outlook.com"},{"name":"kddeisz","email":"kddnewton+npm@gmail.com"}],"dist":{"shasum":"b107ea2c268e59343f8e0855065c661ad60de504","tarball":"https://registry.npmjs.org/@vue-a11y/announcer/-/announcer-3.1.2.tgz","fileCount":39,"integrity":"sha512-1RPW9c9cTV+tpvaipBStLBRmGNqAHbR08EiF88hqWx5aoZOzM/R22TDfAmXzu7kamqu7VA9lYQfGYGaa7n7fwQ==","signatures":[{"sig":"MEQCIGvlWhMSeUglv+Uwdd/iNlR6UZi4PHxn1GeBaI8b05WjAiBMvCDxEogTHuZJ0BOBtqnB8v/pv/a+Bc1UndmvCAJm+Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":136030,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDdGcCRA9TVsSAnZWagAA8+IP/0YgSuLHAcPsT6+Aoe1/\nJdSnR/JVgO3Iy05ehDLZGzNcm3nRfTomE8/+MA9r0rsAhBtOtnajOZzrEGfD\n7kOYBIjd3twKUVwr6xEUJbAsqVPK8jQhmdYlUIuOeHwhTld9FV9ROOdivVYd\nrFc0rYvI2pqOItDt4Ra/rFXihd9ZWN3MQFayShzqLyDPVjr02cywzFbrZiVI\nrSE4DCZfDUxyxIAfwEFNYbr7g+JGoqOPHp4bd8Yrpy3CKrbowOiCrsA+yVX0\n9yTomU4OYF6jsQSuk1nQq0FYFquET4yKds6IAWLEXo7mLfPDnk1Zs5D18nIH\n7Y2XHlLnLImhrGsPQWMTQuKaniuzUGTIIdTCM/dCENZgqTokA8y2ATFdHT41\nGVdwGpr04HRR2nuKo5MlY1SjmOhvYV7sT+czr5lVF3sMvDzUy1ec6dGi8zeb\nZuIfk9uQv9sqVQLJkZNKCeXhmCL/qb40Pr5EAY34nnb98Nd3GyUQiBEtNAPM\nxWyhLHLGspfhFyOQ5tn4K//XUASQ6yFW0gWnafQz1NAUR9YnQG18/aLGyv6g\nD0iY333OPipO9QDYCgvjjrMYX0WI3SDfpJ2MuogaTbV9A3Kjf5obvnYN4RHf\n1cClejFEARNK78ebhXZ1f+ij6qpWx4OYc36v6U+Ny0AhDNyzVq0vXcj95kZ+\n97YU\r\n=hlNr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/announcer.cjs.js","style":"dist/index.css","types":"dist/index.d.ts","unpkg":"dist/announcer.iife.js","module":"dist/announcer.es.js","readme":"# [@vue-a11y/announcer](https://github.com/vue-a11y/vue-announcer/tree/next)\r\n\r\n---\r\n🔥 HEADS UP! You are in the Vue 3 compatible branch, [check the branch for Vue 2 support](https://github.com/vue-a11y/vue-announcer).\r\n\r\n---\r\n\r\n## Introduction\r\n\r\nImagine browsing pages (routes), receiving alerts and notifications, having a countdown timer on the page, a progress bar, a loading or a change of route in a SPA. Now imagine all this happening to people who have visual disabilities and who use screen readers. \r\n\r\nThe [@vue-a11y/announcer@next](https://github.com/vue-a11y/vue-announcer/tree/next) (v3.*) for Vue 3 provides an easy way to really tell what’s going on in your application to people using screen readers.\r\n\r\n## Links\r\n- [Demo](https://vue-announcer.surge.sh/)\r\n- [ARIA live regions](#aria-live-regions)\r\n\r\n## Setup\r\n\r\n### Installation\r\n\r\n```shell\r\nnpm install -S @vue-a11y/announcer@next\r\n# or\r\nyarn add -D @vue-a11y/announcer@next\r\n```\r\n\r\n### Basic usage\r\n\r\nIn your `main.(js|ts)`\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport router from './router'\r\n\r\nimport VueAnnouncer from '@vue-a11y/announcer'\r\nimport '@vue-a11y/announcer/dist/index.css'\r\n\r\ncreateApp(App)\r\n .use(VueAnnouncer)\r\n .use(router)\r\n .mount('#app')\r\n```\r\n\r\nIn your `App.vue`\r\n\r\n```vue\r\n\r\n```\r\n\r\n### Style\r\nYou can import the style via the `@vue-a11y/announcer/dist/index.css` path as in the previous one.\r\n\r\nHowever, if you are using a CSS tool like TailwindCSS or Bootstrap, you don't need to import the @vue-a11y/announcer style, as you just add the `sr-only` class to the component.\r\n\r\n```vue\r\n\r\n```\r\n\r\n## useAnnouncer\r\n\r\nWe provide the Vue composition `useAnnouncer` to announce to a person with a screen reader any information needed, anywhere in your app and in real time.\r\n\r\n### Import\r\n\r\n```js\r\nimport { useAnnouncer } from '@vue-a11y/announcer'\r\n```\r\n\r\n### Usage\r\n\r\n```js\r\nconst { assertive } = useAnnouncer()\r\nassertive('My error notification')\r\n\r\n// or \r\n\r\nconst { polite } = useAnnouncer()\r\npolite('My info notification')\r\n```\r\n\r\n## Option API\r\n\r\nYou can also use `this.$announcer` in your component.\r\n\r\n```js\r\nexport default {\r\n // ...\r\n methods: {\r\n setError() {\r\n this.$announcer.assertive('My notification error')\r\n }\r\n }\r\n}\r\n```\r\n\r\n## Change routeComplement\r\n\r\nIf you need to set the `routeComplement` option dynamically without reloading the application, for example if you're dynamically loading translations, you can use this method to update it.\r\n\r\n### Using Composition API\r\n\r\n```js\r\nexport default {\r\n setup () {\r\n const { setRouteComplement } = useAnnouncer()\r\n \r\n function onTranslationsUpdated (translations) {\r\n /* 'ha cargado' e.g. in spanish */\r\n setRouteComplement(translations.routeComplementKey)\r\n }\r\n // ...\r\n }\r\n}\r\n\r\n```\r\n\r\n### Using Option API\r\n\r\n```js\r\nexport default {\r\n // ...\r\n methods: {\r\n onTranslationsUpdated (translations) {\r\n /* 'Foi carregada' e.g. in portuguese */\r\n this.$announcer.setRouteComplement(translations.routeComplementKey)\r\n }\r\n }\r\n}\r\n```\r\n\r\n## Announce route changes\r\n\r\nFor page changes (routes) to be announced automatically, you only need to pass the router object as a parameter at the time of installation.\r\n\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport router from './router'\r\nimport VueAnnouncer from '@vue-a11y/announcer'\r\nimport '@vue-a11y/announcer/dist/index.css'\r\n\r\ncreateApp(App)\r\n .use(VueAnnouncer, { router })\r\n .use(router)\r\n .mount('#app')\r\n```\r\n### options\r\nKey | Data Type | data | default |\r\n------------------ | ------------- | ---------------------- | ------------ |\r\n`router` | Router | | false |\r\n`message` | String | | '' |\r\n`politeness` | String | polite, assertive, off | `polite` |\r\n`routeComplement` | String | | `has loaded` |\r\n\r\n## Custom announcer (object meta)\r\n\r\nYou can customize the message by defining the announcer on the \"meta\" object for each specific route.\r\n\r\n```js\r\n{\r\n name: 'home',\r\n path: '/',\r\n component: Home,\r\n meta: {\r\n announcer: {\r\n message: 'Página de inicio se'\r\n }\r\n }\r\n}\r\n```\r\n\r\nWhen the page loads, the screen reader user will hear:\r\n\r\n```shell\r\nPágina de inicio se ha cargado.\r\n```\r\n\r\nKey | Data Type | data | default |\r\n------------------ | ---------- | ------------------------- | ----------------------------------- |\r\n`message` | String | | document.title |\r\n`politeness` | String | polite, assertive, off | polite |\r\n`skip` | Boolean | | false |\r\n`routeComplement` | String | | `has loaded` or set at installation |\r\n\r\n### Note\r\n- The plug-in checks whether the message to be announced has been defined in the meta.announcer object, otherwise the document title to be loaded will be announced.\r\n- The `@vue-a11y/announcer@next` uses the global after hooks `router.afterEach` to announce the route changes.\r\n\r\n## Skip in specific route\r\nNecessary for dynamic content pages that require asynchronous data to compose the page title.\r\n\r\nThe skip property on the `meta.announcer` object is used to `skip` the automatic announcement made on the `router.afterEach`, that way you can announce when the asynchronous data is available.\r\n\r\nFor example:\r\n\r\nIn you [`routes.js`](/demo/src/router/routes.ts)\r\n\r\n```js\r\n{\r\n name: 'post',\r\n path: '/posts/:id',\r\n component: Post,\r\n meta: {\r\n announcer: {\r\n skip: true\r\n }\r\n }\r\n}\r\n```\r\n\r\n## ARIA live regions\r\n\r\n\"Using JavaScript, it is possible to dynamically change parts of a page without requiring the entire page to reload — for instance, to update a list of search results on the fly, or to display a discreet alert or notification which does not require user interaction. While these changes are usually visually apparent to users who can see the page, they may not be obvious to users of assistive technologies. ARIA live regions fill this gap and **provide a way to programmatically expose dynamic content changes in a way that can be announced by assistive technologies.**\"\r\n\r\n--- [ARIA live regions - Accessibility | MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)\r\n\r\n## Politeness settings\r\n\r\nYou can use the options `polite`, `assertive` and `off`, if no configuration is defined, the default is `off`.\r\n\r\n### polite\r\nIt is used in most situations that present new information to users. \r\nThe notification will take place at the next available point, without interruptions.\r\n\r\n---\r\nNOTE: `polite` is default\r\n\r\n---\r\n\r\n### assertive\r\nIt is used in situations where the notification is important enough to communicate it immediately, for example, error messages or alerts.\r\n\r\n\r\n```javascript\r\nconst { assertive } = useAnnouncer()\r\nassertive('My error notification')\r\n```\r\n\r\n### off\r\nIs the default and prevent assistive technology from keeping up with changes.\r\n\r\n\r\n### Referencies\r\n\r\n- [ARIA live regions - Accessibility | MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)\r\n- [Using aria-live - Bitsofcode](https://bitsofco.de/using-aria-live/)\r\n\r\n## Browser Testing\r\n\r\nVue Announcer was tested and works as expected in the latest versions of:\r\n\r\n- NVDA (Chrome) ✔️\r\n- ChromeVox (Chrome extension) ✔️\r\n\r\n### To test\r\n\r\n- Android TalkBack\r\n- JAWS\r\n- iOS VoiceOver (Safari)\r\n\r\n## Contributing\r\n- From typos in documentation to coding new features;\r\n- Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;\r\n- Fork repository, make changes and send a pull request;\r\n\r\nFollow us on Twitter [@vue_a11y](https://twitter.com/vue_a11y)\r\n\r\n**Thank you**\r\n","browser":"dist/announcer.es.js","exports":{".":{"import":"./dist/announcer.es.js","require":"./dist/announcer.cjs.js"}},"gitHead":"e4c3b2af18f69a370bdc3b8f216c3f14588d60cd","scripts":{"dev":"vite","build":"vuedx-typecheck . && vite build && npm run fixFiles","release":"standard-version","demo:dev":"cd demo && vite","fixFiles":"cp -a src/types/. dist && cp -a dist/@vue-a11y/. dist && rm -rf dist/@vue-a11y","demo:build":"cd demo && vuedx-typecheck . && vite build","demo:publish":"surge ./demo/dist https://vue-announcer.surge.sh/","project:publish":"git push --tags origin next && npm run build && npm publish --tag next"},"_npmUser":{"name":"ktquez","email":"ktquez@gmail.com"},"jsdelivr":"dist/announcer.iife.js","_npmVersion":"6.12.0","description":"---\r 🔥 HEADS UP! You are in the Vue 3 compatible branch, [check the branch for Vue 2 support](https://github.com/vue-a11y/vue-announcer).","directories":{},"_nodeVersion":"12.13.0","dependencies":{"vue":"^3.0.5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vite":"^2.0.0-beta.12","typescript":"^4.1.3","vue-router":"^4.0.3","@types/node":"^14.14.21","@vuedx/typecheck":"^0.6.0","standard-version":"^9.1.0","@vue/compiler-sfc":"^3.0.5","@vitejs/plugin-vue":"^1.0.4","@vuedx/typescript-plugin-vue":"^0.4.1"},"_npmOperationalInternal":{"tmp":"tmp/announcer_3.1.2_1611518364016_0.9918281681550001","host":"s3://npm-registry-packages"}},"3.1.3":{"name":"@vue-a11y/announcer","version":"3.1.3","_id":"@vue-a11y/announcer@3.1.3","maintainers":[{"name":"ktquez","email":"ktquez@gmail.com"},{"name":"mlama007","email":"marialamardo@outlook.com"},{"name":"kddeisz","email":"kddnewton+npm@gmail.com"}],"dist":{"shasum":"415e9aac1a3e51b5423eb9fff822833dd7fe0a72","tarball":"https://registry.npmjs.org/@vue-a11y/announcer/-/announcer-3.1.3.tgz","fileCount":22,"integrity":"sha512-MAwVxrJekpMwwbq/+WJwOIcwV+hBNrfJfdLxZW4l8MljeIsLXbFh7OGlJTQIXxso9SGLJE+dKRJ+ZOCHQwsXxg==","signatures":[{"sig":"MEMCHxwCl7iKTh87HwwLn2KNxZ6gU7puAHKfrl3FJmgazqQCIGWzm++yN5oJza8/97cgaibtBTbzbkuTOklI3RW9SjR2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30906,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbwz8CRA9TVsSAnZWagAA3n4QAIpbM50cEdRkxxE2MtOx\nBc/kSVzqTYRqjGu94E4rueordCwOXbbE/2XmDki37V25sQQ3d1RJXcNDS08/\nSrzIsbUTRDixhzVEebNA+PkP3RoJHJ9HKbuMOhv6dsRHmFBoxQDwXnjgcSmT\ndQc+WBgzzG61b6THtyG7ceFFz9544cQM7EEGpnptaNW5x6ByuI/5yvmpEwWq\nr1aVFQPfQajz/w3IQOqLE6QkeUj0G3e3aGb3J/fd6wxyBI0TThtaZFaxL4CG\nciaQu7N5mC0pFmxnRlIvIhobuglYQkGuoYXtNalciUzswRHAhEjzM4bvTruW\nRAuiGJpr1fnFlTj3+FGg8tl0S6LAQKwJD9utftGnPOHM76i5xaA4/X98k3gX\nRgkCHHPom+9/MoUjGayzd8CYJAtkLCZiSxnMs8BhYZTvuCPozLj0dYt9VFBB\nmZJn8U0mXQXC/t94tKUKGwJTGUlNGUo00tCOa4ePEc5DIhD+BWjDm7nJDJ2+\nLkMJjp6BzF8wxX4NRqZC18ShGeTdXyC0W/ZZS4Czq1lAmYTkae8unyt3usP8\nq552iC0qWOnFmMY5XFJmutLB2F3Li79rqwmjgcP/6d6FR3bMJewIQEknAbII\nBDSVpSIotmwMbZNwxuqEd3pBtb1HWegYgh6zYURUOQZ3WBKQtzlZpOBxaIBv\n/elW\r\n=KKq5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/announcer.cjs.js","style":"dist/style.css","types":"dist/index.d.ts","unpkg":"dist/announcer.iife.js","module":"dist/announcer.es.js","readme":"# [@vue-a11y/announcer](https://github.com/vue-a11y/vue-announcer/tree/next)\r\n\r\n---\r\n🔥 HEADS UP! You are in the Vue 3 compatible branch, [check the branch for Vue 2 support](https://github.com/vue-a11y/vue-announcer).\r\n\r\n---\r\n\r\n## Introduction\r\n\r\nImagine browsing pages (routes), receiving alerts and notifications, having a countdown timer on the page, a progress bar, a loading or a change of route in a SPA. Now imagine all this happening to people who have visual disabilities and who use screen readers. \r\n\r\nThe [@vue-a11y/announcer@next](https://github.com/vue-a11y/vue-announcer/tree/next) (v3.*) for Vue 3 provides an easy way to really tell what’s going on in your application to people using screen readers.\r\n\r\n## Links\r\n- [Demo](https://vue-announcer.surge.sh/)\r\n- [ARIA live regions](#aria-live-regions)\r\n\r\n## Setup\r\n\r\n### Installation\r\n\r\n```shell\r\nnpm install -S @vue-a11y/announcer@next\r\n# or\r\nyarn add -D @vue-a11y/announcer@next\r\n```\r\n\r\n### Basic usage\r\n\r\nIn your `main.(js|ts)`\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport router from './router'\r\n\r\nimport VueAnnouncer from '@vue-a11y/announcer'\r\nimport '@vue-a11y/announcer/dist/index.css'\r\n\r\ncreateApp(App)\r\n .use(VueAnnouncer)\r\n .use(router)\r\n .mount('#app')\r\n```\r\n\r\nIn your `App.vue`\r\n\r\n```vue\r\n\r\n```\r\n\r\n### Style\r\nYou can import the style via the `@vue-a11y/announcer/dist/index.css` path as in the previous one.\r\n\r\nHowever, if you are using a CSS tool like TailwindCSS or Bootstrap, you don't need to import the @vue-a11y/announcer style, as you just add the `sr-only` class to the component.\r\n\r\n```vue\r\n\r\n```\r\n\r\n## useAnnouncer\r\n\r\nWe provide the Vue composition `useAnnouncer` to announce to a person with a screen reader any information needed, anywhere in your app and in real time.\r\n\r\n### Import\r\n\r\n```js\r\nimport { useAnnouncer } from '@vue-a11y/announcer'\r\n```\r\n\r\n### Usage\r\n\r\n```js\r\nconst { assertive } = useAnnouncer()\r\nassertive('My error notification')\r\n\r\n// or \r\n\r\nconst { polite } = useAnnouncer()\r\npolite('My info notification')\r\n```\r\n\r\n## Option API\r\n\r\nYou can also use `this.$announcer` in your component.\r\n\r\n```js\r\nexport default {\r\n // ...\r\n methods: {\r\n setError() {\r\n this.$announcer.assertive('My notification error')\r\n }\r\n }\r\n}\r\n```\r\n\r\n## Change routeComplement\r\n\r\nIf you need to set the `routeComplement` option dynamically without reloading the application, for example if you're dynamically loading translations, you can use this method to update it.\r\n\r\n### Using Composition API\r\n\r\n```js\r\nexport default {\r\n setup () {\r\n const { setRouteComplement } = useAnnouncer()\r\n \r\n function onTranslationsUpdated (translations) {\r\n /* 'ha cargado' e.g. in spanish */\r\n setRouteComplement(translations.routeComplementKey)\r\n }\r\n // ...\r\n }\r\n}\r\n\r\n```\r\n\r\n### Using Option API\r\n\r\n```js\r\nexport default {\r\n // ...\r\n methods: {\r\n onTranslationsUpdated (translations) {\r\n /* 'Foi carregada' e.g. in portuguese */\r\n this.$announcer.setRouteComplement(translations.routeComplementKey)\r\n }\r\n }\r\n}\r\n```\r\n\r\n## Announce route changes\r\n\r\nFor page changes (routes) to be announced automatically, you only need to pass the router object as a parameter at the time of installation.\r\n\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport router from './router'\r\nimport VueAnnouncer from '@vue-a11y/announcer'\r\nimport '@vue-a11y/announcer/dist/index.css'\r\n\r\ncreateApp(App)\r\n .use(VueAnnouncer, { router })\r\n .use(router)\r\n .mount('#app')\r\n```\r\n### options\r\nKey | Data Type | data | default |\r\n------------------ | ------------- | ---------------------- | ------------ |\r\n`router` | Router | | false |\r\n`message` | String | | '' |\r\n`politeness` | String | polite, assertive, off | `polite` |\r\n`routeComplement` | String | | `has loaded` |\r\n\r\n## Custom announcer (object meta)\r\n\r\nYou can customize the message by defining the announcer on the \"meta\" object for each specific route.\r\n\r\n```js\r\n{\r\n name: 'home',\r\n path: '/',\r\n component: Home,\r\n meta: {\r\n announcer: {\r\n message: 'Página de inicio se'\r\n }\r\n }\r\n}\r\n```\r\n\r\nWhen the page loads, the screen reader user will hear:\r\n\r\n```shell\r\nPágina de inicio se ha cargado.\r\n```\r\n\r\nKey | Data Type | data | default |\r\n------------------ | ---------- | ------------------------- | ----------------------------------- |\r\n`message` | String | | document.title |\r\n`politeness` | String | polite, assertive, off | polite |\r\n`skip` | Boolean | | false |\r\n`routeComplement` | String | | `has loaded` or set at installation |\r\n\r\n### Note\r\n- The plug-in checks whether the message to be announced has been defined in the meta.announcer object, otherwise the document title to be loaded will be announced.\r\n- The `@vue-a11y/announcer@next` uses the global after hooks `router.afterEach` to announce the route changes.\r\n\r\n## Skip in specific route\r\nNecessary for dynamic content pages that require asynchronous data to compose the page title.\r\n\r\nThe skip property on the `meta.announcer` object is used to `skip` the automatic announcement made on the `router.afterEach`, that way you can announce when the asynchronous data is available.\r\n\r\nFor example:\r\n\r\nIn you [`routes.js`](/demo/src/router/routes.ts)\r\n\r\n```js\r\n{\r\n name: 'post',\r\n path: '/posts/:id',\r\n component: Post,\r\n meta: {\r\n announcer: {\r\n skip: true\r\n }\r\n }\r\n}\r\n```\r\n\r\n## ARIA live regions\r\n\r\n\"Using JavaScript, it is possible to dynamically change parts of a page without requiring the entire page to reload — for instance, to update a list of search results on the fly, or to display a discreet alert or notification which does not require user interaction. While these changes are usually visually apparent to users who can see the page, they may not be obvious to users of assistive technologies. ARIA live regions fill this gap and **provide a way to programmatically expose dynamic content changes in a way that can be announced by assistive technologies.**\"\r\n\r\n--- [ARIA live regions - Accessibility | MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)\r\n\r\n## Politeness settings\r\n\r\nYou can use the options `polite`, `assertive` and `off`, if no configuration is defined, the default is `off`.\r\n\r\n### polite\r\nIt is used in most situations that present new information to users. \r\nThe notification will take place at the next available point, without interruptions.\r\n\r\n---\r\nNOTE: `polite` is default\r\n\r\n---\r\n\r\n### assertive\r\nIt is used in situations where the notification is important enough to communicate it immediately, for example, error messages or alerts.\r\n\r\n\r\n```javascript\r\nconst { assertive } = useAnnouncer()\r\nassertive('My error notification')\r\n```\r\n\r\n### off\r\nIs the default and prevent assistive technology from keeping up with changes.\r\n\r\n\r\n### Referencies\r\n\r\n- [ARIA live regions - Accessibility | MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)\r\n- [Using aria-live - Bitsofcode](https://bitsofco.de/using-aria-live/)\r\n\r\n## Browser Testing\r\n\r\nVue Announcer was tested and works as expected in the latest versions of:\r\n\r\n- NVDA (Chrome) ✔️\r\n- ChromeVox (Chrome extension) ✔️\r\n\r\n### To test\r\n\r\n- Android TalkBack\r\n- JAWS\r\n- iOS VoiceOver (Safari)\r\n\r\n## Contributing\r\n- From typos in documentation to coding new features;\r\n- Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;\r\n- Fork repository, make changes and send a pull request;\r\n\r\nFollow us on Twitter [@vue_a11y](https://twitter.com/vue_a11y)\r\n\r\n**Thank you**\r\n","browser":"dist/announcer.es.js","gitHead":"ef7ba12b311a6c13d789846088110569274d4b5e","scripts":{"dev":"vite","build":"npm-run-all -s clean build:*","clean":"rm -rf dist","release":"standard-version","demo:dev":"cd demo && vite","build:vite":"vue-tsc --noEmit && vite build","demo:build":"cd demo && yarn build:vite","build:types":"tsc --emitDeclarationOnly","demo:publish":"surge ./demo/dist https://vue-announcer.surge.sh/","project:publish":"git push --tags origin next && yarn build && npm publish --access public --tag next"},"_npmUser":{"name":"ktquez","email":"ktquez@gmail.com"},"jsdelivr":"dist/announcer.iife.js","_npmVersion":"6.14.10","description":"---\r 🔥 HEADS UP! You are in the Vue 3 compatible branch, [check the branch for Vue 2 support](https://github.com/vue-a11y/vue-announcer).","directories":{},"_nodeVersion":"14.15.4","dependencies":{"vue":"^3.0.11"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vite":"^2.1.5","vue-tsc":"^0.0.21","typescript":"^4.1.3","vue-router":"^4.0.6","@types/node":"^14.14.21","npm-run-all":"^4.1.5","standard-version":"^9.1.0","@vue/compiler-sfc":"^3.0.11","@vitejs/plugin-vue":"^1.2.1"},"_npmOperationalInternal":{"tmp":"tmp/announcer_3.1.3_1617890556309_0.7033301724603171","host":"s3://npm-registry-packages"}},"3.1.4":{"name":"@vue-a11y/announcer","version":"3.1.4","_id":"@vue-a11y/announcer@3.1.4","maintainers":[{"name":"ktquez","email":"ktquez@gmail.com"},{"name":"mlama007","email":"marialamardo@outlook.com"},{"name":"kddeisz","email":"kddnewton+npm@gmail.com"}],"dist":{"shasum":"dd54332c636e4d1bcabe5d297c69e01e8533a602","tarball":"https://registry.npmjs.org/@vue-a11y/announcer/-/announcer-3.1.4.tgz","fileCount":22,"integrity":"sha512-kwu3Tm5AP0HEw1hy+0U+rbZHrI4cOtLyM+OGpkIUXKap5CdmTCY1Bc21VUzMfgguDdNl/AG/DspNcJezzPjqGg==","signatures":[{"sig":"MEQCIGTA6HOxdU8u4BNQ3MgKX62Fj/rUts5AVtocvZxCoeSHAiAj0Ag7+UDHEij9oukctxXP4wewP/4qEtvp3bQ8a+tvdw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30996,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbw5/CRA9TVsSAnZWagAAZsAP/jdpSMZ1GZH04OupX8IY\nrjDy2d7g4B62eA1ZLB867LCN8jPNnWlRVfiylrHA6hYytNPZ23dK01y3bVjq\n/8gRdeI8lpy4wfns11ZKKx704s2ATOIv2jCQ/lCiNmkKIjXyqUtpnNuTZ1KT\nyUpA8I87xNXumpRKijBWCef+H9aZtYXcv25DDQZUJXUlDcELVp0Bo4Gxcf0G\nBS4SRwnQeKOt+rxFYM4+0yMTzI7xgTWidb227ztp5aVpFRGbFyEVkxl46bKJ\nx8Cm+vrN9mFcCDuf5G6F/BLkfPeHA1klVbLyQK1vbtP8iP5l3OPnhioXQvc3\nf/dt7TqFpFa9GpML4ph31qMvTsnKIZA0fDeTm3ZID0YvuJIg5bxVvo+Dtqgt\nTJiLrdEATMvZPQ9yTn+L+VrGgpMs7Byd4LzHpt2ya/PHR6PLu3o2GxwJyXzb\nFK5sQABm/0hZWsBimVBw47+AJk0OSeDdhV9dRVd5Q8h1clctYwI+QVcUwjUF\nZuD/dv5sxpLT1nkMpQ1tj4Q/rqNuRWOh7jaYprPIHXDJPkefns/ISsddzhPe\nWFcipY+ARmzqea2qILLDbsOVhSkYV1M01WFDW+pL1znQ5yf9eJfoOGk3r2PY\nxjAWXnQjgwEC/GD+/29kGH5zewMOOwNGdcesZwBmW9p2kNyr8Ual/BAbvSC+\nPlnz\r\n=3IUf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/announcer.cjs.js","style":"dist/style.css","types":"dist/index.d.ts","unpkg":"dist/announcer.iife.js","module":"dist/announcer.es.js","readme":"# [@vue-a11y/announcer](https://github.com/vue-a11y/vue-announcer/tree/next)\r\n\r\n---\r\n🔥 HEADS UP! You are in the Vue 3 compatible branch, [check the branch for Vue 2 support](https://github.com/vue-a11y/vue-announcer).\r\n\r\n---\r\n\r\n## Introduction\r\n\r\nImagine browsing pages (routes), receiving alerts and notifications, having a countdown timer on the page, a progress bar, a loading or a change of route in a SPA. Now imagine all this happening to people who have visual disabilities and who use screen readers. \r\n\r\nThe [@vue-a11y/announcer@next](https://github.com/vue-a11y/vue-announcer/tree/next) (v3.*) for Vue 3 provides an easy way to really tell what’s going on in your application to people using screen readers.\r\n\r\n## Links\r\n- [Demo](https://vue-announcer.surge.sh/)\r\n- [ARIA live regions](#aria-live-regions)\r\n\r\n## Setup\r\n\r\n### Installation\r\n\r\n```shell\r\nnpm install -S @vue-a11y/announcer@next\r\n# or\r\nyarn add @vue-a11y/announcer@next\r\n```\r\n\r\n### Basic usage\r\n\r\nIn your `main.(js|ts)`\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport router from './router'\r\n\r\nimport VueAnnouncer from '@vue-a11y/announcer'\r\nimport '@vue-a11y/announcer/dist/style.css'\r\n\r\ncreateApp(App)\r\n .use(VueAnnouncer)\r\n .use(router)\r\n .mount('#app')\r\n```\r\n\r\nIn your `App.vue`\r\n\r\n```vue\r\n\r\n```\r\n\r\n### Style\r\nYou can import the style via the `@vue-a11y/announcer/dist/index.css` path as in the previous one.\r\n\r\nHowever, if you are using a CSS tool like TailwindCSS or Bootstrap, you don't need to import the @vue-a11y/announcer style, as you just add the `sr-only` class to the component.\r\n\r\n```vue\r\n\r\n```\r\n\r\n## useAnnouncer\r\n\r\nWe provide the Vue composition `useAnnouncer` to announce to a person with a screen reader any information needed, anywhere in your app and in real time.\r\n\r\n### Import\r\n\r\n```js\r\nimport { useAnnouncer } from '@vue-a11y/announcer'\r\n```\r\n\r\n### Usage\r\n\r\n```js\r\nconst { assertive } = useAnnouncer()\r\nassertive('My error notification')\r\n\r\n// or \r\n\r\nconst { polite } = useAnnouncer()\r\npolite('My info notification')\r\n```\r\n\r\n## Option API\r\n\r\nYou can also use `this.$announcer` in your component.\r\n\r\n```js\r\nexport default {\r\n // ...\r\n methods: {\r\n setError() {\r\n this.$announcer.assertive('My notification error')\r\n }\r\n }\r\n}\r\n```\r\n\r\n## Change routeComplement\r\n\r\nIf you need to set the `routeComplement` option dynamically without reloading the application, for example if you're dynamically loading translations, you can use this method to update it.\r\n\r\n### Using Composition API\r\n\r\n```js\r\nexport default {\r\n setup () {\r\n const { setRouteComplement } = useAnnouncer()\r\n \r\n function onTranslationsUpdated (translations) {\r\n /* 'ha cargado' e.g. in spanish */\r\n setRouteComplement(translations.routeComplementKey)\r\n }\r\n // ...\r\n }\r\n}\r\n\r\n```\r\n\r\n### Using Option API\r\n\r\n```js\r\nexport default {\r\n // ...\r\n methods: {\r\n onTranslationsUpdated (translations) {\r\n /* 'Foi carregada' e.g. in portuguese */\r\n this.$announcer.setRouteComplement(translations.routeComplementKey)\r\n }\r\n }\r\n}\r\n```\r\n\r\n## Announce route changes\r\n\r\nFor page changes (routes) to be announced automatically, you only need to pass the router object as a parameter at the time of installation.\r\n\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport router from './router'\r\nimport VueAnnouncer from '@vue-a11y/announcer'\r\nimport '@vue-a11y/announcer/dist/index.css'\r\n\r\ncreateApp(App)\r\n .use(VueAnnouncer, { router })\r\n .use(router)\r\n .mount('#app')\r\n```\r\n### options\r\nKey | Data Type | data | default |\r\n------------------ | ------------- | ---------------------- | ------------ |\r\n`router` | Router | | false |\r\n`message` | String | | '' |\r\n`politeness` | String | polite, assertive, off | `polite` |\r\n`routeComplement` | String | | `has loaded` |\r\n\r\n## Custom announcer (object meta)\r\n\r\nYou can customize the message by defining the announcer on the \"meta\" object for each specific route.\r\n\r\n```js\r\n{\r\n name: 'home',\r\n path: '/',\r\n component: Home,\r\n meta: {\r\n announcer: {\r\n message: 'Página de inicio se'\r\n }\r\n }\r\n}\r\n```\r\n\r\nWhen the page loads, the screen reader user will hear:\r\n\r\n```shell\r\nPágina de inicio se ha cargado.\r\n```\r\n\r\nKey | Data Type | data | default |\r\n------------------ | ---------- | ------------------------- | ----------------------------------- |\r\n`message` | String | | document.title |\r\n`politeness` | String | polite, assertive, off | polite |\r\n`skip` | Boolean | | false |\r\n`routeComplement` | String | | `has loaded` or set at installation |\r\n\r\n### Note\r\n- The plug-in checks whether the message to be announced has been defined in the meta.announcer object, otherwise the document title to be loaded will be announced.\r\n- The `@vue-a11y/announcer@next` uses the global after hooks `router.afterEach` to announce the route changes.\r\n\r\n## Skip in specific route\r\nNecessary for dynamic content pages that require asynchronous data to compose the page title.\r\n\r\nThe skip property on the `meta.announcer` object is used to `skip` the automatic announcement made on the `router.afterEach`, that way you can announce when the asynchronous data is available.\r\n\r\nFor example:\r\n\r\nIn you [`routes.js`](/demo/src/router/routes.ts)\r\n\r\n```js\r\n{\r\n name: 'post',\r\n path: '/posts/:id',\r\n component: Post,\r\n meta: {\r\n announcer: {\r\n skip: true\r\n }\r\n }\r\n}\r\n```\r\n\r\n## ARIA live regions\r\n\r\n\"Using JavaScript, it is possible to dynamically change parts of a page without requiring the entire page to reload — for instance, to update a list of search results on the fly, or to display a discreet alert or notification which does not require user interaction. While these changes are usually visually apparent to users who can see the page, they may not be obvious to users of assistive technologies. ARIA live regions fill this gap and **provide a way to programmatically expose dynamic content changes in a way that can be announced by assistive technologies.**\"\r\n\r\n--- [ARIA live regions - Accessibility | MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)\r\n\r\n## Politeness settings\r\n\r\nYou can use the options `polite`, `assertive` and `off`, if no configuration is defined, the default is `off`.\r\n\r\n### polite\r\nIt is used in most situations that present new information to users. \r\nThe notification will take place at the next available point, without interruptions.\r\n\r\n---\r\nNOTE: `polite` is default\r\n\r\n---\r\n\r\n### assertive\r\nIt is used in situations where the notification is important enough to communicate it immediately, for example, error messages or alerts.\r\n\r\n\r\n```javascript\r\nconst { assertive } = useAnnouncer()\r\nassertive('My error notification')\r\n```\r\n\r\n### off\r\nIs the default and prevent assistive technology from keeping up with changes.\r\n\r\n\r\n### Referencies\r\n\r\n- [ARIA live regions - Accessibility | MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)\r\n- [Using aria-live - Bitsofcode](https://bitsofco.de/using-aria-live/)\r\n\r\n## Browser Testing\r\n\r\nVue Announcer was tested and works as expected in the latest versions of:\r\n\r\n- NVDA (Chrome) ✔️\r\n- ChromeVox (Chrome extension) ✔️\r\n\r\n### To test\r\n\r\n- Android TalkBack\r\n- JAWS\r\n- iOS VoiceOver (Safari)\r\n\r\n## Contributing\r\n- From typos in documentation to coding new features;\r\n- Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;\r\n- Fork repository, make changes and send a pull request;\r\n\r\nFollow us on Twitter [@vue_a11y](https://twitter.com/vue_a11y)\r\n\r\n**Thank you**\r\n","browser":"dist/announcer.es.js","gitHead":"71ef09a1e937d25e5042797906d98af7414d6392","scripts":{"dev":"vite","build":"npm-run-all -s clean build:*","clean":"rm -rf dist","release":"standard-version","demo:dev":"cd demo && vite","build:vite":"vue-tsc --noEmit && vite build","demo:build":"cd demo && yarn build:vite","build:types":"tsc --emitDeclarationOnly","demo:publish":"surge ./demo/dist https://vue-announcer.surge.sh/","project:publish":"git push --tags origin next && yarn build && npm publish --access public --tag next"},"_npmUser":{"name":"ktquez","email":"ktquez@gmail.com"},"jsdelivr":"dist/announcer.iife.js","_npmVersion":"6.14.10","description":"---\r 🔥 HEADS UP! You are in the Vue 3 compatible branch, [check the branch for Vue 2 support](https://github.com/vue-a11y/vue-announcer).","directories":{},"_nodeVersion":"14.15.4","dependencies":{"vue":"^3.0.11"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vite":"^2.1.5","vue-tsc":"^0.0.21","typescript":"^4.1.3","vue-router":"^4.0.6","@types/node":"^14.14.21","npm-run-all":"^4.1.5","standard-version":"^9.1.0","@vue/compiler-sfc":"^3.0.11","@vitejs/plugin-vue":"^1.2.1"},"_npmOperationalInternal":{"tmp":"tmp/announcer_3.1.4_1617890942806_0.6880548826544262","host":"s3://npm-registry-packages"}},"3.1.5":{"name":"@vue-a11y/announcer","version":"3.1.5","_id":"@vue-a11y/announcer@3.1.5","maintainers":[{"name":"ktquez","email":"ktquez@gmail.com"},{"name":"mlama007","email":"marialamardo@outlook.com"},{"name":"kddeisz","email":"kddnewton+npm@gmail.com"}],"dist":{"shasum":"aab9e8bb7faddac69f6e8e68ab3017fb2621fd46","tarball":"https://registry.npmjs.org/@vue-a11y/announcer/-/announcer-3.1.5.tgz","fileCount":22,"integrity":"sha512-eBL5b2cAjvXNGPvakrpNIj1navG1nA3jFF7z5DXrQLLYyWFjtcjdO2w8AHn7WEafU68jRNYEubP7Mv0h0WhgUQ==","signatures":[{"sig":"MEYCIQCeTG+IvGerC/geqmj/DPImDKBB0UbHiJCsQ3bf7DIfrwIhAPcVIwVrBklaytRcONVrS+ny9D6OrZaS2klWK1hGsJzN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":31238,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8DysCRA9TVsSAnZWagAAzbEQAIdTbGLln2fAndMg63FW\ncR00HleAAFqyCm5Q8RFnW7Z+HjOY2FaiOAsIIL+0OzrqKVLH8cdF+bMWBdsA\nN5MeeBi/qoXOSZi92o2QhFMJsPFqKERSvI/p6MD46ZjExO9aN8vLqtwAGyZ3\nTDQRFgAlV4HgTsSNzk2uCEi0SwDS2IUkiZP4x+uQ1UF295qUpv/eu7zRv8PC\nJCB6Y9r5aC9IPEMHn2Xy+jo2Mll5eWsjlyAHgN1dqsj1Nw+F2qihyKAPOWlf\nirBaNyvYkvFZ3zc71879+b9KRSOkliThW5VIvzY5HvmuFHPqbfFx392nal/w\nmD559UCNQRjwp9GqPxJMdUgM0kH/rVfkE9+7Ks63f7iy1S9W4/jMYYtA8nCV\npBbLCz1JEzemtKTE2HgaKHShF7A2Rdgo71Do5Aa5s5RSnhJxrHg4TW+666xt\nYX0HLBPSudt3gqfSv1s542FG9eOToq3JjZH7pG5PfCPkXzjrrtm01SeCyVKF\nfVI4QFXI2fZ9sTwXlUEwIroua1ZqZr4ttEHrOWrw7gFkXbnNCJx/do/H6ZRq\nzSAPbEhvWVH2aAsV8V5OxJzQeJwbuIuAP5o7/yLjPWO1B/jUCRRpS282Om7r\nNLNAy/3IbdiMqqS0kPHR44UWiIO+6hLQagq5wTP2tyVdpXds6XYDu9jUDtsC\ntRJr\r\n=vXUK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/announcer.cjs.js","style":"dist/style.css","types":"dist/index.d.ts","unpkg":"dist/announcer.iife.js","module":"dist/announcer.es.js","readme":"# [@vue-a11y/announcer](https://github.com/vue-a11y/vue-announcer/tree/next)\r\n\r\n---\r\n🔥 HEADS UP! You are in the Vue 3 compatible branch, [check the branch for Vue 2 support](https://github.com/vue-a11y/vue-announcer).\r\n\r\n---\r\n\r\n## Introduction\r\n\r\nImagine browsing pages (routes), receiving alerts and notifications, having a countdown timer on the page, a progress bar, a loading or a change of route in a SPA. Now imagine all this happening to people who have visual disabilities and who use screen readers. \r\n\r\nThe [@vue-a11y/announcer@next](https://github.com/vue-a11y/vue-announcer/tree/next) (v3.*) for Vue 3 provides an easy way to really tell what’s going on in your application to people using screen readers.\r\n\r\n## Links\r\n- [Demo](https://vue-announcer.surge.sh/)\r\n- [ARIA live regions](#aria-live-regions)\r\n\r\n## Setup\r\n\r\n### Installation\r\n\r\n```shell\r\nnpm install -S @vue-a11y/announcer@next\r\n# or\r\nyarn add @vue-a11y/announcer@next\r\n```\r\n\r\n### Basic usage\r\n\r\nIn your `main.(js|ts)`\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport router from './router'\r\n\r\nimport VueAnnouncer from '@vue-a11y/announcer'\r\nimport '@vue-a11y/announcer/dist/style.css'\r\n\r\ncreateApp(App)\r\n .use(VueAnnouncer)\r\n .use(router)\r\n .mount('#app')\r\n```\r\n\r\nIn your `App.vue`\r\n\r\n```vue\r\n\r\n```\r\n\r\n### Style\r\nYou can import the style via the `@vue-a11y/announcer/dist/index.css` path as in the previous one.\r\n\r\nHowever, if you are using a CSS tool like TailwindCSS or Bootstrap, you don't need to import the @vue-a11y/announcer style, as you just add the `sr-only` class to the component.\r\n\r\n```vue\r\n\r\n```\r\n\r\n## useAnnouncer\r\n\r\nWe provide the Vue composition `useAnnouncer` to announce to a person with a screen reader any information needed, anywhere in your app and in real time.\r\n\r\n### Import\r\n\r\n```js\r\nimport { useAnnouncer } from '@vue-a11y/announcer'\r\n```\r\n\r\n### Usage\r\n\r\n```js\r\nconst { assertive } = useAnnouncer()\r\nassertive('My error notification')\r\n\r\n// or \r\n\r\nconst { polite } = useAnnouncer()\r\npolite('My info notification')\r\n```\r\n\r\n## Option API\r\n\r\nYou can also use `this.$announcer` in your component.\r\n\r\n```js\r\nexport default {\r\n // ...\r\n methods: {\r\n setError() {\r\n this.$announcer.assertive('My notification error')\r\n }\r\n }\r\n}\r\n```\r\n\r\n## Change routeComplement\r\n\r\nIf you need to set the `routeComplement` option dynamically without reloading the application, for example if you're dynamically loading translations, you can use this method to update it.\r\n\r\n### Using Composition API\r\n\r\n```js\r\nexport default {\r\n setup () {\r\n const { setRouteComplement } = useAnnouncer()\r\n \r\n function onTranslationsUpdated (translations) {\r\n /* 'ha cargado' e.g. in spanish */\r\n setRouteComplement(translations.routeComplementKey)\r\n }\r\n // ...\r\n }\r\n}\r\n\r\n```\r\n\r\n### Using Option API\r\n\r\n```js\r\nexport default {\r\n // ...\r\n methods: {\r\n onTranslationsUpdated (translations) {\r\n /* 'Foi carregada' e.g. in portuguese */\r\n this.$announcer.setRouteComplement(translations.routeComplementKey)\r\n }\r\n }\r\n}\r\n```\r\n\r\n## Announce route changes\r\n\r\nFor page changes (routes) to be announced automatically, you only need to pass the router object as a parameter at the time of installation.\r\n\r\n```js\r\nimport { createApp } from 'vue'\r\nimport App from './App.vue'\r\nimport router from './router'\r\nimport VueAnnouncer from '@vue-a11y/announcer'\r\nimport '@vue-a11y/announcer/dist/index.css'\r\n\r\ncreateApp(App)\r\n .use(VueAnnouncer, { router })\r\n .use(router)\r\n .mount('#app')\r\n```\r\n### options\r\nKey | Data Type | data | default |\r\n------------------ | ------------- | ---------------------- | ------------ |\r\n`router` | Router | | false |\r\n`message` | String | | '' |\r\n`politeness` | String | polite, assertive, off | `polite` |\r\n`routeComplement` | String | | `has loaded` |\r\n\r\n## Custom announcer (object meta)\r\n\r\nYou can customize the message by defining the announcer on the \"meta\" object for each specific route.\r\n\r\n```js\r\n{\r\n name: 'home',\r\n path: '/',\r\n component: Home,\r\n meta: {\r\n announcer: {\r\n message: 'Página de inicio se'\r\n }\r\n }\r\n}\r\n```\r\n\r\nWhen the page loads, the screen reader user will hear:\r\n\r\n```shell\r\nPágina de inicio se ha cargado.\r\n```\r\n\r\nKey | Data Type | data | default |\r\n------------------ | ---------- | ------------------------- | ----------------------------------- |\r\n`message` | String | | document.title |\r\n`politeness` | String | polite, assertive, off | polite |\r\n`skip` | Boolean | | false |\r\n`routeComplement` | String | | `has loaded` or set at installation |\r\n\r\n### Note\r\n- The plug-in checks whether the message to be announced has been defined in the meta.announcer object, otherwise the document title to be loaded will be announced.\r\n- The `@vue-a11y/announcer@next` uses the global after hooks `router.afterEach` to announce the route changes.\r\n\r\n## Skip in specific route\r\nNecessary for dynamic content pages that require asynchronous data to compose the page title.\r\n\r\nThe skip property on the `meta.announcer` object is used to `skip` the automatic announcement made on the `router.afterEach`, that way you can announce when the asynchronous data is available.\r\n\r\nFor example:\r\n\r\nIn you [`routes.js`](/demo/src/router/routes.ts)\r\n\r\n```js\r\n{\r\n name: 'post',\r\n path: '/posts/:id',\r\n component: Post,\r\n meta: {\r\n announcer: {\r\n skip: true\r\n }\r\n }\r\n}\r\n```\r\n\r\n## ARIA live regions\r\n\r\n\"Using JavaScript, it is possible to dynamically change parts of a page without requiring the entire page to reload — for instance, to update a list of search results on the fly, or to display a discreet alert or notification which does not require user interaction. While these changes are usually visually apparent to users who can see the page, they may not be obvious to users of assistive technologies. ARIA live regions fill this gap and **provide a way to programmatically expose dynamic content changes in a way that can be announced by assistive technologies.**\"\r\n\r\n--- [ARIA live regions - Accessibility | MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)\r\n\r\n## Politeness settings\r\n\r\nYou can use the options `polite`, `assertive` and `off`, if no configuration is defined, the default is `off`.\r\n\r\n### polite\r\nIt is used in most situations that present new information to users. \r\nThe notification will take place at the next available point, without interruptions.\r\n\r\n---\r\nNOTE: `polite` is default\r\n\r\n---\r\n\r\n### assertive\r\nIt is used in situations where the notification is important enough to communicate it immediately, for example, error messages or alerts.\r\n\r\n\r\n```javascript\r\nconst { assertive } = useAnnouncer()\r\nassertive('My error notification')\r\n```\r\n\r\n### off\r\nIs the default and prevent assistive technology from keeping up with changes.\r\n\r\n\r\n### Referencies\r\n\r\n- [ARIA live regions - Accessibility | MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)\r\n- [Using aria-live - Bitsofcode](https://bitsofco.de/using-aria-live/)\r\n\r\n## Browser Testing\r\n\r\nVue Announcer was tested and works as expected in the latest versions of:\r\n\r\n- NVDA (Chrome) ✔️\r\n- ChromeVox (Chrome extension) ✔️\r\n\r\n### To test\r\n\r\n- Android TalkBack\r\n- JAWS\r\n- iOS VoiceOver (Safari)\r\n\r\n## Contributing\r\n- From typos in documentation to coding new features;\r\n- Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;\r\n- Fork repository, make changes and send a pull request;\r\n\r\nFollow us on Twitter [@vue_a11y](https://twitter.com/vue_a11y)\r\n\r\n**Thank you**\r\n","browser":"dist/announcer.es.js","gitHead":"5c43a479dd0b390a4c4a0b7ade285128efa7c6af","scripts":{"dev":"vite","build":"npm-run-all -s clean build:*","clean":"rm -rf dist","release":"standard-version","demo:dev":"cd demo && vite","build:vite":"vue-tsc --noEmit && vite build","demo:build":"cd demo && yarn build:vite","build:types":"tsc --emitDeclarationOnly","demo:publish":"surge ./demo/dist https://vue-announcer.surge.sh/","project:publish":"git push --tags origin next && yarn build && npm publish --access public --tag next"},"_npmUser":{"name":"ktquez","email":"ktquez@gmail.com"},"jsdelivr":"dist/announcer.iife.js","_npmVersion":"6.14.10","description":"---\r 🔥 HEADS UP! You are in the Vue 3 compatible branch, [check the branch for Vue 2 support](https://github.com/vue-a11y/vue-announcer).","directories":{},"_nodeVersion":"14.15.4","_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"vite":"^2.1.5","vue-tsc":"^0.0.21","typescript":"^4.1.3","vue-router":"^4.0.6","@types/node":"^14.14.21","npm-run-all":"^4.1.5","standard-version":"^9.1.0","@vue/compiler-sfc":"^3.0.11","@vitejs/plugin-vue":"^1.2.1"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/announcer_3.1.5_1626356908096_0.7975169160424811","host":"s3://npm-registry-packages"}}},"time":{"created":"2020-05-01T17:25:52.456Z","modified":"2024-08-24T01:59:29.299Z","2.0.0":"2020-05-01T17:25:52.805Z","2.0.1":"2020-05-01T22:44:10.547Z","2.0.2":"2020-05-08T19:25:35.285Z","2.1.0":"2020-09-01T01:30:37.384Z","3.0.0-beta.0":"2021-01-19T02:19:26.170Z","3.0.0-beta.1":"2021-01-19T02:41:51.952Z","3.0.0-beta.2":"2021-01-19T03:27:03.742Z","3.0.0-beta.3":"2021-01-19T03:58:33.795Z","3.0.1":"2021-01-19T04:04:18.642Z","3.0.2":"2021-01-19T04:08:16.377Z","3.0.3":"2021-01-19T04:12:47.768Z","3.0.4":"2021-01-19T04:20:35.125Z","3.0.5":"2021-01-19T04:22:59.953Z","3.0.6":"2021-01-19T04:37:09.016Z","3.1.0":"2021-01-24T15:58:36.201Z","3.1.1":"2021-01-24T16:51:33.885Z","3.1.2":"2021-01-24T19:59:24.123Z","3.1.3":"2021-04-08T14:02:36.461Z","3.1.4":"2021-04-08T14:09:02.921Z","3.1.5":"2021-07-15T13:48:28.223Z"},"bugs":{"url":"https://github.com/vue-a11y/vue-announcer/issues"},"author":{"url":"https://medium.com/@ktquez","name":"Alan Ktquez","email":"ktquez@gmail.com"},"license":"MIT","homepage":"https://vue-a11y.github.io/vue-announcer/","keywords":["announcer","Vue.js","Vue","accessibility","a11y","screen","readers","Vision","Disability","JAWS","ChromeVox","NVDA"],"repository":{"url":"git+https://github.com/vue-a11y/vue-announcer.git","type":"git"},"description":"A simple way with Vue to announce any information to the screen readers.","maintainers":[{"email":"lucasferreiralimax@gmail.com","name":"lucasferreiralimax"},{"email":"ktquez@gmail.com","name":"ktquez"},{"email":"marialamardo@outlook.com","name":"mlama007"},{"email":"kddnewton+npm@gmail.com","name":"kddeisz"}],"readme":"","readmeFilename":""}