Skip to content

Fix FeatureGrid 3/4-col overflow on narrow viewports + WCAG 2.4.1 skip link #22463

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

Merged
pelikhan merged 2 commits into from
Mar 23, 2026
Merged

Fix FeatureGrid 3/4-col overflow on narrow viewports + WCAG 2.4.1 skip link #22463

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3d3ff41
Initial plan
Copilot Mar 23, 2026
50fece6
fix: resolve FeatureGrid overflow on iPad Pro 11 and add skip navigat…
Copilot Mar 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/astro.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,7 @@ export default defineConfig({
},
components: {
Head: './src/components/CustomHead.astro',
SkipLink: './src/components/SkipLink.astro',
SocialIcons: './src/components/CustomHeader.astro',
ThemeSelect: './src/components/ThemeToggle.astro',
Footer: './src/components/CustomFooter.astro',
Expand Down
11 changes: 11 additions & 0 deletions docs/src/components/FeatureGrid.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,20 @@ const { columns = 2 } = Astro.props;
grid-template-columns: 1fr;
}

/* 2-col layout: 2 × 320px + 20px gap = 660px → activate at 50rem (800px) */
@media (min-width: 50rem) {
.feature-grid.columns-2 { grid-template-columns: repeat(2, minmax(20rem, 1fr)); }
}

/* 3-col layout: 3 × 320px + 2 × 20px gap = 1000px → activate at 72rem (1152px)
At 50rem the Starlight content area is only ~760px, causing the third column to
overflow past the viewport edge and be clipped. */
@media (min-width: 72rem) {
.feature-grid.columns-3 { grid-template-columns: repeat(3, minmax(20rem, 1fr)); }
}

/* 4-col layout: 4 × 320px + 3 × 20px gap = 1340px → activate at 90rem (1440px) */
Copy link

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The breakpoint comments don’t match the actual rem values used: e.g. 72rem is 1152px (at 16px base), not 1000px, and 90rem is 1440px, not 1340px. Either update the comments to reflect the true conversions/assumptions (root font size, container vs viewport), or adjust the breakpoints to match the stated pixel thresholds.

Suggested change
/* 4-col layout: 4 × 320px + 3 × 20px gap = 1340px → activate at 90rem (1440px) */
/* 4-col layout: 4 × 320px + 3 × 20px gap ≈ 1340px; activate at 90rem (1440px) to allow
extra room for the content container and avoid edge clipping. */

Copilot uses AI. Check for mistakes.
@media (min-width: 90rem) {
.feature-grid.columns-4 { grid-template-columns: repeat(4, minmax(20rem, 1fr)); }
Comment on lines +31 to 45
Copy link

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change is specifically addressing a mid-width overflow regression (~800–1000px), but the existing Playwright responsive coverage (see docs/tests/mobile-responsive.spec.ts form factors) doesn’t exercise that range. Consider adding a viewport around ~900px and asserting no horizontal scrolling on a page that renders FeatureGrid with columns=3/4 to prevent regressions.

Copilot uses AI. Check for mistakes.
}
</style>
7 changes: 7 additions & 0 deletions docs/src/components/SkipLink.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
---

<!-- Skip navigation link for WCAG 2.4.1 compliance.
Visually hidden until focused via keyboard; moves focus directly to the
main content area, bypassing repeated navigation blocks. -->
Comment on lines +5 to +6
Copy link

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The doc comment says this link “moves focus directly to the main content area”, but this component is a plain anchor and won’t programmatically move focus (it will only navigate/scroll to the fragment). Please adjust the comment to avoid claiming focus management unless focus is explicitly handled (e.g., by targeting a focusable element).

Suggested change
Visually hidden until focused via keyboard; moves focus directly to the
main content area, bypassing repeated navigation blocks. -->
Visually hidden until focused via keyboard; allows users to jump directly
to the main content area, bypassing repeated navigation blocks. -->

Copilot uses AI. Check for mistakes.
<a href="#_top" class="skip-link">Skip to main content</a>
45 changes: 24 additions & 21 deletions docs/src/styles/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,26 +95,29 @@
animation: light-glow-move 20s ease-in-out infinite;
}

/* Skip to Content Link - Enhanced Accessibility */
/* Override Starlight's default skip link styles for better visibility */
a[href*="#"][href$="_top"]:focus,
a[href*="#overview"]:focus:first-child {
clip: auto !important;
clip-path: none !important;
position: fixed !important;
top: 1rem !important;
left: 1rem !important;
z-index: 9999 !important;
padding: 1rem 1.5rem !important;
background-color: var(--sl-color-accent) !important;
color: var(--sl-color-text-invert) !important;
text-decoration: none !important;
font-weight: 600 !important;
font-size: 1rem !important;
border-radius: 0.5rem !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
outline: 3px solid var(--sl-color-accent-high) !important;
outline-offset: 2px !important;
/* Skip to Content Link - Enhanced Accessibility (WCAG 2.4.1) */
/* The .skip-link is visually hidden until focused via keyboard, then revealed. */
.skip-link {
position: absolute;
top: -9999px;
left: 0;
z-index: 9999;
padding: 1rem 1.5rem;
background-color: var(--sl-color-accent);
color: var(--sl-color-text-invert);
text-decoration: none;
font-weight: 600;
font-size: 1rem;
border-radius: 0.5rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
outline: 3px solid var(--sl-color-accent-high);
outline-offset: 2px;
white-space: nowrap;
}

.skip-link:focus {
top: 1rem;
left: 1rem;
}

/* Mermaid diagram colors
Expand Down Expand Up @@ -1629,7 +1632,7 @@ main,
/* Mobile-specific: Additional touch target improvements for remaining elements */
@media (max-width: 768px) {
/* Skip to content link - accessibility feature */
a[href="#_top"],
.skip-link,
a[class*="skip"] {
min-height: 44px !important;
min-width: 44px !important;
Expand Down
Loading