feat: Custom announcer complementRoute by locale

Author: ktquez

docs/.vuepress/config.js

@@ -22,6 +22,9 @@ module.exports ={
 ariaLabel: 'toggle to %cm mode color',
 ariaLive: '%cm color mode is enabled'
 },
+announcer: {
+complementRoute: 'has loaded'
+},
 nav: [
 {
 text: 'Guide',

docs/guide/config.md

@@ -39,18 +39,21 @@ module.exports ={
 // ...
  locales:{
 '/':{
+// ...
  colorMode:{
  ariaLabel:'toggle to %cm mode color',
  ariaLive:'%cm color mode is enabled'
  }
  },
 '/pt':{
+// ...
  colorMode:{
  ariaLabel:'Trocar para o modo de cor %cm',
  ariaLive:'Modo de cor %cm está habilitado'
  }
  },
 '/es':{
+// ...
  colorMode:{
  ariaLabel:'Cambiar al modo de color %cm',
  ariaLive:'Se eligió el modo de color %cm'
@@ -66,4 +69,38 @@ Pretty soon
 
 ## Announcer
 
-Pretty soon
+The [@vue-a11y/announcer](https://github.com/vue-a11y/vue-announcer) provides an easy way for people using screen readers to know what’s going on in your app.
+
+It is already installed and configured in the theme to announce the routes changes.
+
+You can configure the title add-on according to the location, by default the value is `has loaded`.
+
+```javascript
+// e.g. docs/.vuepress/config.js
+module.exports={
+ theme:'vuepress-theme-default-vue-a11y',
+// ...
+ themeConfig:{
+// ...
+ locales:{
+'/':{
+// ...
+ announcer:{
+ complementRoute:'has loaded'// optional
+ }
+ },
+'/pt':{
+// ...
+ announcer:{
+ complementRoute:'foi carregado'
+ }
+ },
+'/es':{
+// ...
+ announcer:{
+ complementRoute:'ha cargado'
+ }
+ }
+ }
+ }
+```

layouts/Layout.vue

@@ -47,12 +47,15 @@ export default{
 this.$nextTick(() =>{
 this.setMainId()
 this.setWarningInExternalLinks()
+this.setComplementRouteToAnnouncer()
  })
  },
+
 setMainId (){
 constmain=document.getElementsByTagName('main')
 if (main.length) main[0].setAttribute('id', 'main')
  },
+
 setWarningInExternalLinks (){
 constlinks=document.querySelectorAll('a[target="_blank"]')
 if (!links.length) return
@@ -61,6 +64,12 @@ export default{
 constwarning=`<span class="visually-hidden">, ${this.$themeLocaleConfig.warningExternalLinkText||'opens in a new window'}</span>`
 link.innerHTML=link.innerHTML.replace(textContent, `${textContent}${warning}`)
  })
+ },
+
+setComplementRouteToAnnouncer (){
+if (this.$themeLocaleConfig.announcer){
+this.$announcer.setComplementRoute(this.$themeLocaleConfig.announcer.complementRoute)
+ }
  }
  }
 }