docs(scroll offset): improve a11y for sticky header (#33027)

Our current trick works great for headings or landmarks `:target`ed by links activation, however it still allows focus to be hidden under the sticky header.

1. Go to any docs page,
2. use a TOC link to scroll down the page,
3. then `Shift`+`Tab` to navigate backward using keyboard.

You should see on some browsers (mainly Firefox from my tests, but it used to do the same in Chrome) that focused elements isn't visible, hidden by our sticky header.

Applying `scroll-padding-top` to the `:root` solves this without any side-effect—but it requires to drop `scroll-margin-top` for anchors to prevent doubling the offset.

FWIW based on my test, Edgium and Chromium don't really care since they seem to have a new heuristic for such cases, making the focused element scroll to the center of the view.

diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss
index a6c1639b06e9f1bc3b47f98c89efe60de84d6ab3..e55a7aa63473abc2a2392994d4b3e35e2693c849 100644 (file)
--- a/site/assets/scss/_content.scss
+++ b/site/assets/scss/_content.scss
@@ -2,14 +2,14 @@
 // Bootstrap docs content theming
 //
 
-.bd-content {
-  // Offset for the sticky header
-  > [id] {
-    @include media-breakpoint-up(md) {
-      scroll-margin-top: 4rem;
-    }
+// Offset for the sticky header
+@include media-breakpoint-up(md) {
+  :root {
+    scroll-padding-top: 4rem;
   }
+}
 
+.bd-content {
   > h2:not(:first-child) {
     margin-top: 3rem;
   }