Merge pull request #17 from vue-a11y/next

Version 2

Author: ktquez

.eslintrc.js

@@ -2,17 +2,22 @@ module.exports = {
   root: true,
   env: {
     "cypress/globals": true,
-    browser: true,
-    node: true
+    node: true,
+    browser: true
   },
   extends: [
-    'standard',
-    'plugin:vue/essential'
+    'plugin:vue/recommended',
+    '@vue/standard',
+    'plugin:vuejs-accessibility/recommended'
   ],
   plugins: [
-    "cypress"
+    'cypress',
+    'vuejs-accessibility'
   ],
-  // add your custom rules here
-  rules: {},
-  globals: {}
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  rules: {
+    'no-console': 'off'
+  } 
 }

CHANGELOG.md

@@ -1,7 +1,9 @@
-# Change Log
+# Changelog
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [2.0.0](https://github.com/vue-a11y/vue-announcer/compare/v1.0.6...v2.0.0) (2020-05-01)
+
 <a name="1.0.6"></a>
 ## [1.0.6](https://github.com/vue-a11y/vue-announcer/compare/v1.0.5...v1.0.6) (2020-01-08)
 

README.md

@@ -1,147 +1,36 @@
-# vue-announcer
+# Introduction
 
-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.
+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 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)*  
-
-
-## Install package
-#### NPM
-```shell
-npm install -S vue-announcer
-```
-
-#### Yarn
-```shell
-yarn add vue-announcer
-```
----
-
-## How to use
-In your `main.js`
-```javascript
-import Vue from 'vue'
-import VueAnnouncer from 'vue-announcer'
-
-Vue.use(VueAnnouncer)
-```
-
-In your `App.vue`
-Example using `vue-toasted`
-```vue
-<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](https://github.com/vue-a11y/vue-announcer/blob/master/example/src/pages/About.vue)
-
-## Announce route changes
-For page changes (routes) to be announced automatically, you only need to pass the router object as a parameter at the time of installation.
-
-```javascript
-import Vue from 'vue'
-import router from './router'
-import VueAnnouncer from 'vue-announcer'
-
-Vue.use(VueAnnouncer, {}, router) 
-```
-
-### Options
-Key                | Data Type  | default      |
------------------- | ---------- | ------------ |
-`complementRoute`  | String     | `has loaded` |
-
-
-Example:
-```javascript
-Vue.use(VueAnnouncer, {
-  complementRoute: 'ha cargado' // e.g. in spanish
-}, router) 
-```
-
-### Methods
-**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.
-
-```javascript
-export default {
-  onTranslationsUpdated (translations) {
-    this.$announcer.setComplementRoute(translations.complementRouteKey /* = 'ha cargado' */)
-  }
-}
-```
-
-### Custom message to each page (optional)
-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.:
-```javascript
-{
-  name: 'home',
-  path: '/',
-  component: Home,
-  meta: {
-    announcer: 'Página de inicio'
-  }
-}
-```
-
-When the page loads, the screen reader user will hear:
-```shell
-Página de inicio ha cargado
-```
+The [@vue-a11y/announcer](https://github.com/vue-a11y/vue-announcer) (v2) provides an easy way to really tell what’s going on in your application to people using screen readers.
 
+> For vue-announcer version 1.* you can access [this link](https://github.com/vue-a11y/vue-announcer/tree/v1.0.6)
 
+Inspired by others in the community like:  
+- [Example of how creating an accessible single-page application](https://haltersweb.github.io/Accessibility/spa.html)
+- [Ember A11y community](https://github.com/ember-a11y/a11y-announcer)
 
-**Note:**
-- The plugin checks whether it was defined in the meta object, otherwise, without any problems, the title of the page being loaded will be used.
-- The vue-announcer uses the global after hooks `router.afterEach` to announce the route changes.
+## Links
 
-## Check live demo
-https://vue-announcer.surge.sh/
+- [Documentation](https://vue-announcer-v2.surge.sh)
+- [Demos](https://vue-announcer-v2.surge.sh/demos/)
 
 ## Run the tests
 ```shell
 git clone https://github.com/vue-a11y/vue-announcer.git vue-announcer
 
