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
-
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.
-
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.
-
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:
Generated by Multi-Device Docs Tester · ● 679.1K · ◷
Test Summary
@pelikhanResults Overview
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<a href="#_top" class="skip-link">Skip to main content</a>targeting<h1 id="_top">inside<main><nav aria-label="Primary navigation"><nav aria-label="Main">(doc pages)aria-label="Toggle navigation menu"andaria-expandedaria-label="Search"(pagefind-based)aria-labelattributesaltattributes (no bare<img>tags withoutalt)🟡 Warning — Skip link naming: The skip link
href="#_top"maps to the<h1>heading inside<main>. The anchor name_topimplies "top of page" but actually skips to content. Functionality is correct, but renaming the anchor to#main-contentor#contentwould follow WCAG 2.4.1 convention more clearly.Structural Findings (Pages Tested)
<header><nav>(primary)<main><footer>/gh-aw/(homepage)/gh-aw/guides/getting-started-mcp//gh-aw/reference/faq//gh-aw/blog/View Additional Element Checks
Homepage extras:
<button class="hamburger-btn" aria-label="Toggle navigation menu" aria-expanded="false" aria-controls="tablet-nav-dropdown"><nav id="tablet-nav-dropdown" aria-label="Primary navigation" hidden><starlight-theme-select>with Auto/Dark/Light optionsog:image,og:title,twitter:card,twitter:image— complete<link href=".../blog/rss.xml" rel="alternate">rel="preload"+font-display: swapdata-has-heroattribute set for landing-page CSS variantDoc page extras (guides, faq, blog):
<aside class="right-sidebar-container">) with in-page TOCaria-labelledby="starlight__on-this-page--mobile"print:hidden)View Visual Testing Limitation Details
Why Playwright was unavailable:
The Playwright MCP server runs in a container with
--network host, meaning itslocalhostis 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 innet::ERR_CONNECTION_REFUSED/TimeoutErroron navigation.What could NOT be verified visually:
Devices planned but untested visually:
Recommendations
Rename skip link anchor (low priority): Change
<h1 id="_top">to<h1 id="main-content">and updatehref="#_top"→href="#main-content"on the skip link. This improves clarity and aligns with WCAG 2.4.1 best practice.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.
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: