Fix #5470, #5472, #5278: keyboard focus ring gaps in clarity, clean and OLH

src/themes/OLH/assets/scss/app.scss

@@ -2005,6 +2005,27 @@ input[type="submit"]:focus-visible {
     box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-dark);
 }
 
+/* The carousel slide link is a full-bleed overlay, so a ring drawn
+   outside its box is clipped by the viewport on flush edges. Draw the
+   pair inset instead: a dark inner-shadow band with the light outline
+   overlapping its inner half, so both bands sit on the slide image.
+   The generic "li a" negative-margin workaround above displaces this
+   absolutely positioned link 4px off its slide, splitting the ring in
+   two, so reset it here. */
+.orbit .box-link {
+    margin: 0;
+    padding: 0;
+}
+
+.orbit .box-link:focus,
+.orbit .box-link:focus-visible {
+    outline: 2px var(--focus-light) solid;
+    outline-offset: calc(-2px - var(--focus-ring-size));
+    box-shadow:
+        inset 0 0 0 var(--focus-ring-size) var(--focus-dark),
+        inset 0 0 0 calc(var(--focus-ring-size) + 4px) var(--focus-light);
+}
+
 /* end of WCAG 2.4.7 Focus Visible - Two-Color Focus Indicator (Technique C40) */
 
 .preprint-section {

src/themes/clarity/assets/css/clarity.css

@@ -1669,6 +1669,34 @@ textarea.tinymce:focus-visible,
   background-image: none;
 }
 
+/* Text-entry and select fields get the ring on any focus, not just
+   :focus-visible: browser focus-visible heuristics are unreliable for
+   date inputs (the ring drops out between date segments), and focus on
+   these fields always implies keyboard interaction anyway. The is-valid
+   and is-invalid variants are needed to outrank Bootstrap's
+   .form-control.is-valid:focus glow. */
+input[type="text"]:focus,
+input[type="email"]:focus,
+input[type="password"]:focus,
+input[type="search"]:focus,
+input[type="number"]:focus,
+input[type="date"]:focus,
+input[type="datetime-local"]:focus,
+input[type="time"]:focus,
+input[type="url"]:focus,
+input[type="tel"]:focus,
+input[type="file"]:focus,
+select:focus,
+textarea:focus,
+.form-control:focus,
+.form-control.is-valid:focus,
+.form-control.is-invalid:focus,
+.custom-select:focus {
+  outline: 2px var(--focus-outline) solid;
+  outline-offset: 0;
+  box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-shadow);
+}
+
 .carousel-control-next:focus-visible,
 .carousel-control-prev:focus-visible{
   outline: 2px var(--focus-outline) solid;
@@ -1677,6 +1705,21 @@ textarea.tinymce:focus-visible,
   opacity: 1;
 }
 
+/* The header logo link wraps an image, so the standard ring can lose
+   both bands at once: the light outline against a pale logo and the
+   dark shadow against a dark or tinted header. A second light band
+   outside the dark one keeps the indicator visible on any header
+   colour. */
+.site-header a:focus,
+.site-header a:focus-visible {
+  outline: 2px var(--focus-outline) solid;
+  outline-offset: 0;
+  box-shadow:
+    0 0 0 var(--focus-ring-size) var(--focus-shadow),
+    0 0 0 calc(var(--focus-ring-size) + 2px) var(--focus-outline);
+  display: inline-block;
+}
+
 /* ========================================================================
    Media Queries
    ======================================================================== */

src/themes/clean/assets/css/clean.css

@@ -1124,6 +1124,7 @@ span + .btn-background {
     .article-block a,
     .site-header a ,
     .site-footer a,
+    .carousel-caption a,
     p a ,
     li a {
         display: inline-block;
@@ -1212,6 +1213,35 @@ textarea.tinymce:focus,
     box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-dark);
 }
 
+/* Bootstrap's own .carousel-control-(prev|next):focus outranks the
+   universal ring and removes its light outline half, leaving a
+   dark-only indicator over dark slide imagery. Restore the full pair
+   and keep the control opaque while focused. */
+.carousel-control-prev:focus,
+.carousel-control-next:focus,
+.carousel-control-prev:focus-visible,
+.carousel-control-next:focus-visible {
+    outline: 2px var(--focus-light) solid;
+    outline-offset: 0;
+    box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-dark);
+    opacity: 1;
+}
+
+/* The header logo link wraps an image, so the standard ring can lose
+   both bands at once: the light outline against a pale logo and the
+   dark shadow against a dark or tinted header. A second light band
+   outside the dark one keeps the indicator visible on any header
+   colour. */
+.site-header a:focus,
+.site-header a:focus-visible {
+    outline: 2px var(--focus-light) solid;
+    outline-offset: 0;
+    box-shadow:
+        0 0 0 var(--focus-ring-size) var(--focus-dark),
+        0 0 0 calc(var(--focus-ring-size) + 2px) var(--focus-light);
+    display: inline-block;
+}
+
 /* end of WCAG 2.4.7 Focus Visible - Two-Color Focus Indicator (Technique C40) */
 
 /* Banner for hero / large image */