bpmn-js 18.25.0 → 18.25.1

package/dist/assets/bpmn-js.css

@@ -31,8 +31,12 @@
   --breadcrumbs-font-family: var(--bjs-font-family);
   --breadcrumbs-item-color: var(--color-blue-205-100-50);
   --breadcrumbs-arrow-color: var(--color-black);
+  --breadcrumbs-background-color: var(--color-grey-225-10-97);
+  --breadcrumbs-border-color: var(--color-grey-225-10-75);
+  --breadcrumbs-focus-outline-color: var(--color-blue-205-100-50);
   --drilldown-fill-color: var(--color-white);
   --drilldown-background-color: var(--color-blue-205-100-50);
+  --drilldown-focus-outline-color: var(--color-blue-205-100-50);
 }
 
 .bjs-breadcrumbs {
@@ -40,13 +44,17 @@
   display: none;
   flex-wrap: wrap;
   align-items: center;
-  top: 30px;
-  left: 30px;
-  padding: 0px;
+  top: 20px;
+  left: 20px;
+  padding: 5px 10px;
   margin: 0px;
   font-family: var(--breadcrumbs-font-family);
   font-size: 16px;
   line-height: normal;
+  background-color: var(--breadcrumbs-background-color);
+  border: solid 1px var(--breadcrumbs-border-color);
+  border-radius: 2px;
+  row-gap: 5px;
 }
 
 .bjs-breadcrumbs-shown .bjs-breadcrumbs {
@@ -63,18 +71,18 @@
 
 .bjs-breadcrumbs li {
   display: inline-flex;
-  padding-bottom: 5px;
   align-items: center;
 }
 
-.bjs-breadcrumbs li a {
+.bjs-breadcrumbs a.bjs-crumb {
   cursor: pointer;
   color: var(--breadcrumbs-item-color);
+  text-decoration: none;
 }
 
-.bjs-breadcrumbs li:last-of-type a {
-  color: inherit;
-  cursor: default;
+.bjs-breadcrumbs a.bjs-crumb:focus-visible {
+  outline: solid 1px var(--breadcrumbs-focus-outline-color);
+  outline-offset: 1px;
 }
 
 .bjs-breadcrumbs li:not(:first-child)::before {
@@ -102,12 +110,16 @@
   cursor: pointer;
   border: none;
   border-radius: 2px;
-  outline: none;
 
   fill: var(--drilldown-fill-color);
   background-color: var(--drilldown-background-color);
 }
 
+.bjs-drilldown:focus-visible {
+  outline: solid 1px var(--drilldown-focus-outline-color);
+  outline-offset: 1px;
+}
+
 .bjs-drilldown-empty {
   display: none;
 }

package/dist/bpmn-modeler.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-modeler v18.25.0
+ * bpmn-js - bpmn-modeler v18.25.1
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -23831,14 +23831,7 @@
 	        return [];
 	      }
 
-	      var title = escapeHTML(parent.name || parent.id);
-	      var link = domify('<li><span class="bjs-crumb"><a title="' + title + '">' + title + '</a></span></li>');
-
-	      link.addEventListener('click', function() {
-	        canvas.setRootElement(parentPlane);
-	      });
-
-	      return link;
+	      return [ { parent: parent, parentPlane: parentPlane } ];
 	    });
 
 	    breadcrumbs.innerHTML = '';
@@ -23848,8 +23841,39 @@
 
 	    containerClasses.toggle(OPEN_CLASS, visible);
 
-	    path.forEach(function(element) {
-	      breadcrumbs.appendChild(element);
+	    path.forEach(function(entry, index) {
+	      var parent = entry.parent,
+	          parentPlane = entry.parentPlane,
+	          title = escapeHTML(parent.name || parent.id);
+
+	      // the last crumb represents the current plane; render it as
+	      // plain, non-interactive text
+	      var isCurrent = index === path.length - 1;
+
+	      var crumb;
+
+	      if (isCurrent) {
+	        crumb = domify(
+	          '<li><span class="bjs-crumb" title="' + title + '">' + title + '</span></li>'
+	        );
+	      } else {
+
+	        // render navigable crumbs as local links so they are focusable
+	        // and keyboard-operable
+	        var href = '#' + escapeHTML(parent.id);
+
+	        crumb = domify(
+	          '<li><a class="bjs-crumb" href="' + href + '" title="' + title + '">' + title + '</a></li>'
+	        );
+
+	        crumb.addEventListener('click', function(event) {
+	          event.preventDefault();
+
+	          canvas.setRootElement(parentPlane);
+	        });
+	      }
+
+	      breadcrumbs.appendChild(crumb);
 	    });
 	  }