Bug: show current breadcumb correctly

- adds detection of current page to embl-breadcrumb-lookup
- removes `>` from related crumbs

components/embl-breadcrumbs-lookup/CHANGELOG.md

@@ -1,3 +1,7 @@
+### 1.0.2
+
+* adds aria role detection of current page
+
 ### 1.0.1
 
 * JS linting

components/embl-breadcrumbs-lookup/embl-breadcrumbs-lookup.js

@@ -16,7 +16,7 @@ var primaryBreadcrumb;
 
 /**
  * Look up a breadcrumb by its uuid and return the entry
- * @example formatBreadcrumb(uuid)
+ * @example emblBreadcumbLookupByUuid(uuid)
  * @param {string} [uuid]  - the uuid of a term
  */
 function emblBreadcumbLookupByUuid(uuid) {
@@ -400,7 +400,7 @@ function emblBreadcrumbAppend(breadcrumbTarget,termName,facet,type) {
         // only insert crumb if it respects the original term context: who/what/where
         if (activeParent.uuid != lastParent.uuid) {
           // no recursive output
-          emblBreadcrumbPrimary.innerHTML = formatBreadcrumb(activeParent.name_display,activeParent.url) + emblBreadcrumbPrimary.innerHTML;
+          emblBreadcrumbPrimary.innerHTML = formatBreadcrumb(activeParent.name_display,activeParent.url,false) + emblBreadcrumbPrimary.innerHTML;
         }
       }
 
@@ -441,13 +441,20 @@ function emblBreadcrumbAppend(breadcrumbTarget,termName,facet,type) {
    * @example formatBreadcrumb(term,breadcrumbUrl)
    * @param {string} [termName]  - the taxonomy string of the item, e.g. `Cancer`
    * @param {string} [breadcrumbUrl] - a fully formed URL, or 'null' to not make a link
+   * @param {boolean} [current] - if the breadcrumb is the current page
    */
-  function formatBreadcrumb(termName,breadcrumbUrl) {
+  function formatBreadcrumb(termName,breadcrumbUrl,current) {
     if (termName == "" || termName == "none") {
       // if no term, do nothing
       return "";
     }
-    var newBreadcrumb = "<li class=\"vf-breadcrumbs__item\">";
+
+    if (current) {
+      current = " aria-current=\"location\"";
+    }
+
+
+    var newBreadcrumb = "<li class=\"vf-breadcrumbs__item\""+current+">";
     if (breadcrumbUrl && breadcrumbUrl !== "null" && breadcrumbUrl !== "#no_url_specified") {
       newBreadcrumb += "<a href=\""+breadcrumbUrl+"\" class=\"vf-breadcrumbs__link\">" + termName + "</a>";
     } else {
@@ -462,7 +469,8 @@ function emblBreadcrumbAppend(breadcrumbTarget,termName,facet,type) {
   /* eslint-disable no-unused-vars */
   var breadcrumbId = currentTerm.uuid,
     breadcrumbUrl = currentTerm.url,
-    breadcrumbParents = currentTerm.parents;
+    breadcrumbParents = currentTerm.parents,
+    breadcrumbCurrent = false;
   /* eslint-enable no-unused-vars */
 
   // narrow down to the first matching element
@@ -478,14 +486,17 @@ function emblBreadcrumbAppend(breadcrumbTarget,termName,facet,type) {
       breadcrumbUrl = null;
     }
 
+    // in this context the active page is always "current"
+    breadcrumbCurrent = true;
+
     // add breadcrumb
-    emblBreadcrumbPrimary.innerHTML += formatBreadcrumb(currentTerm.name_display,breadcrumbUrl);
+    emblBreadcrumbPrimary.innerHTML += formatBreadcrumb(currentTerm.name_display,breadcrumbUrl,breadcrumbCurrent);
 
     // fetch parents for primary path
     getBreadcrumbParentTerm(breadcrumbParents, facet);
   } else if (type == "related") {
     // add breadcrumb
-    emblBreadcrumbRelated.innerHTML += formatBreadcrumb(currentTerm.name_display,breadcrumbUrl);
+    emblBreadcrumbRelated.innerHTML += formatBreadcrumb(currentTerm.name_display,breadcrumbUrl,breadcrumbCurrent);
   }
 
 }

components/vf-breadcrumbs/CHANGELOG.md

@@ -1,3 +1,7 @@
+### 2.0.1
+
+* removes `>` from related crumbs
+
 ### 2.0.0
 
 * adds `aria-current="location"` to be used for the last item in `vf-breadcrumbs`

components/vf-breadcrumbs/vf-breadcrumbs--with-related.scss

@@ -5,10 +5,8 @@
     margin-left: 8px;
     position: relative;
 
-    &:not(:last-of-type) {
-      &::after {
-        content: '';
-      }
+    &::after {
+      content: '';
     }
   }
 

tools/vf-component-library/src/site/_data/utilities.json

@@ -0,0 +1 @@
+{}