Improve breadcrumb bar accessibility

core/src/main/resources/hudson/model/Job/configure.jelly

@@ -34,6 +34,8 @@ THE SOFTWARE.
       <script src="${resURL}/jsbundles/section-to-sidebar-items.js" type="text/javascript" defer="true" />
     </l:header>
 
+    <l:breadcrumb title="${%Configuration}" />
+
     <l:side-panel>
       <l:app-bar title="${%Configure}" />
       <div id="tasks" />

core/src/main/resources/lib/layout/breadcrumb.jelly

@@ -43,9 +43,10 @@ THE SOFTWARE.
   </st:documentation>
 
   <j:if test="${mode=='breadcrumbs'}">
-    <li id="${attrs.id}" class="item">
+    <j:set var="hasLink" value="${!(attrs.href == null or h.hyperlinkMatchesCurrentPage(attrs.href))}" />
+    <li id="${attrs.id}" class="jenkins-breadcrumbs__list-item" aria-current="${hasLink ? null : 'page'}">
       <j:choose>
-        <j:when test="${attrs.href == null}">
+        <j:when test="${!hasLink}">
           ${attrs.title}
         </j:when>
         <j:otherwise>

core/src/main/resources/lib/layout/breadcrumbBar.jelly

@@ -37,36 +37,36 @@ THE SOFTWARE.
 
   <st:adjunct includes="lib.layout.breadcrumbs" />
 
-  <div class="top-sticker noedge">
-    <div class="top-sticker-inner">
-      <div class="jenkins-breadcrumbs">
-        <ul id="breadcrumbs">
-          <j:forEach var="anc" items="${request.ancestors}">
-            <j:if test="${h.isModel(anc.object) and anc.prev.url!=anc.url}">
-              <j:set var="mode" value="breadcrumbs" />
-              <l:breadcrumb title="${anc.object == app ? '%Dashboard' : anc.object.displayName}"
-                            href="${anc.url}/"
-                            hasMenu="${h.isModelWithContextMenu(anc.object)}" />
-              <j:choose>
-                <j:when test="${h.isModelWithChildren(anc.object)}">
-                  <li class="children" href="${anc.url}/">
-                    <!-- shows '>' for rendering children -->
-                  </li>
-                </j:when>
-                <j:otherwise>
-                  <li class="separator">
-                  </li>
-                </j:otherwise>
-              </j:choose>
-            </j:if>
-          </j:forEach>
+  <j:set var="contents" trim="true">
+    <d:invokeBody />
+  </j:set>
 
-          <!-- render additional breadcrumb items -->
-          <d:invokeBody />
-        </ul>
+  <div id="breadcrumbBar" class="jenkins-breadcrumbs" aria-label="breadcrumb">
+    <ol class="jenkins-breadcrumbs__list" id="breadcrumbs">
+      <j:forEach var="anc" items="${request.ancestors}" indexVar="index">
+        <j:if test="${h.isModel(anc.object) and anc.prev.url!=anc.url}">
+          <j:set var="mode" value="breadcrumbs" />
+          <l:breadcrumb title="${anc.object == app ? '%Dashboard' : anc.object.displayName}"
+                        href="${contents.length() == 0 and (index == request.ancestors.size() - 1) ? null : anc.url + '/'}"
+                        hasMenu="${h.isModelWithContextMenu(anc.object)}" />
+          <j:choose>
+            <j:when test="${h.isModelWithChildren(anc.object)}">
+              <li class="children" href="${anc.url}/">
+                <!-- shows '>' for rendering children -->
+              </li>
+            </j:when>
+            <j:otherwise>
+              <li class="separator">
+              </li>
+            </j:otherwise>
+          </j:choose>
+        </j:if>
+      </j:forEach>
 
-        <div id="breadcrumb-menu-target"/><!-- this is where the menu gets rendered -->
-      </div>
-    </div>
+      <!-- render additional breadcrumb items -->
+      <j:out value="${contents}" />
+    </ol>
   </div>
+
+  <div id="breadcrumb-menu-target"/><!-- this is where the menu gets rendered -->
 </j:jelly>

core/src/main/resources/lib/layout/layout.jelly

@@ -187,12 +187,10 @@ THE SOFTWARE.
                     searchHelpUrl="${%searchBox.url}"
                     logout="${%logout}"/>
 
-      <div id="breadcrumbBar">
-        <l:breadcrumbBar>
-          <j:set var="mode" value="breadcrumbs" />
-          <d:invokeBody/>
-        </l:breadcrumbBar>
-      </div>
+      <l:breadcrumbBar>
+        <j:set var="mode" value="breadcrumbs" />
+        <d:invokeBody/>
+      </l:breadcrumbBar>
     </j:if>
 
     <div id="page-body" class="app-page-body app-page-body--${layoutType} clear">

test/src/test/java/hudson/model/HudsonTest.java

@@ -34,7 +34,6 @@
 import com.gargoylesoftware.htmlunit.Page;
 import com.gargoylesoftware.htmlunit.WebRequest;
 import com.gargoylesoftware.htmlunit.html.DomElement;
-import com.gargoylesoftware.htmlunit.html.DomNodeUtil;
 import com.gargoylesoftware.htmlunit.html.HtmlAnchor;
 import com.gargoylesoftware.htmlunit.html.HtmlForm;
 import com.gargoylesoftware.htmlunit.html.HtmlPage;
