Fix tests + accessibility

src/main/js/components/header/actions-overflow.js

@@ -65,7 +65,8 @@ export default function computeActions() {
     const originalHref = link.getAttribute("href");
     const isTouchDevice = window.matchMedia("(hover: none)").matches;
 
-    if (isTouchDevice) {
+    // HTMLUnit doesn't register itself as supporting hover, thus the href is removed when it shouldn't be
+    if (isTouchDevice && !window.isRunAsTest) {
       link.removeAttribute("href");
     } else {
       link.setAttribute("href", originalHref);

src/main/js/components/header/index.js

@@ -2,6 +2,16 @@ import computeActions from "@/components/header/actions-overflow";
 import computeBreadcrumbs from "@/components/header/breadcrumbs-overflow";
 
 function init() {
+  // Recompute what actions and breadcrumbs should be visible when the viewport size is changed
+  computeOverflow();
+  let lastWidth = window.innerWidth;
+  window.addEventListener("resize", () => {
+    if (window.innerWidth !== lastWidth) {
+      lastWidth = window.innerWidth;
+      computeOverflow();
+    }
+  });
+
   // Fade in the page header on scroll, increasing opacity and intensity of the backdrop blur
   window.addEventListener("scroll", () => {
     const navigation = document.querySelector("#page-header");
@@ -24,23 +34,13 @@ function init() {
       navigation.style.setProperty(
         "--border-opacity",
         Math.min(
-          prefersContrast ? 100 : 10,
+          prefersContrast ? 100 : 15,
           prefersContrast ? scrollY * 3 : scrollY,
         ) + "%",
       );
     }
   });
 
-  // Recompute what actions and breadcrumbs should be visible when the viewport size is changed
-  let lastWidth = window.innerWidth;
-  window.addEventListener("resize", () => {
-    if (window.innerWidth !== lastWidth) {
-      lastWidth = window.innerWidth;
-      computeOverflow();
-    }
-  });
-  computeOverflow();
-
   // We can't use :has due to HtmlUnit CSS Parser not supporting it, so
   // this is a workaround for that same behaviour
   window.addEventListener("load", () => {

src/main/scss/abstracts/_theme.scss

@@ -70,6 +70,7 @@ $semantics: (
 
   // Header
   --header-background: var(--background);
+  --header-border: var(--text-color-secondary);
   --header-color: var(--text-color);
   --header-height: 4.25rem;
 
@@ -153,6 +154,7 @@ $semantics: (
   }
 
   @media (prefers-contrast: more) {
+    --header-border: var(--text-color);
     --focus-input-border: var(--text-color);
     --jenkins-border-color: var(--text-color);
     --jenkins-border-color--subtle: var(--text-color);

src/main/scss/components/_breadcrumbs.scss

@@ -90,12 +90,19 @@
         width: 1rem;
         height: 1.25rem;
         flex-shrink: 0;
-        background: var(--text-color-secondary);
         mask-size: contain;
         mask-position: center;
         mask-repeat: no-repeat;
         mask-image: url("data:image/svg+xml,%3Csvg width='10' height='20' viewBox='0 0 10 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 18L8 2' stroke='black' stroke-width='1.5px' stroke-linecap='round'/%3E%3C/svg%3E%0A");
-        opacity: 0.3;
+        background: color-mix(
+          in sRGB,
+          var(--text-color-secondary) 30%,
+          transparent
+        );
+
+        @media (prefers-contrast: more) {
+          background: var(--text-color);
+        }
       }
 
       &:last-of-type {

src/main/scss/components/_page-header.scss

@@ -29,7 +29,7 @@
     border-bottom: var(--jenkins-border-width) solid
       color-mix(
         in sRGB,
-        var(--text-color-secondary) var(--border-opacity),
+        var(--header-border) var(--border-opacity),
         transparent
       );
     background-clip: padding-box;