diff --git a/src/themes/OLH/assets/scss/app.scss b/src/themes/OLH/assets/scss/app.scss index 751f23e5de..4fcd5169a6 100755 --- a/src/themes/OLH/assets/scss/app.scss +++ b/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 { diff --git a/src/themes/clarity/assets/css/clarity.css b/src/themes/clarity/assets/css/clarity.css index aab33eb37b..c0a3744b66 100644 --- a/src/themes/clarity/assets/css/clarity.css +++ b/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 ======================================================================== */ diff --git a/src/themes/clean/assets/css/clean.css b/src/themes/clean/assets/css/clean.css index 0dfe9ad5aa..2cfa45d0dd 100644 --- a/src/themes/clean/assets/css/clean.css +++ b/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 */