Skip to content

Fix WCAG 2.5.5 touch targets and lower tablet sidebar breakpoint to 768px #22891

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 25, 2026
+69 −3
Merged

Fix WCAG 2.5.5 touch targets and lower tablet sidebar breakpoint to 768px #22891

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
089fc6c
Initial plan
Copilot Mar 25, 2026
20575b9
Fix WCAG 2.5.5 touch targets and lower tablet sidebar breakpoint to 7…
Copilot Mar 25, 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
14 changes: 14 additions & 0 deletions docs/src/components/CustomFooter.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,20 @@ const heartIcon = octicons.heart.toSVG({ width: 14, height: 14 });
.footer-terms {
text-align: center;
}

/* WCAG 2.5.5: Minimum 44×44px touch target for footer links on mobile */
.community-feedback a,
.agent-links a,
.footer-terms a {
min-height: 44px;
display: inline-flex;
align-items: center;
padding: 0.25rem 0.5rem;
}

.agent-links {
gap: 0.25rem;
}
}

.heart-icon {
Expand Down
6 changes: 6 additions & 0 deletions docs/src/components/ThemeToggle.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,12 @@ const autoIcon = octicons['device-desktop'].toSVG({ width: 16, height: 16 });

/* Mobile-specific: Ensure minimum 44x44px touch target for WCAG 2.1 Level AAA */
@media (max-width: 768px) {
.theme-label {
min-height: 44px;
display: inline-flex;
align-items: center;
}

.icon-wrapper {
width: 44px;
height: 44px;
Expand Down
33 changes: 33 additions & 0 deletions docs/src/styles/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1635,6 +1635,39 @@ main,
}
}

/* === W2: Lower sidebar breakpoint to 768px for tablet support === */
/* Starlight default is 50rem (800px). At 48rem (768px) the sidebar becomes persistent */
/* so iPad (768×1024) and iPad Pro 11 (834×1194) show a sidebar instead of hamburger menu. */
@media (min-width: 48rem) {
/* Offset main content to make room for the persistent sidebar */
html[data-has-sidebar] {
--sl-content-inline-start: var(--sl-sidebar-width);
}

/* Make the sidebar pane always visible (not overlay) */
.sidebar-pane {
--sl-sidebar-visibility: visible;
width: var(--sl-sidebar-width) !important;
background-color: var(--sl-color-bg-sidebar) !important;
border-inline-end: 1px solid var(--sl-color-hairline-shade) !important;
}
Comment on lines +1647 to +1653
Copy link

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

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

This .sidebar-pane styling applies to all widths >=768px and will override the existing “Only make sidebar transparent on desktop” rule (@media (min-width: 769px) { .sidebar-pane { background: transparent !important; } } earlier in this file). If the intent is only to patch the 768–799px gap in Starlight’s default breakpoint, consider scoping these overrides to that range (e.g., min-width: 48rem AND max-width: 49.999rem / 799px) or avoid overriding desktop-only appearance properties (background/border) while still forcing visibility.

Copilot uses AI. Check for mistakes.

/* Remove the extra header padding that was reserved for the hamburger button */
[data-has-sidebar] .header {
padding-inline-end: var(--sl-nav-pad-x) !important;
}

/* Hide the mobile hamburger toggle since the sidebar is now persistent */
starlight-menu-button button {
Copy link

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

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

The new @media (min-width: 48rem) block overlaps with existing “mobile” styles at exactly 768px (@media (max-width: 768px) elsewhere in this file). At 768px specifically, .custom-header-links are hidden (custom.css:1390–1399), .tablet-nav-wrapper is still hidden (it only shows at 769–900px), and this change hides starlight-menu-button button, which can leave no obvious navigation control at 768px (notably on the splash/home template where there may be no sidebar). Consider aligning all breakpoints to the new boundary (e.g., change mobile queries to max-width: 767px and start tablet at 768px), and/or only hiding the menu button when a sidebar is present (e.g., scope to html[data-has-sidebar]).

Suggested change
starlight-menu-button button {
html[data-has-sidebar] starlight-menu-button button {

Copilot uses AI. Check for mistakes.
display: none !important;
}

/* Restore body scroll when sidebar becomes persistent (was locked when menu was open) */
[data-mobile-menu-expanded] {
overflow: auto !important;
}
}

/* Mobile-specific: Additional touch target improvements for remaining elements */
@media (max-width: 768px) {
/* Skip to content link - accessibility feature */
Expand Down
19 changes: 16 additions & 3 deletions docs/tests/mobile-responsive.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@ import { test, expect } from '@playwright/test';
test.describe('Mobile and Responsive Layout', () => {
const formFactors = [
{ name: 'iPhone 16 (Mobile)', width: 393, height: 852 },
{ name: 'Tablet 4:3 (iPad)', width: 1024, height: 768 },
{ name: 'iPad (768px)', width: 768, height: 1024 },
{ name: 'iPad Pro 11 (834px)', width: 834, height: 1194 },
{ name: 'iPad Landscape (1024px)', width: 1024, height: 768 },
{ name: 'Desktop Portrait', width: 1080, height: 1920 },
{ name: 'Desktop Landscape', width: 1920, height: 1080 },
];
Expand Down Expand Up @@ -46,19 +48,30 @@ test.describe('Mobile and Responsive Layout', () => {
}

test('should have proper content spacing on mobile', async ({ page }) => {
if (formFactor.width <= 768) {
if (formFactor.width < 768) {
await page.goto('/gh-aw/introduction/overview/');
await page.waitForLoadState('networkidle');

// Content should have proper padding
const contentPanel = page.locator('.content-panel').first();
await expect(contentPanel).toBeVisible();

// Sidebar should be hidden on mobile
// Sidebar should be hidden on mobile (below 768px)
const sidebar = page.locator('.sidebar');
await expect(sidebar).not.toBeVisible();
}
});

test('should show persistent sidebar on tablet (WCAG W2)', async ({ page }) => {
if (formFactor.width >= 768) {
await page.goto('/gh-aw/introduction/overview/');
await page.waitForLoadState('networkidle');

// Sidebar should be persistently visible on tablet and desktop (768px+)
const sidebar = page.locator('.sidebar');
await expect(sidebar).toBeVisible();
}
});
});
}
});
Loading