Improve accessibility and clean up components (#10198)

src/main/js/widgets/add/addform.scss

@@ -183,13 +183,12 @@
   }
 
   li {
-    @include mixins.item;
+    @include mixins.item($border: false);
 
     -webkit-touch-callout: none;
     user-select: none;
     padding: 0.75rem 1rem;
     min-height: 68px;
-    cursor: pointer;
     display: grid;
     grid-template-columns: auto 1fr;
     gap: 0.25rem 1rem;

src/main/scss/abstracts/_mixins.scss

@@ -56,11 +56,17 @@
   }
 }
 
-@mixin item {
+@mixin item($border: true) {
   position: relative;
+  appearance: none;
   z-index: 0;
   text-decoration: none !important;
-  border-radius: 0.66rem;
+  font-weight: normal;
+  border-radius: var(--form-input-border-radius);
+  cursor: pointer;
+  background: transparent;
+  outline: none;
+  border: none;
 
   &::before,
   &::after {
@@ -74,11 +80,12 @@
   }
 
   &::before {
-    background-color: transparent;
+    background-color: var(--item-background);
+    border: var(--jenkins-border--subtle);
   }
 
   &::after {
-    box-shadow: 0 0 0 0.66rem transparent;
+    box-shadow: 0 0 0 0.5rem transparent;
   }
 
   &:focus-visible {
@@ -102,7 +109,7 @@
       }
 
       &::after {
-        box-shadow: 0 0 0 0.33rem var(--item-box-shadow--focus);
+        box-shadow: 0 0 0 0.25rem var(--item-box-shadow--focus);
       }
     }
 
@@ -113,4 +120,12 @@
       }
     }
   }
+
+  @if $border == false {
+    &:not(:hover, &:active, &:focus) {
+      &::before {
+        border-color: transparent;
+      }
+    }
+  }
 }

src/main/scss/abstracts/_theme.scss

@@ -80,6 +80,13 @@ $semantics: (
     from var(--text-color) 96.8% 0.005 h / 0.8
   );
 
