Skip to content

πŸ” Multi-Device Docs Testing Report - 2026-03-15Β #21017

@github-actions

Description

@github-actions

Test Summary

  • Triggered by: @pelikhan
  • Workflow run: Β§23101687706
  • Devices analyzed: All form factors (Mobile / Tablet / Desktop)
  • Test date: 2026-03-15
  • Method: Static build analysis (Playwright browser sandboxed β€” no network access in CI environment)

Results Overview

  • 🟒 Passed: 10 checks
  • 🟑 Warnings: 4 minor improvements
  • πŸ”΄ Critical: 0

Infrastructure Note

Playwright MCP browser could not connect to the local preview server ((localhost/redacted) or the host IP ((172.30.0.20/redacted) due to the CI network firewall sandbox. Live browser testing was replaced with comprehensive static analysis of the built HTML/CSS output in docs/dist/.


Critical Issues

None β€” the documentation site shows no blocking issues across any device category.


View All Warnings

🟑 W1 β€” Missing aria-live regions for dynamic content

Dynamic content updates (e.g., search results) may not be announced to screen reader users. No aria-live regions detected in the built output.

Affected devices: All

🟑 W2 β€” Limited aria-expanded coverage

Expandable/collapsible UI elements (sidebar sections, dropdowns) do not consistently expose aria-expanded state to assistive technology.

Affected devices: All (keyboard/screen reader users)

🟑 W3 β€” No responsive image srcset/sizes attributes

Raster images are served at a single resolution. On high-DPI mobile screens (iPhone 12 Pro Max, Pixel 5 etc.) images may appear slightly blurry. SVGs are fine.

Affected devices: Mobile (390x844, 428x926, 393x851, 360x800), Tablet (768x1024)

🟑 W4 β€” Playwright live testing blocked by network sandbox

Full interactive browser tests (click navigation, search, scroll) could not be executed. Findings above are based on static analysis only.


View Detailed Test Results by Device

Mobile Devices (390–428px wide)

Device Viewport Viewport Meta Responsive Tables Touch Targets Layout Overflow
iPhone 12 390Γ—844 βœ… βœ… block-stack at 640px βœ… 44px min βœ… none
iPhone 12 Pro Max 428Γ—926 βœ… βœ… βœ… βœ…
Pixel 5 393Γ—851 βœ… βœ… βœ… βœ…
Galaxy S21 360Γ—800 βœ… βœ… βœ… βœ…

All mobile form factors benefit from:

  • max-width: 640px breakpoints converting tables to stacked block display
  • Starlight sl-hidden / md:sl-flex classes hiding desktop nav and showing mobile alternatives
  • overflow-x: auto on all <pre> code blocks preventing horizontal blowout
  • max-width: 100% on all images, videos, and iframes

Tablet Devices (768–1024px wide)

Device Viewport Two-column Sidebar Navigation Code Blocks
iPad 768Γ—1024 βœ… responsive βœ… βœ… scroll
iPad Pro 11 834Γ—1194 βœ… βœ… βœ…
iPad Pro 12.9 1024Γ—1366 βœ… βœ… βœ…

Breakpoints at min-width: 50rem (800px) and min-width: 72rem (1152px) provide smooth transitions from single-column mobile to multi-column desktop layouts.

Desktop Devices (1366–2560px wide)

Device Viewport Full Sidebar Navigation Performance
HD 1366Γ—768 βœ… βœ… full nav βœ…
FHD 1920Γ—1080 βœ… βœ… βœ…
4K 2560Γ—1440 βœ… βœ… βœ…

Desktop breakpoints at min-width: 72rem enable the full three-column (TOC + content + sidebar) layout.


Accessibility Findings

Check Result
Viewport meta tag βœ… width=device-width, initial-scale=1
Alt text on images βœ… All images have descriptive alt text
aria-hidden on decorative icons βœ… 39 instances
Screen-reader-only text (sr-only) βœ… 9 instances
Primary nav aria-label βœ… aria-label="Primary navigation"
Search aria-label + keyboard shortcut βœ… aria-keyshortcuts="Control+K"
prefers-reduced-motion support βœ… Media query present
prefers-color-scheme (dark/light) βœ… Fully supported
Print styles βœ… Dedicated print CSS
aria-live regions 🟑 Not detected
aria-expanded on all expandables 🟑 Incomplete coverage

Recommendations

  1. Add aria-live="polite" to the search results container β€” ensures screen readers announce result counts as users type.
  2. Audit expandable sidebar sections for aria-expanded state toggling β€” this is a quick Starlight component fix.
  3. Consider adding srcset with 2Γ— versions of hero/feature images for Retina/HDPI mobile screens (all other images are SVG and scale perfectly).
  4. CI note: Configure Playwright MCP network access or use a public staging URL for future live browser testing to enable interactive click/scroll/form testing on top of this static analysis.

References:

Generated by Multi-Device Docs Tester Β· β—·

  • expires on Mar 17, 2026, 2:47 AM UTC

Metadata

Metadata

Labels

cookieIssue Monster Loves Cookies!documentationImprovements or additions to documentationtesting

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions