Add "Skip to main content" link and fix sticky header scroll offset#358
Open
joshjavier wants to merge 4 commits intobettergovph:mainfrom
Open
Add "Skip to main content" link and fix sticky header scroll offset#358joshjavier wants to merge 4 commits intobettergovph:mainfrom
joshjavier wants to merge 4 commits intobettergovph:mainfrom
Conversation
joshjavier
force-pushed
the
feat/skip-to-main-content
branch
2 times, most recently
from
5829e11 to
84e304b
Compare
jasontorres
requested changes
Oct 1, 2025
joshjavier
force-pushed
the
feat/skip-to-main-content
branch
2 times, most recently
from
6e34bbc to
b14fee5
Compare
jasontorres
previously approved these changes
Oct 1, 2025
joshjavier
force-pushed
the
feat/skip-to-main-content
branch
from
1203077 to
f3f3cb6
Compare
KishonShrill
previously approved these changes
Oct 1, 2025
Member
|
hi @joshjavier, please address the merge conflicts present in your pr - it looks good and we want to get this merged in! cheers |
This commit adds a "Skip to main content" link as the first interactive element on the page. The link is initially hidden but appears at the top-left corner of the page on focus. It's anchored to the main content area, allowing users to skip the header navigation when tabbing through the page. I also ensured that the site has a single `<main>` element for proper semantic structure. This implementation aligns with the Accessibility Statement and WCAG 2.1 guidelines.
This commit adds a dynamic `scroll-padding-top` to the `<html>` element based on the header height, so that when users activate the "Skip to the main content" link, the main content is fully visible and not hidden behind the sticky header. I created a custom `useResizeObserver` hook and placed it in the newly-created `src/hooks` directory to update the padding when the header height changes, e.g., when the user resizes the viewport.
joshjavier
force-pushed
the
feat/skip-to-main-content
branch
from
054049b to
8b6eff9
Compare
Contributor
Author
Hi @mayspc, thanks for the heads-up! I've rebased my branch on top of the latest |
angelofallars
added
bug
Member
|
@joshjavier yahoo, I'm watching this PR now. Can you rebase your branch please. I'll check it once it is done! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Changes made
<main>element for correct navigation.<main>element on the site for semantic correctness.scroll-padding-topon the<html>element (via a customuseResizeObserverhook) so that the sticky header no longer obscures content when using the skip link.Preview
recording.mp4
This PR closes #354.