Merge pull request #1152 from owncloud/issues/aria-label-breadcrumb

Add aria label to the home icon within the breadcrumb
owncloud · Mar 18, 2021 · 47c2797 · 47c2797
2 parents 61df404 + d2ce57e
commit 47c2797
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 7 deletions.
diff --git a/changelog/unreleased/enhancement-aria-label-for-breadcrumb 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
diff --git 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="homeAccessibleLabelValue"
+        >
           <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 `homeAccessibleLabel`. 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
+     */
+    homeAccessibleLabel: {
+      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]
     },
+    homeAccessibleLabelValue() {
+      return this.homeAccessibleLabel || this.$gettext("Go to root directory")
+    },
   },
 }
 </script>