Skip to content

🔍 Multi-Device Docs Testing Report - 2026-03-25 #22890

@github-actions

Description

@github-actions

Test Summary

Note: The local dev server was started successfully but Playwright runs in a separate network namespace and could not reach the container bridge IP (172.30.0.20). Tests were performed against the production site at github.github.com/gh-aw/ which reflects the currently deployed docs.


Results Overview

  • 🟢 Passed: 12 checks
  • 🟡 Warnings: 2
  • 🔴 Critical: 0

Warnings

🟡 W1 — Small Touch Targets on Mobile (WCAG 2.5.5)

On all mobile viewports (360–428px), multiple interactive elements are below the recommended 44×44px minimum touch target size:

Element Size Device
Theme toggle button 32×32px All mobile
"Community Feedback" link 149×19px All mobile
"llms.txt" link 50×25px All mobile

Approximately 11 elements per mobile viewport fall below the WCAG 2.5.5 minimum. The height issue is most prevalent for inline links in the footer/header area. This is partially a Starlight framework default, but custom CSS can be added to increase padding on the most-used interactive elements.

Recommendation: Add min-height: 44px and display: inline-flex; align-items: center to the theme toggle button, or increase padding on commonly-tapped links.

🟡 W2 — Tablet Breakpoint: Hamburger Menu Active at 768px–834px

On iPad (768×1024) and iPad Pro 11 (834×1194), the site uses the mobile hamburger/overlay navigation pattern rather than a persistent sidebar. The sidebar breakpoint appears to activate around ~1100px. At these tablet sizes:

  • Sidebar is hidden behind a toggle button
  • Navigation menu is full-width overlay
  • Users may not discover the navigation without tapping the menu button

This is default Starlight behavior. Consider whether the sidebar breakpoint should be lowered for a better tablet experience.


View Detailed Test Results by Device

Mobile Devices

Device Viewport Load Overflow Hamburger Search Touch Targets
iPhone 12 390×844 ✅ 200 ✅ none* 🟡 11 small
iPhone 12 Pro Max 428×926 ✅ 200 ✅ none* 🟡 11 small
Pixel 5 393×851 ✅ 200 ✅ none* 🟡 11 small
Galaxy S21 360×800 ✅ 200 ✅ none* 🟡 11 small

*sr-only SPAN elements flagged by overflow check are intentional (screen-reader-only, off-screen positioned) — not real layout issues.

Tablet Devices

Device Viewport Load Overflow Sidebar Hamburger Search
iPad 768×1024 ✅ 200 ✅ none 🟡 overlay
iPad Pro 11 834×1194 ✅ 200 ✅ none 🟡 overlay
iPad Pro 12.9 1024×1366 ✅ 200 ✅ none 🟡 overlay

Desktop Devices

Device Viewport Load Overflow Sidebar Hamburger Search
HD 1366×768 ✅ 200 ✅ none ✅ 300px ✅ hidden
FHD 1920×1080 ✅ 200 ✅ none ✅ 300px ✅ hidden
4K 2560×1440 ✅ 200 ✅ none ✅ 300px ✅ hidden
View Accessibility & SEO Checks
Check Result
<html lang="en"> ✅ Present
Viewport meta tag width=device-width, initial-scale=1
Single H1 per page
Images with alt text ✅ All 1 image has alt
No broken images
Meta description ✅ Present
Open Graph tags og:title, og:description, og:image
Mermaid diagrams render ✅ Successfully rendered
No tiny text (<12px)
ARIA labels on interactive elements aria-label, aria-expanded on nav button
View Desktop Screenshot

Desktop FHD (1920×1080) — Home page:

Desktop view


Recommendations

  1. Touch targets (low effort): Increase the theme toggle button to at least 44×44px via CSS. Consider adding more vertical padding to footer links on mobile.
  2. Tablet nav (medium effort): Consider lowering the Starlight sidebar breakpoint from ~1100px to ~768px so iPad users see a persistent sidebar instead of an overlay.

References:

Generated by Multi-Device Docs Tester ·

  • expires on Mar 27, 2026, 12:18 PM UTC

Metadata

Metadata

Labels

cookieIssue Monster Loves Cookies!documentationImprovements or additions to documentationtesting

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions