Merge main & update to bikkelhart/internet-nl@c0776a43

Author: bwbroersma

frontend/src/css/components.css

@@ -230,14 +230,6 @@
   }
 }
 
-[data-theme="dark"] {
-  color-scheme: dark;
-  
-  .card.large.knowledge-card {
-    border: var(--card-border);
-  }
-}
-
 .card {
   border-radius: 0.5rem;
 
@@ -457,6 +449,7 @@
 .accordion {
   appearance: none;
   overflow: clip;
+  border: 1px solid var(--accordion-border-color);
 
   &::details-content {
     @media (prefers-reduced-motion: no-preference) {
@@ -513,8 +506,13 @@
   .card.large.knowledge-card {
     border: none;
   }
+}
 
-  .accordion {
-    border: 1px solid var(--green-400);
+/* Overwrites for dark theme */
+[data-theme="dark"] {
+  color-scheme: dark;
+  
+  .card.large.knowledge-card {
+    border: var(--card-border);
   }
 }

frontend/src/css/header.css

@@ -291,7 +291,15 @@ header nav {
         padding: 0.5rem 0.75rem;
       }
 
-      .current-language {
+      .current-language-desktop {
+        @media (width <= 73.125rem) {
+          display: none;
+        }
+
+        text-transform: uppercase;
+      }
+
+      .current-language-mobile {
         @media (width >= 73.125rem) {
           display: none;
         }
@@ -353,7 +361,7 @@ header nav {
           content: "";
           position: absolute;
           left: 0;
-          width: 150%;
+          width: 100%;
           height: 1.25rem;
         }
       }
@@ -401,10 +409,7 @@ header nav {
     .nav-subitem {
       display: flex;
       width: 100%;
-
-
 
-
       a, button {
         display: flex;
         font: var(--subnav-link);
@@ -499,10 +504,17 @@ header nav {
       translate: -50% 0;
       left: 50%;
       margin-top: 1.25rem;
+      z-index: 10;
 
       @media (scripting: none) {
         z-index: 2;
       }
+
+      /* Bring focused dropdown to front */
+      &:focus-within,
+      &.focused {
+        z-index: 20;
+      }
     }
 
     &.expanded {

frontend/src/css/result-section.css

@@ -88,7 +88,6 @@
       background-color: unset;
       background-repeat: no-repeat;
       background-size: cover;
-
       display: block;
     }
 
@@ -257,6 +256,7 @@ body.connectiontest .action-card-item:has(.connection) {
   }
 
   .action-card-item a,
+  .action-card-item button,
   .action-card-item .countdown {
     color: var(--card-body-color-action);
     font: var(--card-header-m);
@@ -312,6 +312,21 @@ body.connectiontest .action-card-item:has(.connection) {
       display: none;
     }
   }
+
+  .action-card-item button {
+    background: none;
+    border: none;
+    border-bottom: 0.0625rem solid var(--card-body-color-action);
+    cursor: pointer;
+    text-align: left;
+    width: 100%;
+  
+    
+    &:focus {
+      outline: 2px solid var(--focus-color);
+      outline-offset: 2px;
+    }
+  }
 }
 
 #copy-link {
@@ -614,14 +629,10 @@ meter::-moz-meter-bar {
         font-family: monospace, sans-serif;
       }
 
-      th {
-        border-bottom: 1px solid var(--grey-300);
-      }
-
       td,
       th {
         padding: 0.375rem;
-        font-size: 0.875rem;
+        text-align: left;
 
         &:first-child {
           padding-left: 0;

frontend/src/css/variables.css

@@ -229,6 +229,7 @@
   --accordion-bg-color: light-dark(var(--white-100), var(--black-200));
   --accordion-heading-color: light-dark(var(--black-200), var(--green-100));
   --accordion-body-color: light-dark(var(--black-200), var(--white-100));
+  --accordion-border-color: light-dark(var(--green-400), var(--transparent-600));
 
   /* RESULT STATE COLORS */
   --probing-color: light-dark(var(--green-400), var(--white-100));

frontend/src/js/base/header.js

@@ -46,6 +46,30 @@ function header() {
         subMenu.classList.contains("expanded")
       );
     });
+
+    // Handle focus management for z-index elevation
+    if (subMenu) {
+      const focusIn = () => {
+        document
+          .querySelectorAll(".nav-sublist")
+          .forEach((menu) => menu.classList.remove("focused"));
+        subMenu.classList.add("focused");
+      };
+
+      const focusOut = (event) => {
+        if (
+          !subMenu.contains(event.relatedTarget) &&
+          event.relatedTarget !== toggleSubMenu
+        ) {
+          subMenu.classList.remove("focused");
+        }
+      };
+
+      toggleSubMenu.addEventListener("focusin", focusIn);
+      subMenu.addEventListener("focusin", focusIn);
+      toggleSubMenu.addEventListener("focusout", focusOut);
+      subMenu.addEventListener("focusout", focusOut);
+    }
   });
 
   /* STICKY HEADER */