Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Docs: add scroll-margin-top for keyboard navigation #37926

Merged
merged 1 commit into from
Feb 14, 2023
Merged

Docs: add scroll-margin-top for keyboard navigation #37926

merged 1 commit into from
Feb 14, 2023

Conversation

patrickhlauke
Copy link
Member

@patrickhlauke patrickhlauke commented Jan 21, 2023 •
edited
Loading

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.

bootstrap-scroll-margin-before-after.mp4

Note that code blocks still seem to have a funky behaviour, but this looks more like a browser bug/shortcoming.

Live previews

https://deploy-preview-37926--twbs-bootstrap.netlify.app/docs/5.3/getting-started/introduction/#community

Scroll down/jump to "Community", then navigate in reverse using Shift+Tab

@patrickhlauke patrickhlauke force-pushed the patrickhlauke-docs-scroll-margin branch from 75c4087 to c416af8 Compare January 21, 2023 23:23
@patrickhlauke patrickhlauke force-pushed the patrickhlauke-docs-scroll-margin branch from c416af8 to c5943a3 Compare January 21, 2023 23:27
@patrickhlauke patrickhlauke marked this pull request as ready for review January 21, 2023 23:46
@patrickhlauke patrickhlauke requested a review from a team as a code owner January 21, 2023 23:46
@mdo
Copy link
Member

mdo commented Jan 27, 2023

Wow, nice! This adds the scroll offset without that annoying bug we saw (where clicking a dropdown in the navbar scrolled you back up the page a little each time). Maybe we just add this to the docs.scss stylesheet instead of a new partial?

@patrickhlauke
Copy link
Member Author

patrickhlauke commented Jan 27, 2023 •
edited
Loading

Wow, nice! This adds the scroll offset without that annoying bug we saw (where clicking a dropdown in the navbar scrolled you back up the page a little each time). Maybe we just add this to the docs.scss stylesheet instead of a new partial?

@mdo as the docs.scss is, up to now, mostly just calling partials, I thought I'd stick with that same philosophy/approach here to keep things nice and neat. not fussed about it either way, but think it would be odd if just for this, we start putting actual styles definitions in the docs.scss itself

@mdo mdo merged commit d0fece9 into main Feb 14, 2023
@mdo mdo deleted the patrickhlauke-docs-scroll-margin branch February 14, 2023 16:53
@patrickhlauke patrickhlauke mentioned this pull request Mar 6, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
accessibility docs
Projects
No open projects
v5.3.0-alpha2
Status: Done
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@patrickhlauke @mdo