added route change announcement

owncloud · Mar 17, 2021 · a0192a4 · a0192a4
1 parent 4b5f002
commit a0192a4
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 11 deletions.
diff --git a/changelog/unreleased/enhancement-live-region-updates b/changelog/unreleased/enhancement-live-region-updates
@@ -0,0 +1,4 @@
+Enhancement: Implement live region updates on route changes
+
+https://github.com/owncloud/web/pull/4812
+https://github.com/owncloud/web/issues/4346
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="uk-height-1-1">
+    <oc-hidden-announcer :announcement="announcement" level="polite" />
     <skip-to target="main">Skip to main</skip-to>
     <div id="Web" class="uk-height-1-1">
       <div
@@ -98,7 +99,8 @@ export default {
     return {
       appNavigationVisible: false,
       $_notificationsInterval: null,
-      windowWidth: 0
+      windowWidth: 0,
+      announcement: ''
     }
   },
   computed: {
@@ -215,8 +217,12 @@ export default {
     }
   },
   watch: {
-    $route() {
-      this.appNavigationVisible = false
+    $route: {
+      immediate: true,
+      handler: function(to) {
+        this.appNavigationVisible = false
+        this.announceRouteChange(to)
+      }
     },
     capabilities(caps) {
       if (!caps) {
@@ -274,7 +280,6 @@ export default {
       this.onResize()
     })
   },
-
   beforeMount() {
     this.initAuth()
   },
@@ -318,6 +323,22 @@ export default {
       }
 
       this.appNavigationVisible = false
+    },
+    announceRouteChange(route) {
+      const titleSegments = [route.meta.pageTitle || route.name]
+
+      if (route.params.item) {
+        if (route.name.startsWith('files-')) {
+          const fileTree = route.params.item.split('/').filter(el => el.length)
+          if (fileTree.length) {
+            titleSegments.push(fileTree.pop())
+          }
+        } else {
+          titleSegments.push(route.params.item)
+        }
+      }
+
+      this.announcement = `${this.$gettext('Navigated to')} "${titleSegments.join(' - ')}"`
     }
   }
 }

diff --git a/packages/web-runtime/src/router/index.js b/packages/web-runtime/src/router/index.js
@@ -9,6 +9,11 @@ import store from '../store'
 
 Vue.use(Router)
 
+// just a dummy function to trick gettext tools
+function $gettext(msg) {
+  return msg
+}
+
 const router = new Router({
   //  mode: 'history',
   routes: [
@@ -18,48 +23,49 @@ const router = new Router({
       components: {
         fullscreen: LoginPage
       },
-      meta: { auth: false, hideHeadbar: true }
+      meta: { auth: false, hideHeadbar: true, pageTitle: $gettext('Login') }
     },
     {
       path: '/oidc-callback',
       components: {
         fullscreen: OidcCallbackPage
       },
-      meta: { auth: false, hideHeadbar: true }
+      meta: { auth: false, hideHeadbar: true, pageTitle: $gettext('Oidc callback') }
     },
     {
       path: '/oidc-silent-redirect',
       components: {
         fullscreen: OidcCallbackPage
       },
-      meta: { auth: false, hideHeadbar: true }
+      meta: { auth: false, hideHeadbar: true, pageTitle: $gettext('Oidc redirect') }
     },
     {
       path: '/f/:fileId',
       name: 'privateLink',
       redirect: '/files/private-link/:fileId',
-      meta: { hideHeadbar: true }
+      meta: { hideHeadbar: true, pageTitle: $gettext('Private link') }
     },
     {
       path: '/s/:token',
       name: 'publicLink',
       redirect: '/files/public-link/:token',
-      meta: { auth: false, hideHeadbar: true }
+      meta: { auth: false, hideHeadbar: true, pageTitle: $gettext('Public link') }
     },
     {
       path: '/access-denied',
       name: 'accessDenied',
       components: {
         fullscreen: AccessDeniedPage
       },
-      meta: { auth: false, hideHeadbar: true }
+      meta: { auth: false, hideHeadbar: true, pageTitle: $gettext('Access denied') }
     },
     {
       path: '/account',
       name: 'account',
       components: {
         app: Account
-      }
+      },
+      meta: { pageTitle: $gettext('Accounts') }
     }
   ]
 })