Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
vue-announcer
Advanced tools
Readme
Imagine browsing pages (routes), receiving alerts and notifications, having a countdown timer on the page, a progress bar or a loading, among others. Now imagine all this happening to people who have visual disabilities and who use screen readers.
The idea of this plugin is to tell the screen reader what is happening and primarily if you use single-page application.
Inspired by others in the community like:
https://haltersweb.github.io/Accessibility/spa.html (Example of how creating an accessible single-page application)
https://github.com/ember-a11y/a11y-announcer (Ember A11y community)
npm install -S vue-announcer
yarn add vue-announcer
In your main.js
import Vue from 'vue'
import VueAnnouncer from 'vue-announcer'
Vue.use(VueAnnouncer)
In your App.vue
Example using vue-toasted
<template>
<div id="app">
<vue-announcer />
<h2>App page</h2>
<button type="button" data-va="toasted" @click="notify">
trigger notification
</button>
</div>
</template>
<script>
export default {
name: 'app'
methods: {
notify () {
let message = `Hi, it's a toasted notification`
this.$toasted.success(message)
this.$announcer.set(message) // Sets the message that will be read by the screen reader automatically.
}
}
}
</script>
See this example:
Example link
For page changes (routes) to be announced automatically, you only need to pass the router object as a parameter at the time of installation.
import Vue from 'vue'
import router from './router'
import VueAnnouncer from 'vue-announcer'
Vue.use(VueAnnouncer, {}, router)
Key | Data Type | default |
---|---|---|
complementRoute | String | has loaded |
Example:
Vue.use(VueAnnouncer, {
complementRoute: 'ha cargado' // e.g. in spanish
}, router)
Note: These methods are registered on the $announcer
property injected into the Vue instance
$announcer.setComplementRoute(complementRoute)
If you need to set the complementRoute
option dynamically without reloading the application, for example if you're
dynamically loading translations, you can use this method to update it.
export default {
onTranslationsUpdated (translations) {
this.$announcer.setComplementRoute(translations.complementRouteKey /* = 'ha cargado' */)
}
}
You can set a property on the meta object, which will serve as information to get the message that will be announced to the screen reader on each page. e.g.:
{
name: 'home',
path: '/',
component: Home,
meta: {
announcer: 'Página de inicio'
}
}
When the page loads, the screen reader user will hear:
Página de inicio ha cargado
Note:
router.afterEach
to announce the route changes.https://vue-announcer.surge.sh/
git clone https://github.com/vue-a11y/vue-announcer.git vue-announcer
// Run plugin
cd vue-announcer
npm install
npm run dev
// Run example
cd examples
npm install
npm run dev
cd ..
// Run Cypress testing
npm run test
Or run Cypress on interactive mode
npm run test:open
It is a simple webpack template already installed and configured. After the commands just access the http://localhost:8080/
If you want a faster communication, find me on @ktquez And follow us on Twitter @vue_a11y
Thank you
FAQs
A simple way with Vue to announce any information to the screen readers.
The npm package vue-announcer receives a total of 1,003 weekly downloads. As such, vue-announcer popularity was classified as popular.
We found that vue-announcer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.