Merge pull request #5166 from owncloud/28052021_focus-and-announce-br…

…eadcrumbs Focus breadcrumb on route change
owncloud · May 31, 2021 · cda4228 · cda4228
2 parents b8a2bb1 + dcbf119
commit cda4228
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 10 deletions.
diff --git a/changelog/unreleased/enhancement-focus-breadcrumb-on-route-change b/changelog/unreleased/enhancement-focus-breadcrumb-on-route-change
@@ -0,0 +1,7 @@
+Enhancement: Focus breadcrumb on route change
+
+We now focus the current breadcrumb item when navigating to another page 
+and announce the amount of files and folders in the folder the user 
+has navigated to.
+
+https://github.com/owncloud/web/pull/5166
diff --git a/packages/web-app-files/src/mixins/accessibleBreadcrumb.js b/packages/web-app-files/src/mixins/accessibleBreadcrumb.js
@@ -0,0 +1,39 @@
+import last from 'lodash-es/last'
+import { mapGetters } from 'vuex'
+
+export default {
+  computed: {
+    ...mapGetters('Files', ['activeFilesCount'])
+  },
+  methods: {
+    accessibleBreadcrumb_focusAndAnnounceBreadcrumb(sameRoute) {
+      const activeBreadcrumb = last(
+        document.getElementById('files-breadcrumb').children[0].children
+      )
+      const activeBreadcrumbItem = activeBreadcrumb.lastChild
+
+      const itemCount = this.activeFilesCount.files + this.activeFilesCount.folders
+      const announcement = this.$ngettext(
+        'This folder contains %{ itemCount } item.',
+        'This folder contains %{ itemCount } items.',
+        itemCount
+      )
+
+      const translatedHint =
+        this.activeFilesCount.folders > 0 || this.activeFilesCount.files > 0
+          ? announcement
+          : this.$gettext('This folder has no content.')
+
+      document.querySelectorAll('.oc-breadcrumb-sr').forEach(el => el.remove())
+
+      const invisibleHint = document.createElement('p')
+      invisibleHint.className = 'oc-invisible-sr oc-breadcrumb-sr'
+      invisibleHint.innerHTML = translatedHint
+
+      activeBreadcrumb.append(invisibleHint)
+      if (sameRoute) {
+        activeBreadcrumbItem.focus()
+      }
+    }
+  }
+}
diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
@@ -66,7 +66,8 @@
 import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
 import isNil from 'lodash/isNil'
 
-import FileActions from '../mixins/fileActions'
+import MixinAccessibleBreadcrumb from '../mixins/accessibleBreadcrumb'
+import MixinFileActions from '../mixins/fileActions'
 import MixinFilesListScrolling from '../mixins/filesListScrolling'
 import MixinFilesListPositioning from '../mixins/filesListPositioning'
 import MixinResources from '../mixins/resources'
@@ -80,7 +81,13 @@ import NotFoundMessage from '../components/FilesLists/NotFoundMessage.vue'
 export default {
   components: { QuickActions, ListLoader, NoContentMessage, NotFoundMessage },
 
-  mixins: [FileActions, MixinFilesListPositioning, MixinFilesListScrolling, MixinResources],
+  mixins: [
+    MixinAccessibleBreadcrumb,
+    MixinFileActions,
+    MixinFilesListPositioning,
+    MixinFilesListScrolling,
+    MixinResources
+  ],
 
   data: () => ({
     loading: true
@@ -136,9 +143,10 @@ export default {
 
   watch: {
     $route: {
-      handler: function() {
+      handler: function(to, from) {
+        const sameRoute = to.name === from?.name
         this.checkHomeFallback()
-        this.loadResources()
+        this.loadResources(sameRoute)
       },
       immediate: true
     },
@@ -177,7 +185,7 @@ export default {
       }
     },
 
-    async loadResources() {
+    async loadResources(sameRoute) {
       this.loading = true
       this.CLEAR_CURRENT_FILES_LIST()
 
@@ -212,6 +220,7 @@ export default {
 
       this.adjustTableHeaderPosition()
       this.loading = false
+      this.accessibleBreadcrumb_focusAndAnnounceBreadcrumb(sameRoute)
       this.scrollToResourceFromRoute()
     },
 

diff --git a/packages/web-app-files/src/views/PublicFiles.vue b/packages/web-app-files/src/views/PublicFiles.vue
@@ -57,10 +57,11 @@
 <script>
 import { mapGetters, mapActions, mapMutations } from 'vuex'
 
-import { buildResource } from '../helpers/resources'
-import FileActions from '../mixins/fileActions'
+import MixinAccessibleBreadcrumb from '../mixins/accessibleBreadcrumb'
+import MixinFileActions from '../mixins/fileActions'
 import MixinFilesListPositioning from '../mixins/filesListPositioning'
 import MixinResources from '../mixins/resources'
+import { buildResource } from '../helpers/resources'
 
 import ListLoader from '../components/ListLoader.vue'
 import NoContentMessage from '../components/NoContentMessage.vue'
@@ -73,7 +74,7 @@ export default {
     NotFoundMessage
   },
 
-  mixins: [FileActions, MixinFilesListPositioning, MixinResources],
+  mixins: [MixinAccessibleBreadcrumb, MixinFileActions, MixinFilesListPositioning, MixinResources],
 
   data: () => ({
     loading: true
@@ -130,7 +131,11 @@ export default {
 
   watch: {
     $route: {
-      handler: 'loadResources',
+      handler: function(to, from) {
+        const sameRoute = to.name === from?.name
+        this.checkHomeFallback()
+        this.loadResources(sameRoute)
+      },
       immediate: true
     },
 
@@ -148,7 +153,7 @@ export default {
       'CLEAR_CURRENT_FILES_LIST'
     ]),
 
-    async loadResources() {
+    async loadResources(sameRoute) {
       this.loading = true
       this.CLEAR_CURRENT_FILES_LIST()
 
@@ -203,6 +208,7 @@ export default {
       }
 
       this.loading = false
+      this.accessibleBreadcrumb_focusAndAnnounceBreadcrumb(sameRoute)
     },
 
     redirectToResolvePage() {