fix(focus): guaranteed focus visibility when fixed header overlaps

scss/_back-to-top.scss

@@ -1,7 +1,9 @@
 // Boosted only
 // See https://moderncss.dev/pure-css-smooth-scroll-back-to-top/
-[id="#{$back-to-top-target-id}"]:target {
-  scroll-margin-top: $back-to-top-target-offset-top;
+@if $enable-fixed-header {
+  [id="#{$back-to-top-target-id}"]:target {
+    scroll-margin-top: $back-to-top-target-offset-top;
+  }
 }
 
 .back-to-top {

scss/_reboot.scss

@@ -33,6 +33,17 @@
       scroll-behavior: smooth;
     }
   }
+
+  // Boosted mod: Improve focus visibility when fixed/sticky header is used
+  // See https://caniuse.com/?search=scroll-padding
+  @if $enable-fixed-header {
+    scroll-padding-top: $scroll-offset-top / 2;
+
+    @include media-breakpoint-up(lg) {
+      scroll-padding-top: $scroll-offset-top;
+    }
+  }
+  // End mod
 }
 
 

scss/_variables.scss

@@ -278,6 +278,7 @@ $enable-validation-icons:     true !default;
 $enable-negative-margins:     false !default;
 $enable-deprecation-messages: false !default;
 $enable-important-utilities:  true !default;
+$enable-fixed-header:         true !default; // Boosted mod: used to apply scroll-padding-top
 
 // Prefix for :root CSS variables
 
@@ -1530,11 +1531,14 @@ $pre-line-height:                   1.25 !default; // Boosted mod
 // Boosted mod
 //
 
+//// Scroll margin
+$scroll-offset-top:              $spacer * 6 !default; // Matching .navbar computed height
+
 //// Back to top
 // scss-docs-start back-to-top
 $back-to-top-display-threshold:  100vh !default;
 $back-to-top-target-id:          "top" !default;
-$back-to-top-target-offset-top:  $spacer * 5 !default; // Matching .navbar computed height
+$back-to-top-target-offset-top:  $scroll-offset-top !default;
 $back-to-top-offset:             $spacer * 1.5 !default;
 $back-to-top-offset-right:       $back-to-top-offset !default;
 $back-to-top-offset-bottom:      $back-to-top-offset !default;

site/assets/scss/_boosted.scss

@@ -1,4 +1,12 @@
 // stylelint-disable selector-max-id
+:root {
+  scroll-padding-top: $offset-top / 2;
+
+  @include media-breakpoint-up(lg) {
+    scroll-padding-top: $offset-top;
+  }
+}
+
 body {
   padding-top: $spacer * 2.5;
 

site/assets/scss/_variables.scss

@@ -13,7 +13,7 @@ $dropdown-active-icon: $form-check-input-checked-bg-image;
 
 $zindex-skippy: 1080;
 
-$offset-top: add(10rem, $border-width / 2);
+$offset-top: 12rem;
 
 $sidebar-height:         subtract(100vh, add($offset-top, 2rem));
 $sidebar-base-padding:   $spacer / 2;

site/content/docs/5.0/customize/options.md

@@ -26,4 +26,5 @@ You can find and customize these variables for key global options in Boosted's `
 | `$enable-negative-margins`     | `true` or `false` (default)           | Enables the generation of [negative margin utilities]({{< docsref "/utilities/spacing#negative-margin" >}}). |
 | `$enable-deprecation-messages` | `true` or `false` (default)           | Set to `true` to show warnings when using any of the deprecated mixins and functions that are planned to be removed in `v5`. |
 | `$enable-important-utilities`  | `true` (default) or `false`           | Enables the `!important` suffix in utility classes. |
+| `$enable-fixed-header`         | `true` (default) or `false`           | Set `scroll-padding-top` rule to root element, preventing focus from being hidden under a fixed header. |
 {{< /bs-table >}}

site/content/docs/5.0/getting-started/accessibility.md

@@ -53,16 +53,24 @@ Boosted includes support for the [`prefers-reduced-motion` media feature](https:
 
 On browsers that support `prefers-reduced-motion`, and where the user has *not* explicitly signaled that they'd prefer reduced motion (i.e. where `prefers-reduced-motion: no-preference`), Boosted enables smooth scrolling using the `scroll-behavior` property.
 
+<!-- Boosted mod -->
 ### Focus visibility
 
 Boosted includes [WICG's `:focus-visible` polyfill](https://github.com/WICG/focus-visible) to ensure an enhanced focus visibility for keyboard users while shutting down focus styles on active state.
 
+#### Under a fixed header
+
+When using a fixed (or sticky) header, tabbing backward often hides focused element under the header. Boosted sets `scroll-padding-top` property for such case. This feature is configurable in two ways:
+
+1. `$scroll-offset-top` variable defines the offset,
+2. and [`$enable-fixed-header` allows to drop this rule]({{< docsref "/customize/options" >}}) if you don't use a fixed header.
+
 ### Minimum target size
 
 Boosted provides `target-size()` mixin to ensure a minimum target size, adding a centered pseudo-element with a minimum size —defaulting to `44px` to pass [WCAG 2.1 "Target Size" Success Criterion (2.5.5)](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html)— alongside a few arguments to fit specific needs (eg. different width and height, using `::after` instead of `::before`, etc.).
 
 {{< scss-docs name="target-size" file="scss/mixins/_target-size.scss" >}}
-
+<!-- End mod -->
 
 ## Additional resources