rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-30 22:52:24 +01:00
Code Issues Actions Packages Releases Activity

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

Browse Source 
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.
This commit is contained in:
Gaël Poupard 2021-02-10 06:27:43 +01:00 committed by GitHub
parent 2ab6dbd2d6
commit 2bb42a9176
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
site/assets/scss/_content.scss
View File

@ -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;
}