+  // App bar
+  --bottom-app-bar-shadow: color-mix(
+    in sRGB,
+    var(--text-color-secondary) 7.5%,
+    transparent
+  );
+
   // Alert call outs
   --alert-success-text-color: var(--success-color);
   --alert-success-bg-color: color-mix(
@@ -125,8 +132,41 @@ $semantics: (
   // Typography
   --text-color-secondary: var(--secondary);
 
+  // Borders
+  --jenkins-border-width: 1.5px;
+  --jenkins-border-color: color-mix(
+    in sRGB,
+    var(--text-color-secondary) 12%,
+    var(--card-background)
+  );
+  --jenkins-border-color--subtle: color-mix(
+    in sRGB,
+    currentColor 1.5%,
+    transparent
+  );
+
+  /* This is a harsher border - for dividers, content blocks and more */
+  --jenkins-border: var(--jenkins-border-width) solid
+    var(--jenkins-border-color);
+
+  /* This is a subtle border - for increasing contrast on elements, such as buttons, menu and more */
+  --jenkins-border--subtle: var(--jenkins-border-width) solid
+    var(--jenkins-border-color--subtle);
+  --jenkins-border--subtle-shadow: 0 0 0 1.5px
+    var(--jenkins-border-color--subtle);
+
+  @media (resolution <= 1x) {
+    --jenkins-border-width: 2px;
+  }
+
+  @media (prefers-contrast: more) {
+    --focus-input-border: var(--text-color);
+    --jenkins-border-color: var(--text-color);
+    --jenkins-border-color--subtle: var(--text-color);
+  }
+
   // Table
-  --table-background: oklch(from var(--text-color-secondary) l c h / 0.1);
+  --table-background: oklch(from var(--text-color-secondary) l c h / 0.075);
   --table-header-foreground: var(--text-color);
   --table-body-background: var(--background);
   --table-body-foreground: var(--text-color);
@@ -158,7 +198,8 @@ $semantics: (
   // Command Palette
   --command-palette-results-backdrop-filter: contrast(0.7) brightness(1.5)
     saturate(1.4) blur(20px);
-  --command-palette-inset-shadow: inset 0 0 2px 2px rgb(255 255 255 / 0.1);
+  --command-palette-inset-shadow: inset 0 0 2px 2px rgb(255 255 255 / 0.1),
+    var(--jenkins-border--subtle-shadow);
 
   ::backdrop {
     --command-palette-backdrop-background: radial-gradient(
@@ -171,21 +212,23 @@ $semantics: (
   // Tooltips
   --tooltip-backdrop-filter: saturate(2) blur(20px);
   --tooltip-color: var(--text-color);
-  --tooltip-box-shadow: 0 0 8px 2px rgb(0 0 30 / 0.05),
-    0 0 1px 1px rgb(0 0 20 / 0.025), 0 10px 20px rgb(0 0 20 / 0.15);
+  --tooltip-box-shadow: 0 0 8px 2px rgb(0 0 50 / 0.05),
+    var(--jenkins-border--subtle-shadow), 0 10px 50px rgb(0 0 20 / 0.1);
 
   // Dropdowns
   --dropdown-backdrop-filter: saturate(1.5) blur(20px);
-  --dropdown-box-shadow: 0 10px 30px rgb(0 0 20 / 0.2),
-    0 2px 10px rgb(0 0 20 / 0.05), inset 0 -1px 2px rgb(255 255 255 / 0.025);
+  --dropdown-box-shadow: var(--jenkins-border--subtle-shadow),
+    0 10px 30px rgb(0 0 20 / 0.1), 0 2px 10px rgb(0 0 20 / 0.05),
+    inset 0 -1px 2px rgb(255 255 255 / 0.025);
 
   // Dialogs
   ::backdrop {
     --dialog-backdrop-background: hsl(240 10% 20% / 0.8);
   }
 
-  --dialog-box-shadow: 0 10px 40px rgb(0 0 20 / 0.15),
-    0 2px 15px rgb(0 0 20 / 0.05), inset 0 0 2px 2px rgb(255 255 255 / 0.025);
+  --dialog-box-shadow: var(--jenkins-border--subtle-shadow),
+    0 10px 40px rgb(0 0 20 / 0.15), 0 2px 15px rgb(0 0 20 / 0.05),
+    inset 0 0 2px 2px rgb(255 255 255 / 0.025);
 
   // Dark link
   --link-dark-color: var(--text-color);
@@ -219,12 +262,20 @@ $semantics: (
   --card-border-color--active: oklch(
     from var(--text-color-secondary) l c h / 0.5
   );
-  --card-border-width: 2px;
+  --card-border-width: var(--jenkins-border-width);
+
+  @media (prefers-contrast: more) {
+    --card-border-color: var(--text-color);
+  }
 
   // Tab bar
   --tabs-background: oklch(from var(--text-color-secondary) l c h / 0.1);
   --tabs-item-background: transparent;
-  --tabs-item-foreground: var(--text-color);
+  --tabs-item-foreground: color-mix(
+    in sRGB,
+    var(--text-color-secondary),
+    var(--text-color)
+  );
   --tabs-item-background--hover: rgb(0 0 0 / 0.05);
   --tabs-item-foreground--hover: var(--text-color);
   --tabs-item-background--active: rgb(0 0 0 / 0.1);
@@ -268,14 +319,21 @@ $semantics: (
   }
 
   --form-label-font-weight: var(--font-bold-weight);
-  --form-input-padding: 0.625rem;
+  --form-input-padding: 0.5rem 0.625rem;
   --form-input-border-radius: 0.625rem;
-  --form-input-glow: 0 0 0 10px transparent;
-  --form-input-glow--focus: 0 0 0 5px var(--focus-input-glow);
-  --pre-background: rgb(0 0 0 / 0.05);
+  --form-input-glow: 0 0 0 0.5rem transparent;
+  --form-input-glow--focus: 0 0 0 0.25rem var(--focus-input-glow);
+  --pre-background: var(--button-background);
   --pre-color: var(--text-color);
   --selection-color: oklch(from var(--accent-color) l c h / 0.2);
 
+  @media (prefers-contrast: more) {
+    --input-border: var(--text-color) !important;
+    --input-border-hover: var(--text-color) !important;
+    --form-input-glow--focus: 0 0 0 4px
+      color-mix(in sRGB, var(--text-color), transparent);
+  }
+
   // Animations
   --standard-transition: 0.3s ease;
   --elastic-transition: 0.3s cubic-bezier(0, 0.68, 0.5, 1.5);

src/main/scss/base/_style.scss

@@ -152,6 +152,7 @@ pre {
   margin: 0 0 var(--section-padding);
   padding: 0.8rem 1rem;
   border-radius: var(--form-input-border-radius);
+  border: var(--jenkins-border--subtle);
   background-color: var(--pre-background);
   color: var(--pre-color);
   font-family: var(--font-family-mono);
@@ -290,21 +291,13 @@ pre.console {
   padding: 1rem;
   margin: 1rem 0;
   word-break: break-word;
-  border-radius: 6px;
+  border-radius: var(--form-input-border-radius);
+  background-color: var(--button-background);
+  border: var(--jenkins-border--subtle);
   z-index: 0;
 
   --section-padding: 0.8rem;
 
-  &::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: var(--text-color);
-    opacity: 0.05;
-    z-index: -1;
-    border-radius: inherit;
-  }
-
   p:first-of-type {
     margin-top: 0;
   }
@@ -536,7 +529,7 @@ table.fingerprint-in-build td {
     top: 0;
     left: 10px;
     bottom: 0;
-    width: 2px;
+    width: var(--jenkins-border-width);
     background: var(--input-border);
     border-radius: 2px;
     transition: var(--standard-transition);

src/main/scss/components/_alert.scss

@@ -2,8 +2,8 @@
 .jenkins-alert {
   font-size: var(--font-size-sm);
   padding: 15px;
-  margin-bottom: 20px;
-  border: 1px solid transparent;
+  margin-bottom: var(--section-padding);
+  border: var(--jenkins-border-width) solid transparent;
   border-radius: var(--form-input-border-radius);
 
   strong {
@@ -52,4 +52,8 @@
       color: var(--alert-danger-text-color);
     }
   }
+
+  @media (prefers-contrast: more) {
+    border-color: var(--text-color);
+  }
 }

src/main/scss/components/_app-bar.scss

@@ -151,7 +151,7 @@
     top: -30px;
     left: 0;
     right: 0;
-    background: linear-gradient(transparent, rgba(#556, 0.075) 110%);
+    background: linear-gradient(transparent, var(--bottom-app-bar-shadow) 110%);
     max-width: 100%;
     height: 30px;
     opacity: 0;

src/main/scss/components/_breadcrumbs.scss

@@ -30,7 +30,7 @@
       padding: 0.2rem 0.4rem;
 
       & > a {
-        @include mixins.item;
+        @include mixins.item($border: false);
 
         display: inline-flex;
         align-items: center;
@@ -40,7 +40,6 @@
         margin: 0;
         padding: 0;
         color: var(--text-color);
-        text-decoration: none;
         margin-right: 0 !important;
         transition: var(--standard-transition);