From 2bb42a9176e7ea361aa1ab0050da5be6a5cb56ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= Date: Wed, 10 Feb 2021 06:27:43 +0100 Subject: [PATCH] docs(scroll offset): improve a11y for sticky header (#33027) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- site/assets/scss/_content.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index a6c1639b06..e55a7aa634 100644 --- 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; }