[WCAG 2.4.11] Add scroll-padding to prevent sticky overlays from obscuring focused elements#3532
Open
rosanusi wants to merge 2 commits into
Open
[WCAG 2.4.11] Add scroll-padding to prevent sticky overlays from obscuring focused elements#3532rosanusi wants to merge 2 commits into
rosanusi wants to merge 2 commits into
Conversation
…elements Ensures keyboard-focused items are not hidden behind the top nav, sticky banners, bottom nav, or sticky table headers/footers per SC 2.4.11. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
…line-before errors Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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
1 participant
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.
Description
Fixes WCAG 2.2 SC 2.4.11 (Focus Not Obscured — Minimum) across all authenticated routes. ui-main had seven persistent sticky/fixed overlays and zero scroll accommodation — keyboard-focused elements below the fold would auto-scroll flush with the viewport top, placing them entirely behind the top-nav or other overlays.
Root cause:
scroll-padding-topandscroll-padding-bottomwere never applied to any scroll container in the codebase (confirmed via negative grep). The fix is structural: add scroll accommodation to the two scroll contexts where obscuring occurs.Changes:
src/app.css— Adds--banner-height: 0pxand--bottom-nav-height: 4rem(reset to0pxatmdbreakpoint) to:rootso both values are always defined and mobile/desktop behave correctly without JavaScript.src/lib/holocene/main-content-container.svelte— Appliesscroll-padding-top: calc(var(--top-nav-height, 3rem) + var(--banner-height, 0px))andscroll-padding-bottom: var(--bottom-nav-height, 0px)on#content-wrapper. Covers: top-nav (always present), conditional banner stacking, and mobile bottom-nav.src/lib/holocene/banner/banner.svelte— Measures actual banner height viabind:clientHeightand publishes it to--banner-heighton:rootreactively. Resets to0pxwhen banner is dismissed or not shown, keeping the page-levelscroll-padding-topaccurate.src/lib/holocene/table/paginated-table/index.svelte— Appliesscroll-padding-top: var(--table-header-h, 2.25rem)andscroll-padding-bottom: {footerHeight}pxon the table scroll container (nested scroll context).footerHeightis measured live viabind:clientHeighton the sticky footer div. Covers: Holocene Table sticky<thead>and paginated-table sticky footer.Overlays addressed:
src/lib/components/top-nav.svelte:26scroll-padding-topvia--top-nav-height<thead>src/lib/holocene/table/table.svelte:74scroll-padding-topon paginated-table containersrc/lib/holocene/table/paginated-table/index.svelte:65scroll-padding-bottomtracked livesrc/lib/holocene/banner/banner.svelte:19--banner-heightmeasured and stacked into calc()src/lib/components/bottom-nav.svelte:138scroll-padding-bottomvia--bottom-nav-heightsrc/lib/holocene/drawer.svelte:70src/lib/holocene/toaster.svelte:26Screenshots
No visual change at rest. The fix affects scroll position when focusing elements below the viewport fold via keyboard navigation.
Design
N/A — structural CSS fix, no visual design change.
Testing
<thead>--banner-heightresets to0pxand scroll-padding-top shrinks accordinglyscrollIntoView— confirm no regressionChecklist
Docs
No documentation changes required.
A11y-Audit-Ref: 2.4.11-scroll-accommodation-missing