-// Run plugin
+# Run plugin
 cd vue-announcer
 npm install
 npm run dev
 
-// Run example
+# Run example
 cd examples
 npm install
 npm run dev
 cd ..
 
-// Run Cypress testing
+# Run Cypress testing
 npm run test
 ```
 
@@ -155,10 +44,10 @@ After the commands just access the http://localhost:8080/
 
 
 ## Contributing
+- From typos in documentation to coding new features;
 - Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;
 - Fork repository, make changes and send a pull request;
 
-If you want a faster communication, find me on [@ktquez](https://twitter.com/ktquez)
-And follow us on Twitter [@vue_a11y](https://twitter.com/vue_a11y)
+Follow us on Twitter [@vue_a11y](https://twitter.com/vue_a11y)
 
 **Thank you**

cypress.json

@@ -5,6 +5,5 @@
 	"integrationFolder": "tests/e2e/integration",
 	"fileServerFolder": "demo",
 	"pluginsFile": false,
-	"supportFile": false,
-	"videoRecording": false
+	"supportFile": false
 }

docs/.vuepress/config.js

@@ -0,0 +1,48 @@
+module.exports = {
+  title: 'Vue announcer',
+  description: '',
+  serviceWorker: true,  
+  themeConfig: {
+    home: false,
+    repo: 'vue-a11y/vue-announcer',
+    docsDir: 'docs',
+    locales: {
+      '/': {
+        editLinkText: 'Edit this page on GitHub',
+        nav: [
+          {
+            text: 'Guide',
+            link: '/guide/'
+          },
+          {
+            text: 'Examples',
+            link: '/demos/'
+          }
+        ],
+        sidebar: [
+          '/',
+          {
+            title: 'Guide',
+            collapsable: false,
+            children: [
+              '/guide/',
+              '/guide/announcer.md',
+              '/guide/announcer-router.md',
+              '/guide/accessibility.md',
+              '/guide/support.md',
+            ]
+          },
+          {
+            title: 'Examples',
+            collapsable: false,
+            children: [
+              '/demos/',
+              '/demos/nuxt.md',
+              '/demos/vuepress.md'
+            ]
+          }
+        ]
+      }
+    }
+  }
+}

docs/README.md

@@ -0,0 +1,9 @@
+# Introduction
+
+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 readers.  
+
+The [vue-announcer](https://github.com/vue-a11y/vue-announcer) provides an easy way to really tell what’s going on in your application to people using screen readers.
+
+Inspired by others in the community like:  
+- [Example of how creating an accessible single-page application](https://haltersweb.github.io/Accessibility/spa.html)
+- [Ember A11y community](https://github.com/ember-a11y/a11y-announcer)

docs/demos/README.md

@@ -0,0 +1,11 @@
+# Vue app
+
+<iframe
+    src="https://codesandbox.io/embed/vue-announcer-vue-project-z049t?fontsize=14&hidenavigation=1&theme=dark&view=editor"
+    style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+    title="vue-announcer-vue-project"
+    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr"
+    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+></iframe>
+
+<a href="https://codesandbox.io/s/vue-announcer-vue-project-z049t" target="_blank" rel="noopener">Open Sandbox example</a>

docs/demos/nuxt.md

@@ -0,0 +1,3 @@
+# Nuxt.js
+
+### Coming soon

docs/demos/vuepress.md

@@ -0,0 +1,3 @@
+# Vuepress
+
+### Coming soon

docs/guide/README.md

@@ -0,0 +1,33 @@
+# Installation
+
+## Package
+
+#### NPM
+```shell
+npm install -S vue-announcer
+```
+
+#### Yarn
+```shell
+yarn add vue-announcer
+```
+
+## Basic usage
+
+```javascript
+import Vue from 'vue'
+import VueAnnouncer from 'vue-announcer'
+
+Vue.use(VueAnnouncer)
+```
+
+In your `App.vue`
+```vue
+<template>
+  <div>
+    <vue-announcer /> <!-- You can place it anywhere in your application -->
+    ...
+  </div>
+</template>
+```
+