🔍 Multi-Device Docs Testing Report - 2026-04-26

[github-actions]

Test Summary

• Triggered by: @pelikhan
• Workflow run: §24956161040
• Devices targeted: 10 (Mobile ×4, Tablet ×3, Desktop ×3)
• Test method: HTML structural analysis (curl fallback) — Playwright browser was unreachable due to Docker network isolation
• Test date: 2026-04-26
• Server: Astro v6.1.8 + Starlight v0.38.3 on port 4321

Results Overview

• 🟢 Structural/Accessibility checks: Passed (all 4 pages sampled)
• 🟡 Warnings: 1 (skip link target naming)
• 🔴 Critical: 0
• ⚪ Visual/interactive layout tests: Skipped (Playwright network isolation)

Accessibility Findings

All pages consistently showed:

• ✅ <html lang="en" dir="ltr"> — language attribute set
• ✅ <meta name="viewport" content="width=device-width, initial-scale=1"> — responsive viewport configured
• ✅ Skip link present: <a href="#_top" class="skip-link">Skip to main content</a> targeting <h1 id="_top"> inside <main>
• ✅ Primary nav labeled: <nav aria-label="Primary navigation">
• ✅ Sidebar labeled: <nav aria-label="Main"> (doc pages)
• ✅ Hamburger button has aria-label="Toggle navigation menu" and aria-expanded
• ✅ Search labeled: aria-label="Search" (pagefind-based)
• ✅ Video embeds have descriptive aria-label attributes
• ✅ All images have alt attributes (no bare <img> tags without alt)

🟡 Warning — Skip link naming: The skip link href="#_top" maps to the <h1> heading inside <main>. The anchor name _top implies "top of page" but actually skips to content. Functionality is correct, but renaming the anchor to #main-content or #content would follow WCAG 2.4.1 convention more clearly.

Structural Findings (Pages Tested)

Page	HTTP	<header>	<nav> (primary)	Sidebar	<main>	<footer>	TOC aside
/gh-aw/ (homepage)	200	✅	✅	n/a (landing)	✅	✅	n/a
/gh-aw/guides/getting-started-mcp/	200	✅	✅	✅	✅	✅	✅
/gh-aw/reference/faq/	200	✅	✅	✅	✅	✅	✅
/gh-aw/blog/	200	✅	✅	✅	✅	✅	✅

View Additional Element Checks

Homepage extras:

• Tablet hamburger menu: <button class="hamburger-btn" aria-label="Toggle navigation menu" aria-expanded="false" aria-controls="tablet-nav-dropdown">
• Tablet dropdown nav hidden by default: <nav id="tablet-nav-dropdown" aria-label="Primary navigation" hidden>
• Theme switcher: <starlight-theme-select> with Auto/Dark/Light options
• OG/Twitter meta: og:image, og:title, twitter:card, twitter:image — complete
• RSS feed: <link href=".../blog/rss.xml" rel="alternate">
• Favicon SVG: present
• Custom fonts (Mona Sans) preloaded with rel="preload" + font-display: swap
• data-has-hero attribute set for landing-page CSS variant

Doc page extras (guides, faq, blog):

• Left sidebar with full site tree
• Right sidebar (<aside class="right-sidebar-container">) with in-page TOC
• Mobile TOC toggle via aria-labelledby="starlight__on-this-page--mobile"
• Print-hidden sidebars (print:hidden)

View Visual Testing Limitation Details

Why Playwright was unavailable:
The Playwright MCP server runs in a container with --network host, meaning its localhost is the Docker host — not the agent container. The agent container's bridge IP (172.30.0.20) was not reachable from the Playwright container, resulting in net::ERR_CONNECTION_REFUSED / TimeoutError on navigation.

What could NOT be verified visually:

• Horizontal overflow on narrow viewports (≤428px mobile, ≤768px tablet)
• CSS sidebar collapse at mobile breakpoints
• Mobile menu toggle animation and z-index stacking
• Touch target sizes on mobile devices
• Code block horizontal scroll behavior
• Image lazy-loading and placeholder rendering
• Dark/light theme switch visual rendering

Devices planned but untested visually:

• Mobile: iPhone 12 (390×844), iPhone 12 Pro Max (428×926), Pixel 5 (393×851), Galaxy S21 (360×800)
• Tablet: iPad (768×1024), iPad Pro 11 (834×1194), iPad Pro 12.9 (1024×1366)
• Desktop: HD (1366×768), FHD (1920×1080), 4K (2560×1440)

Recommendations

1. Rename skip link anchor (low priority): Change <h1 id="_top"> to <h1 id="main-content"> and update href="#_top" → href="#main-content" on the skip link. This improves clarity and aligns with WCAG 2.4.1 best practice.

2. Investigate Playwright connectivity (infrastructure): The AWF Docker network configuration prevents Playwright from reaching the agent container's bridge IP. Future test runs would benefit from a shared network or port-forwarding solution to enable visual screenshot tests.

3. Add viewport overflow test to CI (enhancement): A simple Node.js script using page.evaluate(() => document.documentElement.scrollWidth > window.innerWidth) at each breakpoint would catch horizontal overflow regressions without requiring Playwright visual diffs.

References:

• §24956161040

Generated by Multi-Device Docs Tester · ● 679.1K · ◷

• expires on Apr 28, 2026, 12:16 PM UTC