Description
Adds scroll-margin-top to the documentation styles https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top
Motivation & Context
When navigating with the keyboard, if you scroll down a documentation page and then navigate in reverse (Shift+Tab), keyboard focus can land behind the sticky header. This small CSS addition prevents this from happening.
With a hat-tip to @joelamyman for the inspiration.
Type of changes
-
Bug fix (non-breaking change which fixes an issue) -
New feature (non-breaking change which adds functionality) -
Refactoring (non-breaking change) -
Breaking change (fix or feature that would change existing functionality)
Video
Screen recording showing the reverse keyboard navigation before (with me jiggling the mouse at the top whenever keyboard focus is obscured by the sticky header) and after this addition.
https://user-images.githubusercontent.com/895831/213894362-fd4a659e-9e36-460a-87af-cbbc8636f8f9.mp4
Note that code blocks still seem to have a funky behaviour, but this looks more like a browser bug/shortcoming.
Live previews
Scroll down/jump to "Community", then navigate in reverse using Shift+Tab