From f12842206ae81180c9a2e0ab18fb1dd9ea5d4101 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 17 Mar 2021 09:22:19 +0100
Subject: [PATCH 1/2] Add aria label to the home icon within the breadcrumb

---
 .../enhancement-aria-label-for-breadcrumb     |  4 +++
 src/components/OcBreadcrumb.vue               | 33 +++++++++++++++----
 2 files changed, 30 insertions(+), 7 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-aria-label-for-breadcrumb

diff --git a/changelog/unreleased/enhancement-aria-label-for-breadcrumb b/changelog/unreleased/enhancement-aria-label-for-breadcrumb
new file mode 100644
index 000000000..ae224e394
--- /dev/null
+++ b/changelog/unreleased/enhancement-aria-label-for-breadcrumb
@@ -0,0 +1,4 @@
+Enhancement: Add aria label to the home icon within the breadcrumb
+
+https://github.com/owncloud/owncloud-design-system/pull/1152
+https://github.com/owncloud/web/issues/4329
\ No newline at end of file
diff --git a/src/components/OcBreadcrumb.vue b/src/components/OcBreadcrumb.vue
index f670f9ba6..2bc011baf 100644
--- a/src/components/OcBreadcrumb.vue
+++ b/src/components/OcBreadcrumb.vue
@@ -2,7 +2,12 @@
   <div :class="`oc-breadcrumb oc-breadcrumb-${variation}`">
     <ul class="oc-breadcrumb-list">
       <li v-for="(item, index) in items" :key="index" class="oc-breadcrumb-list-item">
-        <router-link v-if="home && index === 0" :to="item.to" class="uk-flex uk-float-left">
+        <router-link
+          v-if="home && index === 0"
+          :to="item.to"
+          class="uk-flex uk-float-left"
+          :aria-label="homeAccessibilityLabelValue"
+        >
           <oc-icon name="home" />
         </router-link>
         <router-link v-else-if="item.to" :to="item.to">{{ item.text }}</router-link>
@@ -13,15 +18,15 @@
     <div class="oc-breadcrumb-drop">
       <label class="oc-breadcrumb-drop-label">
         <span
-          v-if="$_ocBreadcrumb_currentFolder"
+          v-if="currentFolder"
           class="oc-breadcrumb-drop-label-text"
-          v-text="$_ocBreadcrumb_currentFolder.text"
+          v-text="currentFolder.text"
         />
         <oc-icon class="oc-breadcrumb-drop-label-icon" name="expand_more" />
       </label>
-      <oc-drop v-if="$_ocBreadcrumb_dropdownItems" :options="{ offset: 20 }">
+      <oc-drop v-if="dropdownItems" :options="{ offset: 20 }">
         <ul class="uk-nav uk-nav-default">
-          <li v-for="(item, index) in $_ocBreadcrumb_dropdownItems" :key="index">
+          <li v-for="(item, index) in dropdownItems" :key="index">
             <router-link v-if="item.to" :to="item.to">{{ item.text }}</router-link>
             <a v-else-if="item.onClick" @click="item.onClick">{{ item.text }}</a>
             <span v-else v-text="item.text" />
@@ -42,6 +47,9 @@ import OcIcon from "./OcIcon.vue"
  *  - text: mandatory element, holds the text which is to be displayed in the breadcrumb
  *  - to: optional element, the vue router link
  *
+ * ## Accessibility
+ *
+ * You can provide an accessibility label to the home icon via `homeAccessibilityLabel`. If not set, it will default to "Go to Home".
  */
 export default {
   name: "OcBreadcrumb",
@@ -69,6 +77,14 @@ export default {
       type: [Boolean],
       default: false,
     },
+    /**
+     * Aria-label for the home icon
+     */
+    homeAccessibilityLabel: {
+      type: String,
+      required: false,
+      default: "",
+    },
     /**
      * Variation of breadcrumbs
      * Can be `default` or `lead`
@@ -81,16 +97,19 @@ export default {
     },
   },
   computed: {
-    $_ocBreadcrumb_dropdownItems() {
+    dropdownItems() {
       if (this.items.length <= 1 || !this.items) return false
 
       return [...this.items].reverse().slice(1)
     },
-    $_ocBreadcrumb_currentFolder() {
+    currentFolder() {
       if (this.items.length === 0 || !this.items) return false
 
       return [...this.items].reverse()[0]
     },
+    homeAccessibilityLabelValue() {
+      return this.homeAccessibilityLabel || this.$gettext("Go to Home")
+    },
   },
 }
 </script>

From d2ce57e9a8b588bcb41a2c397b539c8c0876c8a0 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Thu, 18 Mar 2021 15:05:01 +0100
Subject: [PATCH 2/2] Rename stuff

---
 src/components/OcBreadcrumb.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/OcBreadcrumb.vue b/src/components/OcBreadcrumb.vue
index 2bc011baf..dcc91e859 100644
--- a/src/components/OcBreadcrumb.vue
+++ b/src/components/OcBreadcrumb.vue
@@ -6,7 +6,7 @@
           v-if="home && index === 0"
           :to="item.to"
           class="uk-flex uk-float-left"
-          :aria-label="homeAccessibilityLabelValue"
+          :aria-label="homeAccessibleLabelValue"
         >
           <oc-icon name="home" />
         </router-link>
@@ -49,7 +49,7 @@ import OcIcon from "./OcIcon.vue"
  *
  * ## Accessibility
  *
- * You can provide an accessibility label to the home icon via `homeAccessibilityLabel`. If not set, it will default to "Go to Home".
+ * You can provide an accessibility label to the home icon via `homeAccessibleLabel`. If not set, it will default to "Go to Home".
  */
 export default {
   name: "OcBreadcrumb",
@@ -80,7 +80,7 @@ export default {
     /**
      * Aria-label for the home icon
      */
-    homeAccessibilityLabel: {
+    homeAccessibleLabel: {
       type: String,
       required: false,
       default: "",
@@ -107,8 +107,8 @@ export default {
 
       return [...this.items].reverse()[0]
     },
-    homeAccessibilityLabelValue() {
-      return this.homeAccessibilityLabel || this.$gettext("Go to Home")
+    homeAccessibleLabelValue() {
+      return this.homeAccessibleLabel || this.$gettext("Go to root directory")
     },
   },
 }