Fix WCAG 2.5.5 touch targets and lower tablet sidebar breakpoint to 768px#22891
Fix WCAG 2.5.5 touch targets and lower tablet sidebar breakpoint to 768px#22891
Conversation
…68px - W1: Add min-height 44px touch targets for footer links (Community Feedback, llms.txt, agent links) in CustomFooter.astro - W1: Add min-height 44px to theme-label wrapper in ThemeToggle.astro - W2: Lower sidebar breakpoint from 800px to 768px in custom.css so iPads show persistent sidebar instead of hamburger overlay - Tests: Add iPad 768px and iPad Pro 11 834px form factors, add tablet sidebar visibility test, fix mobile threshold from <= to <768px" Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com> Agent-Logs-Url: https://github.com/github/gh-aw/sessions/70fed5a6-f2d1-42f9-9fe5-965590e3c0bc
There was a problem hiding this comment.
Pull request overview
Improves docs site accessibility and tablet UX by increasing mobile touch target sizes and making the Starlight sidebar persist at 768px+ (instead of ~800px).
Changes:
- Increased minimum touch target sizes for footer links and theme toggle on mobile.
- Lowered the persistent sidebar breakpoint to 768px via custom CSS overrides.
- Expanded Playwright responsive tests to cover 768px/834px tablet viewports and assert sidebar visibility at the new breakpoint.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| docs/tests/mobile-responsive.spec.ts | Adds iPad/iPad Pro viewports and a new assertion that the sidebar is visible at ≥768px; updates the mobile boundary check to < 768. |
| docs/src/styles/custom.css | Introduces a @media (min-width: 48rem) block to force persistent sidebar behavior at 768px+ and hide the hamburger. |
| docs/src/components/ThemeToggle.astro | Ensures the theme toggle’s outer label meets minimum touch target height on mobile. |
| docs/src/components/CustomFooter.astro | Ensures footer links meet minimum touch target height on mobile. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| } | ||
|
|
||
| /* Hide the mobile hamburger toggle since the sidebar is now persistent */ | ||
| starlight-menu-button button { |
There was a problem hiding this comment.
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]).
| starlight-menu-button button { | |
| html[data-has-sidebar] starlight-menu-button button { |
| /* 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; | ||
| } |
There was a problem hiding this comment.
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.
Addresses two accessibility warnings from the 2026-03-25 multi-device docs test: undersized touch targets on mobile (WCAG 2.5.5) and the sidebar remaining hidden behind a hamburger at 768–834px tablet viewports.
W1 — Touch targets
CustomFooter.astro: Footer links (Community Feedback, llms.txt, agent links, Terms/Privacy) had heights as small as 19px. Addedmin-height: 44px; display: inline-flex; align-items: centerunder@media (max-width: 768px).ThemeToggle.astro: Existing fix only targeted.icon-wrapper; addedmin-height: 44pxto the outer.theme-labelwrapper so the full tap area meets the minimum.W2 — Tablet sidebar breakpoint
Starlight's default persistent-sidebar breakpoint is
50rem(800px). iPads at 768px fall below this, forcing the hamburger overlay.Added
@media (min-width: 48rem)incustom.cssto:--sl-content-inline-start: var(--sl-sidebar-width)onhtml[data-has-sidebar]--sl-sidebar-visibility: visibleand correct dimensions on.sidebar-panestarlight-menu-button button(hamburger no longer needed)overflow: autoon[data-mobile-menu-expanded]Tests
Updated
mobile-responsive.spec.ts:iPad (768px)andiPad Pro 11 (834px)viewportsshould show persistent sidebar on tabletassertion (sidebar visible at ≥768px)<= 768→< 768to match the new breakpoint boundary✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.