From 57f99276c5acea845b70139f19d28dc0a47277f6 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Fri, 28 May 2021 11:39:45 +0100
Subject: [PATCH 1/3] Focus breadcrumb on route change

---
 ...hancement-focus-breadcrumb-on-route-change |  7 ++++
 .../src/mixins/accessibleBreadcrumb.js        | 35 +++++++++++++++++++
 packages/web-app-files/src/views/Personal.vue | 12 +++++--
 .../web-app-files/src/views/PublicFiles.vue   |  8 +++--
 4 files changed, 57 insertions(+), 5 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-focus-breadcrumb-on-route-change
 create mode 100644 packages/web-app-files/src/mixins/accessibleBreadcrumb.js

diff --git a/changelog/unreleased/enhancement-focus-breadcrumb-on-route-change b/changelog/unreleased/enhancement-focus-breadcrumb-on-route-change
new file mode 100644
index 00000000000..2c45716e9fd
--- /dev/null
+++ 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
new file mode 100644
index 00000000000..09e258db27d
--- /dev/null
+++ b/packages/web-app-files/src/mixins/accessibleBreadcrumb.js
@@ -0,0 +1,35 @@
+import last from 'lodash-es/last'
+import { mapGetters } from 'vuex'
+
+export default {
+  computed: {
+    ...mapGetters('Files', ['activeFilesCount'])
+  },
+  methods: {
+    accessibleBreadcrumb_focusAndAnnounceBreadcrumb() {
+      const activeBreadcrumb = last(
+        document.getElementById('files-breadcrumb').children[0].children
+      )
+      const activeBreadcrumbItem = activeBreadcrumb.lastChild
+
+      const announcement = this.$gettextInterpolate(
+        'containing %{filesCount} files and %{folderCount} folders',
+        { filesCount: this.activeFilesCount.files, folderCount: this.activeFilesCount.folders }
+      )
+
+      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('span')
+      invisibleHint.className = 'oc-invisible-sr oc-breadcrumb-sr'
+      invisibleHint.innerHTML = translatedHint
+
+      activeBreadcrumb.append(invisibleHint)
+      activeBreadcrumbItem.focus()
+    }
+  }
+}
diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
index a79a6f70b9f..5eb574bea07 100644
--- 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
@@ -212,6 +219,7 @@ export default {
 
       this.adjustTableHeaderPosition()
       this.loading = false
+      this.accessibleBreadcrumb_focusAndAnnounceBreadcrumb()
       this.scrollToResourceFromRoute()
     },
 
diff --git a/packages/web-app-files/src/views/PublicFiles.vue b/packages/web-app-files/src/views/PublicFiles.vue
index c06034aa9df..78f9e3e42c8 100644
--- 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
@@ -203,6 +204,7 @@ export default {
       }
 
       this.loading = false
+      this.accessibleBreadcrumb_focusAndAnnounceBreadcrumb()
     },
 
     redirectToResolvePage() {

From 74dd1c4acf724ad5b91fcc0144d28dda117d2d75 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Fri, 28 May 2021 14:43:29 +0100
Subject: [PATCH 2/3] Prevent focus from being set to breadcrumb if route
 changes

---
 .../web-app-files/src/mixins/accessibleBreadcrumb.js   |  6 ++++--
 packages/web-app-files/src/views/Personal.vue          |  9 +++++----
 packages/web-app-files/src/views/PublicFiles.vue       | 10 +++++++---
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/web-app-files/src/mixins/accessibleBreadcrumb.js b/packages/web-app-files/src/mixins/accessibleBreadcrumb.js
index 09e258db27d..3241ed0d7ab 100644
--- a/packages/web-app-files/src/mixins/accessibleBreadcrumb.js
+++ b/packages/web-app-files/src/mixins/accessibleBreadcrumb.js
@@ -6,7 +6,7 @@ export default {
     ...mapGetters('Files', ['activeFilesCount'])
   },
   methods: {
-    accessibleBreadcrumb_focusAndAnnounceBreadcrumb() {
+    accessibleBreadcrumb_focusAndAnnounceBreadcrumb(sameRoute) {
       const activeBreadcrumb = last(
         document.getElementById('files-breadcrumb').children[0].children
       )
@@ -29,7 +29,9 @@ export default {
       invisibleHint.innerHTML = translatedHint
 
       activeBreadcrumb.append(invisibleHint)
-      activeBreadcrumbItem.focus()
+      if (sameRoute) {
+        activeBreadcrumbItem.focus()
+      }
     }
   }
 }
diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
index 5eb574bea07..c1718320618 100644
--- a/packages/web-app-files/src/views/Personal.vue
+++ b/packages/web-app-files/src/views/Personal.vue
@@ -143,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
     },
@@ -184,7 +185,7 @@ export default {
       }
     },
 
-    async loadResources() {
+    async loadResources(sameRoute) {
       this.loading = true
       this.CLEAR_CURRENT_FILES_LIST()
 
@@ -219,7 +220,7 @@ export default {
 
       this.adjustTableHeaderPosition()
       this.loading = false
-      this.accessibleBreadcrumb_focusAndAnnounceBreadcrumb()
+      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
index 78f9e3e42c8..5a6026837a0 100644
--- a/packages/web-app-files/src/views/PublicFiles.vue
+++ b/packages/web-app-files/src/views/PublicFiles.vue
@@ -131,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
     },
 
@@ -149,7 +153,7 @@ export default {
       'CLEAR_CURRENT_FILES_LIST'
     ]),
 
-    async loadResources() {
+    async loadResources(sameRoute) {
       this.loading = true
       this.CLEAR_CURRENT_FILES_LIST()
 
@@ -204,7 +208,7 @@ export default {
       }
 
       this.loading = false
-      this.accessibleBreadcrumb_focusAndAnnounceBreadcrumb()
+      this.accessibleBreadcrumb_focusAndAnnounceBreadcrumb(sameRoute)
     },
 
     redirectToResolvePage() {

From dcbf1190da26cc80310824661b04972f66bce478 Mon Sep 17 00:00:00 2001
From: Pascal Wengerter <pascal@wengerter.info>
Date: Mon, 31 May 2021 17:05:09 +0100
Subject: [PATCH 3/3] Change breadcrum hint pluralization & change span to p
 tag

---
 .../web-app-files/src/mixins/accessibleBreadcrumb.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/web-app-files/src/mixins/accessibleBreadcrumb.js b/packages/web-app-files/src/mixins/accessibleBreadcrumb.js
index 3241ed0d7ab..9ea2d82e124 100644
--- a/packages/web-app-files/src/mixins/accessibleBreadcrumb.js
+++ b/packages/web-app-files/src/mixins/accessibleBreadcrumb.js
@@ -12,19 +12,21 @@ export default {
       )
       const activeBreadcrumbItem = activeBreadcrumb.lastChild
 
-      const announcement = this.$gettextInterpolate(
-        'containing %{filesCount} files and %{folderCount} folders',
-        { filesCount: this.activeFilesCount.files, folderCount: this.activeFilesCount.folders }
+      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')
+          : this.$gettext('This folder has no content.')
 
       document.querySelectorAll('.oc-breadcrumb-sr').forEach(el => el.remove())
 
-      const invisibleHint = document.createElement('span')
+      const invisibleHint = document.createElement('p')
       invisibleHint.className = 'oc-invisible-sr oc-breadcrumb-sr'
       invisibleHint.innerHTML = translatedHint