0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Bootstrap/site/assets
Gaël Poupard 2bb42a9176
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.
2021-02-10 07:27:43 +02:00
..
js Add a live toast example to the docs (#32760) 2021-01-18 15:10:01 +02:00
scss docs(scroll offset): improve a11y for sticky header (#33027) 2021-02-10 07:27:43 +02:00