@@ -151,7 +150,7 @@ public void searchIndex() throws Exception {
     public void breadcrumb() throws Exception {
         HtmlPage root = j.createWebClient().goTo("");
         DomElement navbar = root.getElementById("breadcrumbs");
-        assertEquals(1, DomNodeUtil.selectNodes(navbar, "LI/A").size());
+        assertEquals(1, navbar.querySelectorAll(".jenkins-breadcrumbs__list-item").size());
     }
 
     /**

war/src/main/js/util/page.js

@@ -41,11 +41,13 @@ function onWinScroll(callback) {
 }
 
 function pageHeaderHeight() {
-  return elementHeight("#page-header") + breadcrumbBarHeight();
+  return (
+    document.querySelector("#page-header").offsetHeight + breadcrumbBarHeight()
+  );
 }
 
 function breadcrumbBarHeight() {
-  return elementHeight("#breadcrumbBar");
+  return document.querySelector("#breadcrumbBar").offsetHeight;
 }
 
 function removeTextHighlighting(selector) {
@@ -56,10 +58,6 @@ function removeTextHighlighting(selector) {
   });
 }
 
-function elementHeight(selector) {
-  return $(selector).height();
-}
-
 export default {
   onload,
   winScrollTop,

war/src/main/less/abstracts/theme.less

@@ -70,11 +70,11 @@
   // Header dimensions
   --header-item-border-radius: 4px;
 
-  // Breadcrumbs and footer
-  --breadcrumbs-bg: #f8f8f8;
-  --breadcrumbs-border: var(--light-grey);
-  --breadcrumbs-text-color: #4d545d;
-  --breadcrumbs-item-bg-color--hover: var(--light-grey);
+  // Breadcrumbs bar
+  --breadcrumbs-bar-background: hsla(240, 0.2, 0.965, 0.8);
+
+  // Footer
+  --footer-background: hsla(240, 0.2, 0.965, 0.8);
 
   // Alert call outs
   --alert-success-text-color: #155724;

war/src/main/less/base/layout-commons.less

@@ -43,10 +43,6 @@ body {
   margin-left: 0.25rem;
 }
 
-#footer-container {
-  background-color: var(--breadcrumbs-bg);
-}
-
 /* -------------------------------------- */
 
 .app-page-body {

war/src/main/less/base/style.less

@@ -515,20 +515,6 @@ pre.console {
   }
 }
 
-.top-sticker,
-#top-sticker {
-  width: 100%; /* it needs to occupy the entire width or else the underlying content will see through */
-  z-index: 999;
-}
-
-.top-sticker.noedge > .top-sticker-edge {
-  display: none;
-}
-
-.top-sticker.noedge > .top-sticker-inner {
-  padding: 0;
-}
-
 .icon16x16 {
   width: 16px;
   height: 16px;

war/src/main/less/modules/breadcrumbs.less

@@ -1,35 +1,27 @@
-#breadcrumbBar {
+.jenkins-breadcrumbs {
   position: sticky;
   top: 0;
   z-index: 999;
-}
-
-.jenkins-breadcrumbs {
   display: flex;
   align-items: center;
-  padding: 0.5rem 0.7rem 0.5rem 0.75rem;
+  padding: 0.55rem 0.7rem 0.55rem 0.75rem;
   backdrop-filter: blur(15px);
+  overflow-x: auto;
+  background: var(--breadcrumbs-bar-background);
 
-  &::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: var(--table-background);
-    opacity: 0.95;
-  }
-
-  & > ul {
-    display: flex;
-    align-items: center;
+  &__list {
+    display: contents;
     list-style-type: none;
-    margin: 0;
-    padding: 0;
-    flex: 1;
-    flex-wrap: wrap;
-    z-index: 0;
 
-    & > li {
+    & > * {
+      flex-shrink: 0;
+    }
+
+    &-item {
       position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
       color: var(--text-color);
       font-weight: 500;
       font-size: 0.85rem;
@@ -45,14 +37,22 @@
         font-size: inherit;
         margin: 0;
         padding: 0;
-        color: inherit;
+        color: var(--text-color);
         text-decoration: none;
         margin-right: 0 !important;
+        transition: var(--standard-transition);
 
         &::before,
         &::after {
           inset: -0.25rem -0.6rem;
         }
+
+        &:hover,
+        &:active,
+        &:focus,
+        &:focus-visible {
+          color: var(--text-color);
+        }
       }
 
       & > .model-link {
@@ -70,9 +70,9 @@
     .children,
     .separator {
       position: relative;
-      width: 14px;
-      height: 14px;
-      margin: 6px;
+      width: 1rem;
+      height: 1rem;
+      margin: 0.375rem 0.2rem;
 
       &::after {
         content: "";
@@ -81,10 +81,16 @@
         left: 0;
         bottom: 0;
         right: 0;
-        opacity: 0.5;
         transition: var(--standard-transition);
-        background: var(--text-color);
+        background: var(--text-color-secondary);
         mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'%3E%3Ctitle%3EChevron Forward%3C/title%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='48' d='M184 112l144 144-144 144'/%3E%3C/svg%3E");
+        opacity: 0.6;
+      }
+    }
+
+    .separator {
+      &:last-of-type {
+        display: none;
       }
     }
 
@@ -105,6 +111,15 @@
         }
       }
 
+      &:hover,
+      &:active,
+      &:focus,
+      &:focus-visible {
+        &::after {
+          background: var(--text-color);
+        }
+      }
+
       // Increase the hit target
       &::before {
         content: "";
@@ -116,12 +131,6 @@
         background: transparent;
       }
     }
-
-    .separator {
-      &:last-of-type {
-        display: none;
-      }
-    }
   }
 }
 

war/src/main/less/modules/page-footer.less

@@ -1,8 +1,7 @@
 @import url("../abstracts/theme.less");
 
 .page-footer {
-  background-color: var(--breadcrumbs-bg);
-  border-top: 1px solid var(--breadcrumbs-border);
+  background-color: var(--footer-background);
   width: 100%;
   clear: both;
   font-size: var(--font-size-sm);

war/src/main/webapp/scripts/hudson-behavior.js

@@ -2272,7 +2272,7 @@ function ensureVisible(e) {
   }
 
   // if there are any stickers around, subtract them from the viewport
-  handleStickers("top-sticker", function (t) {
+  handleStickers("jenkins-breadcrumbs", function (t) {
     t = t.clientHeight;
     Y += t;
     H -= t;